Web Push: как работают браузерные уведомления и где их применять
Как работает Web Push
Для Web Push не нужны email-адрес, номер телефона или установленное мобильное приложение. Подписка привязана к конкретному браузеру и устройству. Если человек использует сайт в нескольких браузерах или на нескольких устройствах, у него может появиться несколько отдельных push-подписок.
Общая последовательность выглядит так:
- Сайт предлагает подписаться. Лучше сначала объяснить, какие уведомления получит пользователь: например, об изменении статуса заказа или поступлении товара.
- Браузер запрашивает разрешение. Без согласия пользователя сайт не сможет показывать системные уведомления.
- Создаётся push-подписка. Для её работы необходим Service Worker — фоновый скрипт, который может обрабатывать push-события, когда страница не открыта. Его регистрирует сайт, а после получения разрешения создаётся подписка на уведомления.
- Сайт получает данные подписки. Объект
PushSubscriptionсодержит адрес push-сервиса и ключи шифрования. Эти данные сохраняются на стороне отправителя и могут быть связаны с профилем пользователя, если он известен. - Сообщение передаётся через push-сервис браузера. Он доставляет push-событие в Service Worker, который создаёт системное уведомление. В зависимости от браузера и операционной системы оно может отображаться даже при закрытой странице сайта.
localhost. Подписки и обработка входящих сообщений строятся на Push API, Notifications API и Service Worker API.Из чего состоит уведомление
Базовый Web Push содержит несколько элементов:
| Элемент | Назначение |
|---|---|
| Заголовок | Кратко сообщает, что произошло или что предлагается |
| Текст | Раскрывает основную мысль и объясняет ценность перехода |
| Иконка | Обозначает отправителя и делает сообщение узнаваемым |
| Ссылка для перехода | Открывает нужную страницу после нажатия на уведомление |
| Изображение и кнопки | Используются в расширенных Rich Push, если их поддерживает браузер |
Пример Rich Push от Altcraft: уведомление с баннером и кнопкой перехода
Внешний вид и доступные элементы зависят от браузера и операционной системы. Текст может обрезаться, кнопки и крупные изображения поддерживаются не везде. Поэтому ключевой смысл должен быть понятен по заголовку и первым словам сообщения.
Чем Web Push отличается от других каналов
Web Push часто путают с уведомлениями мобильных приложений. Оба формата появляются на экране устройства, но у них разные источники и условия подписки.
| Канал | Что требуется от пользователя | К чему привязана подписка | Типичный объём сообщения |
|---|---|---|---|
| Web Push | Разрешить уведомления сайту | К браузеру на конкретном устройстве | Короткий |
| Mobile Push | Установить мобильное приложение и разрешить уведомления | К установке приложения | Короткий, возможны функции приложения |
| Передать адрес и подписаться на рассылку | К email-адресу | От короткого текста до подробного письма | |
| SMS | Передать номер телефона | К номеру телефона | Короткий |
Главное преимущество Web Push — низкий порог подписки. Человеку не нужно заполнять форму или устанавливать приложение. Обратная сторона — меньший объём сообщения и зависимость от настроек браузера, устройства и операционной системы.
Для каких задач используют Web Push
Канал особенно уместен, когда сообщение короткое, актуальное в конкретный момент и ведёт к одному понятному действию.
- Статусы и сервисные события. Изменение состояния заказа, готовность документа, начало трансляции или восстановление доступа.
- Поведенческие сообщения. Напоминание о брошенной корзине, просмотренном товаре или незавершённом оформлении заказа.
- Изменение доступности. Возвращение товара в продажу, появление свободного места, открытие регистрации.
- Ограниченные предложения. Начало распродажи, персональный промокод или окончание срока действия бонусов.
- Контентные обновления. Выход материала или изменение важной информации, если пользователь сам выбрал такую тему.
- Реактивация. Возврат подписчика, который давно не заходил на сайт, с учётом его прежних интересов.
Например, образовательный сервис Princeton Review использовал браузерное уведомление, чтобы напомнить посетителю о товарах в корзине и предложить завершить покупку.
The Guardian использовала Web Push для оперативного информирования читателей о результатах выборов. Источник: The Guardian Mobile Innovation Lab
Как получить подписку и избежать отказов
Разрешение на уведомления не стоит запрашивать без объяснения их пользы. Если пользователь заблокировал уведомления, сайт обычно не может повторно показать системный запрос: разрешение придётся изменить в настройках браузера. Поэтому предложение подписаться не стоит выводить сразу при первом открытии сайта.
Чтобы сохранить аудиторию канала:
- указывайте, какие сообщения и как часто будут приходить;
- предлагайте подписку после действия, которое показывает интерес пользователя;
- разделяйте аудиторию по поведению, интересам и этапу клиентского пути;
- ограничивайте частоту и не дублируйте без необходимости одно сообщение во всех каналах;
- используйте точную ссылку на страницу, где пользователь продолжит действие;
- объясняйте, как отключить уведомления в настройках браузера или операционной системы;
- отдельно проверяйте требования законодательства к рекламным сообщениям и обработке данных.
Как оценивать Web Push
Количество подписчиков само по себе не показывает ценность канала. База может расти, но сообщения останутся нерелевантными или будут вести на неподходящие страницы.
Для оценки отслеживают:
- число действующих подписок и его изменение;
- доставки и недоставки уведомлений;
- переходы по уведомлениям;
- конверсии после перехода;
- недействительные подписки и отказы от уведомлений, если соответствующие события фиксируются;
- результаты отдельных сегментов, сценариев и вариантов контента.
Web Push в Altcraft
В стандартном редакторе Altcraft настраивают содержимое push-уведомления
Заключение
Web Push — канал коротких сообщений для пользователей сайта, которые разрешили уведомления в браузере. Он не требует номера телефона, email-адреса или отдельного мобильного приложения, но подписка остаётся связанной с конкретным браузером и устройством.
Читайте по теме
