Web push подписчики с iPhone и iPad

С iOS и iPadOS 16.4 владельцы iPhone и iPad могут подписаться на web push. Но не так, как на компьютере: в обычной вкладке Safari запроса на уведомления нет. Подписаться можно только из веб-приложения — сайта, который клиент добавил на экран «Домой».

Поэтому подписчиков с iOS не получится собрать стандартным попапом. Нужно сначала подготовить сайт к установке на экран «Домой», а потом объяснить клиенту, как это сделать.

Как подписывается клиент

1. Открывает сайт в Safari на iPhone или iPad с iOS 16.4 и новее.
2. Нажимает Поделиться → На экран «Домой».
3. Запускает сайт с иконки на экране «Домой». Сайт открывается как отдельное приложение, без адресной строки.
4. Нажимает кнопку подписки на сайте и разрешает уведомления в системном запросе.

После этого уведомления приходят как от обычного приложения: с иконкой и названием сайта. Отключить их клиент может в Настройках → Уведомления.

Chrome и Edge на iOS

Добавить сайт на экран «Домой» можно и из Chrome или Edge на iOS 16.4 и новее. Дальше все работает так же: подписка из веб-приложения.

Что нужно на сайте

• Web push подключен на сайте: установлен JS SDK, размещен файл service worker. Отдельный сертификат Safari для iOS не нужен.
• Сайт работает по HTTPS.
• На сайте есть файл манифеста веб-приложения (Web App Manifest), в котором поле display равно standalone или fullscreen.

Без манифеста сайт с экрана «Домой» откроется как обычная вкладка Safari, и подписаться на web push будет нельзя.

Если сайт уже PWA

Если сайт уже работает как прогрессивное веб-приложение (PWA) и у него есть манифест с нужным display, ничего дорабатывать не нужно. Проверить манифест можно в Chrome DevTools: вкладка Application → Manifest, или отчетом Lighthouse.

Шаг 1. Добавьте манифест

Создайте в корне сайта файл manifest.json:

{
  "name": "Магазин Пример",
  "short_name": "Пример",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#ffffff",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Поле	Что указать
name	Полное название сайта
short_name	Короткое название. Его iOS показывает под иконкой на экране «Домой» и в уведомлениях
start_url	Страница, которая откроется при запуске с экрана «Домой»
display	standalone или fullscreen. Обязательно
icons	Иконки. Используются на экране «Домой» и в уведомлениях

Подключите манифест в <head> на всех страницах сайта. Иконку для iOS лучше указать и отдельным тегом:

<link rel="manifest" href="/manifest.json">
<link rel="apple-touch-icon" href="/icons/icon-192.png">

Шаг 2. Покажите инструкцию по установке

Клиенты редко знают, что сайт можно добавить на экран «Домой». Покажите им подсказку — например, полосу внизу экрана: «Нажмите Поделиться, затем На экран „Домой“, чтобы получать уведомления о скидках». Хорошо работает картинка с иконкой Поделиться Safari.

Подсказку показывайте только тем, кто открыл сайт на iPhone или iPad в Safari, а не из веб-приложения:

const isIOS = /iPhone|iPad|iPod/.test(navigator.userAgent) ||
  (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1); // iPadOS
const isStandalone = window.navigator.standalone === true ||
  window.matchMedia('(display-mode: standalone)').matches;

if (isIOS && !isStandalone) {
  // показать подсказку «Добавьте сайт на экран „Домой“»
}

Подсказку можно сделать и попапом с ограничением «только мобильные». Но попап не различает iOS и Android и не знает, открыт ли сайт из веб-приложения, поэтому точнее показывать подсказку своим кодом.

Когда показывать

Как и обычный запрос подписки, не показывайте подсказку сразу при входе. Лучше после того, как клиент проявил интерес: посмотрел несколько товаров, добавил товар в корзину, оформил заказ. Объясните выгоду: скидки, снижение цены, статус заказа.

Шаг 3. Запросите подписку в веб-приложении

Когда клиент открыл сайт с экрана «Домой», покажите кнопку подписки. iOS покажет системный запрос только по нажатию клиента — автоматически при загрузке страницы он не появится.

Подойдет попап подписки на web push или своя кнопка с методом SDK:

r46('subscription', 'web_push_supported', function(supported) {
  if (!supported) return; // обычная вкладка Safari или iOS старше 16.4

  // показать кнопку «Получать уведомления», по нажатию:
  r46('subscription', 'web_push_subscribe',
    function() {
      // клиент подписался
    },
    function(error) {
      // клиент отказался
    }
  );
});

web_push_supported в обычной вкладке Safari на iOS возвращает false, а в веб-приложении с экрана «Домой» — true. Так кнопка подписки не появится там, где подписаться невозможно.

Шаг 4. Проверьте

1. Откройте сайт в Safari на iPhone с iOS 16.4 или новее.
2. Добавьте его на экран «Домой» и запустите с иконки. Сайт должен открыться без адресной строки Safari. Если адресная строка есть — проверьте манифест и поле display.
3. Нажмите кнопку подписки и разрешите уведомления.
4. Найдите себя в базе клиентов и отправьте тестовое уведомление из карточки рассылки web push.

Как выглядит уведомление на iOS

Уведомление на iPhone и iPad показывает:

• иконку и название сайта из манифеста — менять их для отдельных уведомлений нельзя;
• заголовок;
• текст уведомления;
• время доставки.

Учитывайте при подготовке рассылок:

• картинки, GIF и видео в уведомлении не показываются;
• заголовок обрезается примерно после 30–40 символов, текст — после 120–150 символов. Пишите главное в начале.