Эта страница переведена с помощью Cloud Translation API.

Используйте push-уведомления для вовлечения и повторного вовлечения пользователей.

Kate Jeffreys

Зачем использовать 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() , служба отправки создает уникальный 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-уведомления!

Мы создали серию кодовых лабораторий, которые помогут вам пройти каждый этап процесса.