Зачем использовать push-уведомления?
Уведомления представляют пользователю небольшие фрагменты информации. Веб-приложения могут использовать уведомления, чтобы сообщать пользователям о важных, срочных событиях или действиях, которые пользователь должен предпринять.
Внешний вид уведомлений различается в зависимости от платформы. Например:
Традиционно веб-браузеры должны были инициировать обмен информацией между сервером и клиентом, сделав запрос. С другой стороны, технология Web push позволяет настроить сервер на отправку уведомлений, когда это имеет смысл для вашего приложения. Служба push-уведомлений создает уникальные URL-адреса для каждого подписанного работника службы. Отправка сообщений на URL-адрес сервис-воркера вызывает события в этом сервис-воркере, побуждая его отобразить уведомление.
Push-уведомления могут помочь пользователям максимально эффективно использовать ваше приложение, предлагая им повторно открыть его и использовать на основе последней информации.
Создание и отправка уведомлений
Создавайте уведомления с помощью Notifications API . Объект Notification
имеет строку title
и объект options
. Например:
let title = 'Hi!';
let options = {
body: 'Very Important Message',
/* other options can go here */
};
let notification = new Notification(title, options);
title
отображается жирным шрифтом, когда уведомление активно, а body
содержит дополнительный текст.
Получите разрешение на отправку уведомлений
Чтобы отобразить уведомление, ваше приложение должно получить разрешение от пользователя:
Notification.requestPermission();
Как работают push-уведомления?
Реальная сила уведомлений заключается в сочетании сервис-воркеров и технологии push:
Сервисные работники могут работать в фоновом режиме и отображать уведомления, даже если ваше приложение не отображается на экране.
Технология Push позволяет настроить сервер на отправку уведомлений, когда это необходимо для вашего приложения. Служба push-уведомлений создает уникальные URL-адреса для каждого подписанного работника службы. Отправка сообщений на URL-адрес сервис-воркера вызывает события в этом сервис-воркере, побуждая его отобразить уведомление.
В следующем примере клиент регистрирует работника службы и подписывается на push-уведомления. Затем сервер отправляет уведомление конечной точке подписки.
Клиент и сервисный работник используют стандартный JavaScript без каких-либо дополнительных библиотек. Сервер построен с использованием пакета express
npm на Node.js и использует пакет npm web-push
для отправки уведомлений. Чтобы отправить информацию на сервер, клиент вызывает URL-адрес POST, предоставленный сервером.
Часть 1. Зарегистрируйте сервис-воркера и подпишитесь на Push
Клиентское приложение регистрирует сервисного работника с помощью
ServiceWorkerContainer.register()
. Зарегистрированный сервисный работник будет продолжать работать в фоновом режиме, когда клиент неактивен.Код клиента:
navigator.serviceWorker.register('sw.js');
Клиент запрашивает у пользователя разрешение на отправку уведомлений.
Код клиента:
Notification.requestPermission();
Чтобы включить push-уведомления, сервис-воркер использует
PushManager.subscribe()
для создания принудительной подписки. При вызовеPushManager.subscribe()
работник службы предоставляет ключ API приложения в качестве идентификатора.Код клиента:
navigator.serviceWorker.register('sw.js').then(sw => {
sw.pushManager.subscribe({ /* API key */ });
});Push-сервисы, такие как Firebase Cloud Messaging, работают по модели подписки. Когда работник службы подписывается на службу push-уведомлений путем вызова
PushManager.subscribe()
, служба push-уведомлений создает URL-адрес, уникальный для этого работника службы. URL-адрес известен как конечная точка подписки .Клиент отправляет конечную точку подписки на сервер приложений.
Код клиента:
navigator.serviceWorker.register('sw.js').then(sw => {
sw.pushManager.subscribe({ /* API key */ }).then(subscription => {
sendToServer(subscription, '/new-subscription', 'POST');
});
});Код сервера:
app.post('/new-subscription', (request, response) => {
// extract subscription from request
// send 'OK' response
});
Часть 2. Отправка уведомления
Веб-сервер отправляет уведомление конечной точке подписки.
Код сервера:
const webpush = require('web-push');
let options = { /* config info for cloud messaging and API key */ };
let subscription = { /* subscription created in Part 1*/ };
let payload = { /* notification */ };
webpush.sendNotification(subscription, payload, options);Уведомления, отправляемые на конечную точку подписки, запускают push-события, в качестве цели которых выступает сервисный работник. Сервисный работник получает сообщение и отображает его пользователю в виде уведомления.
Код сервисного работника:
self.addEventListener('push', (event) => {
let title = { /* get notification title from event data */ }
let options = { /* get notification options from event data */ }
showNotification(title, options);
})Пользователь взаимодействует с уведомлением, делая веб-приложение активным, если оно еще не было активным.
Следующие шаги
В качестве следующего шага внедрите push-уведомления!
Мы создали серию кодовых лабораторий, которые помогут вам пройти каждый этап процесса.