Примечание: Устаревшая документация для этого элемента отсутствует, поэтому вы видите текущую документацию.
Apple выпустила iOS и iPadOS 16.4, которые поддерживают веб-push-уведомления для веб-приложений, добавленных на главный экран устройств iPhone и iPad. В этом руководстве мы поможем вам настроить ваш веб-сайт для отправки уведомлений пользователям iPhone и iPad, посещающим ваш веб-сайт.
Откройте безграничный охват на устройствах iOS. Не упустите момент.
Настройтесь сегодня и верните посетителей вашего сайта, пока они не забыли о вас. Начните бесплатно, отправляйте умнее и развивайтесь с планом, который подходит вашему сайту.
Веб-push-уведомления доступны для браузера Safari, Google Chrome и Edge на iPhone и iPad с iOS и iPadOS 16.4. iOS требует, чтобы пользователь добавил ваш веб-сайт на главный экран, а затем открыл веб-приложение, нажав на его значок. Веб-приложение открывается как любое другое нативное приложение на iOS или iPadOS вместо открытия в браузере. Пользователи могут разрешить получение push-уведомлений, а затем управлять этими разрешениями в настройках уведомлений, как и любым другим приложением на iPhone и iPad.
Прежде чем начать
Вам потребуется несколько вещей, чтобы кампании веб-push работали на устройствах iOS.
- Ваше веб-приложение должно предоставлять файл манифеста веб-приложения (manifest.json) с членом display, установленным в значение standalone или fullscreen.
- Пользователи должны использовать iOS или iPadOS 16.4 или новее.
- Пользователю необходимо установить веб-приложение на главный экран, нажав кнопку «Поделиться», чтобы открыть меню «Поделиться», а затем нажав «Добавить на главный экран».
- Для отображения системного запроса разрешения и предоставления разрешения на получение push-уведомлений требуется действие пользователя, такое как щелчок или нажатие на кнопку.
Если ваш веб-сайт уже является прогрессивным веб-приложением (PWA), вам не нужно вносить дополнительные обновления для подготовки к веб-push на iOS/iPadOS. Если вы не уверены, является ли ваш веб-сайт PWA, проконсультируйтесь с вашей командой разработчиков или используйте Lighthouse в Chrome DevTools.
Настройка вашего веб-сайта для веб-push-уведомлений iOS и iPadOS
Следуйте инструкциям, чтобы включить и отправлять push-уведомления в Safari на iPhone и iPad:
- 1. Добавьте файл манифеста веб-приложения на ваш веб-сайт.
- 2. Интегрируйте PushEngage на ваш веб-сайт.
- 3. Разверните и протестируйте манифест вашего веб-сайта.
- 4. Протестируйте модальное окно диалога подписки и запрос разрешения.
1. Добавьте файл манифеста веб-приложения на ваш веб-сайт
Манифест веб-приложения — это JSON-файл, который сообщает браузеру о вашем прогрессивном веб-приложении (PWA) и о том, как оно должно выглядеть и вести себя при установке на настольное или мобильное устройство пользователя. Он содержит метаданные, такие как название вашего веб-приложения, описание, значки, цветовая схема и URL-адрес, который должен открываться при запуске приложения.
Вы можете использовать любой онлайн-инструмент для быстрого создания файла манифеста. Файл манифеста может иметь любое имя, но обычно называется manifest.json и должен быть загружен в корневой каталог вашего веб-сайта. Если вам нужна помощь в добавлении кода на ваш сайт WordPress, попробуйте плагин WPCode.
Типичный манифест выглядит примерно так:
{
"name": "PushEngage",
"short_name": "PushEngage",
"start_url": "/",
"display": "standalone",
"theme_color": "#3b43ff",
"background_color": "#ffffff",
"icons": [
{
"src": "icon/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "img/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "img/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
Примечание: Значение члена display в манифесте должно быть установлено в standalone или fullscreen.
После создания файла манифеста сошлитесь на манифест на HTML-странице вашего веб-сайта, используя тег <link> в разделе <head> страницы.
Например:
<link rel="manifest" href="/manifest.json">
2. Интеграция PushEngage на вашем веб-сайте
Следующий шаг — интеграция PushEngage на вашем веб-сайте для регистрации и установки Service Worker на странице.
Если вы не завершили установку, здесь находится руководство по установке PushEngage. Если вы пользователь WordPress, вы можете использовать плагин PushEngage для WordPress, который позаботится о регистрации Service Worker.
Вы можете следовать шагам, упомянутым здесь, если у вас уже есть Service Worker и вам нужно объединить его с Service Worker PushEngage.
3. Развертывание и тестирование манифеста вашего веб-сайта
После загрузки манифеста и интеграции PushEngage следующим шагом будет тестирование вашего веб-приложения, чтобы убедиться, что манифест вашего веб-приложения был реализован правильно. Вы можете протестировать свой веб-сайт на различных устройствах и в браузерах, добавив его на главный экран.
Следуйте этим шагам:
- 1. Откройте веб-сайт в браузере Safari под управлением iOS 16.4 или новее.
- 2. Нажмите кнопку «Поделиться», чтобы открыть меню общего доступа.
- 3. Нажмите опцию «Добавить на главный экран».
- 4. Сохраните приложение на главном экране.
Если ваш веб-сайт был успешно настроен для веб-push, он откроет веб-приложение, как любое другое приложение на iOS или iPadOS, вместо открытия в браузере и функционирования просто как ярлык.
Вы должны уведомить своего пользователя, показав баннер на экране приложения, предлагающий пользователю добавить ваше приложение на главный экран его устройства iOS и подписаться на веб-push-уведомления.
4. Тестирование диалогового окна подписки
Веб-приложение на главном экране на iOS и iPadOS требует прямого взаимодействия с пользователем, например, нажатия на кнопку на странице, чтобы отобразить диалоговое окно подписки для получения разрешения. Следуйте этим шагам, чтобы проверить, работает ли запрос разрешения:
- 1. Откройте веб-приложение, нажав на значок приложения на главном экране вашего устройства.
- 2. Подождите, пока на странице появится диалоговое окно подписки PushEngage.
- 3. Нажмите кнопку «Разрешить» в модальном окне PushEngage, чтобы отобразить запрос разрешения.
- 4. Нажмите кнопку «Разрешить» в запросе разрешения.
Примечание: Диалоговое окно подписки появится только в том случае, если ваш веб-сайт использует HTTPS, а приложение было запущено с главного экрана. Вы можете настроить дизайн и поведение диалогового окна подписки на панели управления PushEngage.
Отправка кампании веб-push пользователям iOS и iPadOS
После выполнения вышеуказанных шагов, необходимых для веб-push-уведомлений iOS и iPadOS, вы можете начать отправлять push-уведомления, используя панель управления PushEngage.
Веб-уведомления в iOS работают аналогично другим нативным приложениям. Веб-уведомления отображаются на экране как всплывающее уведомление, в центре уведомлений, а также на экране блокировки. Пользователи также могут управлять своими настройками уведомлений в настройках iOS. Как только вы нажмете на уведомление, оно перенесет вас на нужную целевую страницу в веб-приложении.
Структура веб-уведомления в iOS
В настоящее время push-уведомления Safari в iOS не поддерживают богатые медиа, анимированные GIF-файлы или видео. Как только эти функции будут добавлены, мы также включим их. Пожалуйста, следуйте приведенным ниже инструкциям, чтобы создавать уведомления для пользователей iOS.
Веб-push-уведомления в iOS и iPadOS включают следующие элементы:
- 1. Значок – Значок, указанный в файле манифеста. Его нельзя изменить для отдельных сообщений.
- 2. Заголовок – Заголовок ограничен 30-40 символами, после чего он обрезается.
- 3. Имя приложения – Имя приложения указано в файле манифеста и не может быть изменено для отдельных сообщений.
- 4. Сообщение – Текст ограничен 120-150 символами, после чего он обрезается.
- 5. Временная метка – Показывает, когда уведомление было доставлено на устройство.
Это все, что вам нужно, чтобы начать собирать подписчиков и отправлять кампании пользователям iPhone и iPad.
Если у вас возникнут какие-либо проблемы, пожалуйста, свяжитесь с нами, нажав здесь. Наша служба поддержки поможет вам.
