Краткий обзор того, что такое push-уведомления, зачем они могут вам понадобиться и как они работают.
Что такое push-уведомления?
Push-сообщения позволяют доносить информацию до пользователей, даже когда они не посещают ваш сайт. Они называются push -сообщениями, потому что вы можете «отправлять» информацию пользователям, даже когда они неактивны. Сравните технологию Push с технологией Pull , чтобы лучше понять эту концепцию.
Уведомления предоставляют пользователю небольшие фрагменты информации. Веб-сайты могут использовать уведомления, чтобы сообщать пользователям о важных, срочных событиях или действиях, которые необходимо выполнить. Внешний вид уведомлений различается в зависимости от платформы:
Push-уведомления и обычные уведомления — это две отдельные, но взаимодополняющие технологии. Push-уведомления — это технология отправки сообщений с вашего сервера пользователям, даже когда они неактивно используют ваш веб-сайт. Уведомления — это технология отображения отправленной информации на устройстве пользователя. Можно использовать уведомления без push-уведомлений. Возможно, в будущем станет возможным использовать push-уведомления и без видимых для пользователя уведомлений ( тихие push- уведомления), но в настоящее время браузеры этого не позволяют. На практике их обычно используют вместе. Неспециалист, вероятно, не поймет разницы между push-уведомлениями и обычными уведомлениями. В этой подборке под push-уведомлениями мы подразумеваем комбинацию отправки сообщения с последующим отображением его в виде уведомления. Под push-уведомлениями мы подразумеваем саму технологию push-уведомлений. А под уведомлениями — саму технологию уведомлений.
Зачем использовать push-уведомления?
- Для пользователей push-уведомления — это способ получать своевременную , актуальную и точную информацию.
- Для вас (владельца сайта) push-уведомления — это способ повысить вовлеченность пользователей.
Как работают push-уведомления?
В общих чертах, ключевые шаги для внедрения push-уведомлений следующие:
- Добавление клиентской логики для запроса у пользователя разрешения на отправку push-уведомлений, а затем отправка информации об идентификаторе клиента на ваш сервер для хранения в базе данных.
- Добавление серверной логики для отправки сообщений на клиентские устройства.
- Добавление клиентской логики для приема сообщений, отправленных на устройство, и отображения их в виде уведомлений.
Остальная часть этой страницы более подробно описывает эти шаги.
Получите разрешение на отправку push-уведомлений.
Во-первых, вашему веб-сайту необходимо получить разрешение пользователя на отправку push-уведомлений. Это должно запускаться действием пользователя, например, нажатием кнопки «Да» рядом с запросом Do you want to receive push notifications? . После подтверждения вызовите метод Notification.requestPermission() . Операционная система или браузер на устройстве пользователя, вероятно, отобразит какой-либо пользовательский интерфейс для формального подтверждения согласия пользователя на получение push-уведомлений. Этот интерфейс различается в зависимости от платформы.
Подпишите клиент на получение push-уведомлений.
После получения разрешения ваш веб-сайт должен инициировать процесс подписки пользователя на push-уведомления. Это делается с помощью JavaScript, используя Push API . Вам потребуется предоставить открытый ключ аутентификации в процессе подписки, о котором вы узнаете подробнее позже. После запуска процесса подписки браузер отправляет сетевой запрос к веб-сервису, известному как push-сервис, о котором вы также узнаете подробнее позже.
Если подписка прошла успешно, браузер возвращает объект PushSubscription . Вам потребуется хранить эти данные в течение длительного времени. Обычно это делается путем отправки информации на контролируемый вами сервер, а затем сервер сохраняет ее в базе данных.
Отправить push-уведомление
Ваш сервер фактически не отправляет push-уведомление напрямую клиенту. Это делает служба push- уведомлений. Служба push-уведомлений — это веб-служба, управляемая производителем браузера пользователя. Чтобы отправить push-уведомление клиенту, необходимо отправить запрос к службе push-уведомлений через веб-сервис. Запрос к службе push-уведомлений называется запросом по протоколу WebPush . Запрос по протоколу WebPush должен включать в себя:
- Какие данные следует включить в сообщение?
- Какому клиенту отправить сообщение?
- Инструкции о том, как служба push-уведомлений должна доставлять сообщения. Например, вы можете указать, что служба push-уведомлений должна прекратить попытки отправки сообщения через 10 минут.
Обычно запрос по протоколу Web Push отправляется через сервер, который вы контролируете. Конечно, вашему серверу не обязательно самостоятельно формировать исходный запрос к веб-сервису. Существуют библиотеки, которые могут это сделать за вас, например, web-push-libs . Но в основе лежит запрос к веб-сервису по протоколу HTTP.
Сервис push-уведомлений получает ваш запрос, аутентифицирует его и направляет push-сообщение соответствующему клиенту. Если браузер клиента находится в автономном режиме, сервис push-уведомлений ставит сообщение в очередь до тех пор, пока браузер не подключится к сети.
Каждый браузер использует тот сервис push-уведомлений, который ему нравится. Вы, как веб-разработчик, не можете на это повлиять. Это не проблема, потому что запрос протокола веб-push-уведомлений стандартизирован . Другими словами, вам не нужно беспокоиться о том, какой сервис push-уведомлений использует производитель браузера. Вам просто нужно убедиться, что ваш запрос протокола веб-push-уведомлений соответствует спецификации. Среди прочего, спецификация гласит, что запрос должен включать определенные заголовки, а данные должны отправляться в виде потока байтов.
Однако вам необходимо убедиться, что вы отправляете запрос по протоколу веб-push к правильному сервису push-уведомлений. Эта информация содержится в данных PushSubscription , которые браузер возвращает вам в процессе подписки. Объект PushSubscription выглядит следующим образом:
{
"endpoint": "https://fcm.googleapis.com/fcm/send/c1KrmpTuRm…",
"expirationTime": null,
"keys": {
"p256dh": "BGyyVt9FFV…",
"auth": "R9sidzkcdf…"
}
}
Домен endpoint по сути представляет собой службу отправки сообщений. Путь к endpoint содержит информацию об идентификаторе клиента, которая помогает службе отправки сообщений точно определить, какому клиенту следует отправить сообщение.
keys используются для шифрования, о чем будет рассказано далее.
Зашифровать push-сообщение
Данные, отправляемые в службу push-уведомлений, должны быть зашифрованы. Это предотвращает просмотр данных, отправляемых клиенту, службой push-уведомлений. Помните, что выбор службы push-уведомлений зависит от производителя браузера, и теоретически эта служба может быть небезопасной или ненадежной. Ваш сервер должен использовать keys предоставленные в PushSubscription для шифрования запросов по протоколу веб-push.
Подписывайте запросы протокола веб-push.
Сервис push-уведомлений позволяет предотвратить отправку сообщений вашим пользователям посторонними лицами. Технически это необязательно, но в Chrome для этого требуется самый простой способ реализации. В Firefox это необязательно. В будущем это может потребоваться и в других браузерах.
Этот рабочий процесс включает в себя закрытый и открытый ключи, уникальные для вашего приложения. Процесс аутентификации работает примерно так:
- Закрытый и открытый ключи генерируются однократно. Комбинация закрытого и открытого ключей называется ключами сервера приложений . Их также могут называть ключами VAPID . VAPID — это спецификация, определяющая этот процесс аутентификации.
- При подписке клиента на push-уведомления из вашего JavaScript-кода вы предоставляете свой открытый ключ. Когда служба push-уведомлений генерирует
endpointдля устройства, она связывает предоставленный открытый ключ с этойendpoint. - При отправке запроса по протоколу WebPush вы подписываете некоторую информацию в формате JSON своим закрытым ключом.
- Когда служба push-уведомлений получает ваш запрос по протоколу Web Push, она использует сохраненный открытый ключ для аутентификации подписанной информации. Если подпись действительна, служба push-уведомлений знает, что запрос поступил с сервера, на котором находится соответствующий закрытый ключ.
Настройте параметры доставки push-уведомлений.
Спецификация запроса протокола веб-push также определяет параметры, позволяющие настраивать способ отправки push-сообщения службой push-уведомлений клиенту. Например, можно настроить:
- Время жизни (TTL) сообщения определяет, как долго служба push-уведомлений должна пытаться доставить сообщение.
- Срочность сообщения, что полезно в случае, если служба push-уведомлений экономит заряд батареи клиента, доставляя только сообщения с высоким приоритетом.
- Тема сообщения, которая заменяет все ожидающие сообщения на ту же тему последним сообщением.
Получать и отображать отправленные сообщения в виде уведомлений.
После отправки запроса по протоколу Web Push в службу push-уведомлений, служба push-уведомлений сохраняет ваш запрос в очереди до тех пор, пока не произойдет одно из следующих событий:
- Клиент подключается к сети, и служба push-уведомлений доставляет ему сообщение.
- Срок действия сообщения истекает.
Когда браузер клиента получает push-уведомление, он расшифровывает данные этого сообщения и отправляет событие push вашему сервис-воркеру . Сервис-воркер — это, по сути, код JavaScript, который может работать в фоновом режиме, даже когда ваш веб-сайт не открыт или браузер закрыт. В обработчике события push вашего сервис-воркера вы вызываете ServiceWorkerRegistration.showNotification() чтобы отобразить информацию в виде уведомления.
Куда отправиться дальше?
- Обзор веб-push-уведомлений
- Как работает Push
- Регистрация пользователя
- Пользовательский интерфейс разрешений
- Отправка сообщений с помощью библиотек веб-push-уведомлений
- Протокол веб-push
- Обработка сообщений
- Отображение уведомления
- Поведение при получении уведомлений
- Типичные шаблоны уведомлений
- Часто задаваемые вопросы о push-уведомлениях
- Распространенные проблемы и сообщения об ошибках