Веб-пуши на iPhone и iPad

Пользователи iPhone и iPad на iOS и iPadOS 16.4 или новее могут получать веб-пуш-уведомления от вашего сайта после того, как добавят его на экран «Домой».

Когда веб-пуши работают на iPhone и iPad

Веб-пуши на iOS и iPadOS работают только для сайта, открытого с его иконки на экране «Домой». В обычной вкладке Safari браузер вообще не предлагает пуши, поэтому Web SDK инициализируется без пушей и посетитель не может подписаться.

Чтобы получать уведомления, пользователю нужны:

iPhone или iPad на iOS или iPadOS 16.4 или новее.
Ваш сайт, добавленный на экран «Домой» и открытый с этой иконки.
Разрешение на уведомления, выданное в ответ на нажатие на вашем сайте.

Что нужно вашему сайту

Интегрируйте Web SDK так же, как для десктопных браузеров, а затем добавьте манифест веб-приложения:

Интегрируйте SDK и service worker по инструкции Web Push SDK 3.0. Если у вашего сайта уже есть собственный service worker, следуйте разделу Поддержка Progressive Web App.

Добавьте манифест веб-приложения, в котором display имеет значение standalone или fullscreen, и подключите его на каждой странице:

{
  "name": "Example Store",
  "short_name": "Store",
  "start_url": "/",
  "display": "standalone",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

<link rel="manifest" href="/manifest.json">

Запрашивайте разрешение на уведомления по нажатию пользователя. iOS и iPadOS показывают диалог разрешения только в ответ на прямое действие пользователя, поэтому используйте виджет подписки или кнопку, которая вызывает Pushwoosh.subscribe():
```
<button onclick="Pushwoosh.subscribe()">Get notifications</button>
```

Как найти подписчиков с iPhone и iPad в Pushwoosh

Pushwoosh регистрирует веб-подписчиков с iPhone и iPad под платформой Chrome, поэтому статистика не показывает их отдельно и ни один тег по умолчанию не позволяет надёжно определить устройство.

Чтобы таргетировать этих подписчиков, устанавливайте с сайта собственный тег:

Создайте пользовательский тег в Control Panel до того, как сайт начнёт его отправлять, например тег типа String с именем Web App Platform. Снимите флажок User-specific, который установлен по умолчанию. Так получится общий тег, который хранится для каждого устройства.

Без этого шага setTags автоматически создаст тег как пользовательский (User-specific). Его значение общее для всех устройств с одинаковым User ID, поэтому, как только сайт вызовет registerUser, десктопный браузер пользователя тоже получит ios и будет получать сообщения, которые вы адресуете подписчикам с iPhone и iPad по этому тегу.

Устанавливайте тег, когда сайт запущен с экрана «Домой» на iPhone или iPad:

Pushwoosh.push((api) => {
  // iPadOS Safari reports a Mac user agent, so a touch screen marks an iPad
  const isIos = /iPhone|iPad/.test(navigator.userAgent)
    || (/Macintosh/.test(navigator.userAgent) && navigator.maxTouchPoints > 1);
  const isIosHomeScreen = isIos && (window.navigator.standalone === true
    || window.matchMedia('(display-mode: standalone)').matches);

  if (isIosHomeScreen) {
    api.setTags({ 'Web App Platform': 'ios' });
  }
});

Подпишитесь с тестового iPhone или iPad.
Проверьте значение тега на этом устройстве в User Explorer. setTags возвращает успех, даже когда Pushwoosh не сохраняет значение, например если для аккаунта отключено автоматическое создание тегов, поэтому один лишь код не подтверждает, что значение сохранилось.
Создайте сегмент по этому тегу, чтобы отправить сообщение только подписчикам с iPhone и iPad.