Как настроить веб-пуш на сайте: требования и ограничения

Веб-пуш — это системное уведомление от сайта, которое может появиться, когда его вкладка уже закрыта. Сам принцип не изменился, но одной формы с кнопкой «Подписаться» недостаточно: рабочая схема требует разрешения пользователя, браузерной подписки, фонового обработчика и сервера для отправки сообщений.

Главное практическое ограничение осталось прежним: подписка создаётся для конкретного браузера на конкретном устройстве, а не для человека вообще. На устройствах Apple действуют дополнительные условия, поэтому подключение и доставку необходимо проверять отдельно на настольных компьютерах, телефонах с Android и мобильных устройствах Apple.

Как устроена доставка уведомления

Веб-пуш объединяет несколько механизмов. Браузер получает системное разрешение, создаёт подписку через службу доставки, а фоновый обработчик принимает сообщение и передаёт его операционной системе для показа.

Справка о событии фоновой доставки уточняет, что оно обрабатывается вне обычного контекста страницы и доступно только при защищённом соединении. Поэтому рабочий сайт должен использовать корректно настроенный сертификат; исключения, допустимые при локальной разработке, на публичный домен не распространяются.

После согласия браузер возвращает объект подписки. В нём находятся адрес службы доставки и криптографические данные, необходимые для защищённой передачи сообщения. Сайт отправляет этот объект на свой сервер и сохраняет его как отдельную запись.

Такая запись не заменяет электронную почту, телефон или учётную запись. Один пользователь может создать несколько подписок — например, на рабочем компьютере, личном ноутбуке и телефоне. Если разрешение отозвано, данные браузера очищены или адрес аннулирован службой доставки, сервер должен удалить недействительную запись.

Что понадобится сайту

Перед техническим подключением нужно определить, ради какого события человеку стоит разрешать уведомления. Понятные сценарии — изменение статуса заказа, поступление ожидаемого товара, начало выбранной трансляции или важное сообщение о работе сервиса. Формулировка «Получать новости» не объясняет, какие сообщения придут и насколько часто.

Для собственной реализации необходимы:

домен с защищённым соединением и действующим сертификатом;
кнопка или другой элемент, после которого браузер запрашивает разрешение;
проверка поддержки уведомлений, фоновой доставки и служебных обработчиков;
фоновый обработчик для приёма сообщения, показа уведомления и реакции на нажатие;
открытый и закрытый ключи для идентификации отправителя;
серверное хранилище подписок и модуль отправки;
управление отпиской и очистка недействительных адресов.

Вместо собственной серверной части можно использовать специализированную платформу. Она может предоставить подключение, сегментацию, расписание и отчётность, но не отменяет системное разрешение браузера. До выбора платформы стоит выяснить, можно ли выгрузить подписки, кто управляет ключами отправителя, как удаляются недействительные адреса и какие браузеры действительно поддерживаются.

Как подключить веб-пуш

Проверьте возможности браузера. Если нужных механизмов нет, скройте кнопку подписки или предложите подходящий альтернативный канал. Неработающий системный запрос не следует выдавать за успешное подключение.
Зарегистрируйте фоновый обработчик. Его область действия должна охватывать страницы, для которых нужна доставка. Ошибка загрузки, неверный тип файла или слишком узкая область регистрации могут оставить часть сайта без обработки сообщений.
Объясните пользу до системного запроса. Сначала покажите собственную кнопку и назовите тип будущих сообщений. Запрос разрешения запускайте после осознанного действия, а не сразу при первом открытии страницы.
Создайте браузерную подписку. Передайте открытый ключ отправителя, получите объект подписки и отправьте его на сервер по защищённому соединению. Сервер должен различать записи разных браузеров и устройств.
Обработайте сообщение. Фоновый обработчик формирует заголовок, текст и данные для перехода. Ссылка должна вести к соответствующему заказу, товару или событию, а не неизменно на главную страницу.
Настройте нажатие на уведомление. Обработчик может открыть нужную страницу или перевести пользователя в уже открытую вкладку. Адрес назначения необходимо проверять, чтобы входящие данные не позволяли перенаправлять человека на произвольный домен.
Добавьте отписку. Интерфейс должен показывать текущее состояние разрешения и позволять отключить сообщения. После отписки соответствующую серверную запись следует удалить.

Инструкция по созданию браузерной подписки связывает в одну последовательность регистрацию фонового обработчика, запрос разрешения, создание подписки и её сохранение на сервере. Там же отмечено, что после отказа сайт обычно не может повторно открыть системный запрос: пользователь должен сам изменить разрешение в настройках браузера.

Особенности устройств Apple

Мобильный браузер Apple нельзя считать полным аналогом браузера на Android. На телефонах и планшетах Apple уведомления предназначены для веб-приложений, добавленных на домашний экран, а запрос разрешения должен следовать за непосредственным действием пользователя.

В 2025 году разработчики браузерного движка представили декларативную доставку: стандартизированное содержимое сообщения может быть показано без выполнения кода фонового обработчика. Описание этой модели доставки подтверждает, что серверная подписка сохраняется, а на мобильных устройствах Apple механизм по-прежнему относится к веб-приложениям домашнего экрана.

Для сайта с несколькими целевыми браузерами классическая схема с фоновым обработчиком остаётся совместимой основой. Декларативную доставку можно применять как дополнительную возможность там, где она поддерживается, не делая её единственным способом получения сообщения.

Как запрашивать разрешение

Системное окно почти не объясняет ценность подписки, поэтому контекст лучше дать на самой странице. Например, возле отсутствующего товара можно разместить кнопку «Сообщить о поступлении», а системный запрос показать после нажатия. Пользователь заранее понимает, какое событие ожидает.

Нельзя показывать сообщение об успешной подписке, пока браузер не выдал разрешение, а сервер не сохранил полученные данные. Если решение ещё не принято, интерфейс может оставить кнопку доступной. После явного запрета автоматические повторные запросы следует прекратить.

Условный пример полезного уведомления: «Заказ № 123 передан курьеру» с переходом на страницу заказа. Сообщение называет проверяемое событие и понятное действие; искусственная срочность или неподтверждённая выгода ему не нужны.

Что проверить перед запуском

Тестирование должно охватывать не только успешную отправку. Проверьте первый запрос разрешения, повторный визит подписанного пользователя, отказ, отписку, получение при закрытой вкладке, переход по уведомлению и обработку адреса, который служба доставки признала недействительным.

Отдельно проверьте несколько устройств одной учётной записи. Сервер не должен путать их подписки, но и не должен несколько раз отправлять одно сообщение по одной записи. Если уведомления зависят от часового пояса, языка или типа устройства, эти признаки необходимо хранить и обновлять отдельно.

В аналитике следует разделять попытку отправки, принятие запроса службой доставки, показ и нажатие. Успешный ответ серверу ещё не означает, что человек увидел сообщение: устройство может быть выключено, доставка — отложена системой, а разрешение — изменено после формирования рассылки.

Адреса подписок стоит считать чувствительными техническими данными. Доступ к закрытому ключу отправителя необходимо ограничить, сами адреса нельзя публиковать, а недействительные записи следует удалять. Веб-пуш не требует обязательного сбора телефона или электронной почты, но это не делает браузерную подписку общедоступной.

Рабочая цепочка распределена между сайтом, браузером и сервером: человек разрешает уведомления, браузер создаёт подписку, сервер отправляет сообщение, а обработчик показывает его и открывает нужную страницу. Если отсутствует хотя бы один из этих элементов, кнопка подписки сама по себе не обеспечит доставку.

Веб-пуш не заработает одной кнопкой: что нужно сайту и серверу