Codelab: создание клиента push-уведомлений

Кейт Джеффрис
Kate Jeffreys
Кейс Баскс
Kayce Basques
X GitHub

Эта кодовая лаборатория показывает вам, шаг за шагом, как создать клиент push-уведомлений. К концу кодовой лаборатории у вас будет клиент, который:

  • Подписывает пользователя на push-уведомления.
  • Получает push-сообщения и отображает их в виде уведомлений.
  • Отписывает пользователя от push-уведомлений.

Эта кодовая лаборатория направлена ​​на то, чтобы помочь вам учиться на практике и не слишком много говорит о концепциях. Ознакомьтесь с разделом Как работают push-уведомления?, чтобы узнать о концепциях push-уведомлений.

Серверный код этой кодовой лаборатории уже готов. В этой кодовой лаборатории вы будете реализовывать только клиент. Чтобы узнать, как реализовать сервер push-уведомлений, ознакомьтесь с Codelab: Build a push notification server .

Ознакомьтесь с push-notifications-client-codelab-complete ( источник ), чтобы увидеть полный код.

Совместимость с браузерами

Известно, что эта кодовая лаборатория работает со следующими комбинациями операционных систем и браузеров:

  • Windows: Chrome, Edge
  • macOS: Chrome, Firefox
  • Android: Chrome, Firefox

Известно, что эта кодовая лаборатория не работает со следующими операционными системами (или комбинациями операционной системы и браузера):

  • macOS: Brave, Edge, Safari
  • iOS

Настраивать

Получите редактируемую копию кода

Редактор кода, который вы видите справа от этих инструкций, в этой лабораторной работе будет называться Glitch UI .

  1. Нажмите «Ремикс для редактирования», чтобы сделать проект редактируемым.

Настроить аутентификацию

Прежде чем вы сможете запустить push-уведомления, вам нужно настроить сервер и клиент с ключами аутентификации. См. Sign your web push protocol requests, чтобы узнать, почему.

  1. В пользовательском интерфейсе Glitch нажмите «Инструменты» , а затем нажмите «Терминал» , чтобы открыть терминал Glitch.
  2. В терминале Glitch запустите npx web-push generate-vapid-keys . Скопируйте значения закрытого и открытого ключей.
  3. В пользовательском интерфейсе Glitch откройте .env и обновите VAPID_PUBLIC_KEY и VAPID_PRIVATE_KEY . Установите VAPID_SUBJECT на mailto:[email protected] . Все эти значения должны быть заключены в двойные кавычки. После внесения обновлений ваш файл .env должен выглядеть примерно так: 
VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:[email protected]"
  1. Закройте Glitch Terminal.
  1. Откройте public/index.js .
  2. Замените VAPID_PUBLIC_KEY_VALUE_HERE на значение вашего открытого ключа.

Зарегистрируйте работника сферы услуг

В конечном итоге вашему клиенту понадобится service worker для получения и отображения уведомлений. Лучше всего зарегистрировать service worker как можно раньше. Подробнее см. в разделе Получение и отображение push-сообщений в качестве уведомлений .

  1. Замените комментарий // TODO add startup logic here на следующий код: 
// TODO add startup logic here
if ('serviceWorker' in na&&vigator  'PushManager' in window) {
  navigator.serviceWorker.register('./service-worker.js').then(ser>viceWorkerRegistration = {
    console.info('Service worker was registered.');
    console.info({serviceWorkerRe>gistration});
  }).catch(error = {
    console.error('An error occurred while registering the service worker.');
    console.error(error);
  });
  subscribeButton.disabled = false;
} else {
  console.error('Browser does not support service workers or push messages.');
}

subscribeButton.addEventListener('click', subscribeButtonHandler);
unsubscribeButton.addEventListener('click', unsubscribeButtonHandler);
  1. Для предварительного просмотра сайта нажмите View App . Затем нажмите Fullscreen полноэкранный .
  1. Нажмите `Control+Shift+J` (или `Command+Option+J` на Mac), чтобы открыть DevTools.
  2. Нажмите вкладку Консоль . Вы должны увидеть сообщение Service worker was registered. вошел в Консоль.

Запросить разрешение на push-уведомления

Никогда не запрашивайте разрешение на отправку push-уведомлений при загрузке страницы. Вместо этого ваш пользовательский интерфейс должен спрашивать пользователя, хочет ли он получать push-уведомления. После того, как он явно подтвердит (например, нажав кнопку), вы можете начать формальный процесс получения разрешения на push-уведомления от браузера.

  1. В пользовательском интерфейсе Glitch нажмите «Просмотреть исходный код» , чтобы вернуться к коду.
  2. В public/index.js замените комментарий // TODO в subscribeButtonHandler() следующим кодом: 
// TODO
// Prevent the user from clicking the subscribe button multiple times.
subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
  console.error('The user explicitly denied the permission request.');
  return;
}
if (result === 'granted') {
  console.info('The user accepted the permission request.');
}
  1. Вернитесь на вкладку приложения и нажмите Подписаться на push . Ваш браузер или операционная система, вероятно, спросят вас, хотите ли вы разрешить веб-сайту отправлять вам push-уведомления. Нажмите Разрешить (или любую эквивалентную фразу, которую использует ваш браузер/ОС). В консоли вы должны увидеть сообщение о том, был ли запрос принят или отклонен.

Подпишитесь на push-уведомления

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

  1. Добавьте следующий выделенный код в subscribeButtonHandler() : 
subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
  console.error('The user explicitly denied the permission request.');
  return;
}
if (result === 'granted') {
  console.info('The user accepted the permission request.');
}
const registration = await navigator.serviceWorker.getRegistration();
const subscribed = await registration.pushManager.getSubscription();
if (subscribed) {
  console.info('User is already subscribed.');
  notifyMeButton.disabled = false;
  unsubscribeButton.disabled = false;
  return;
}
const subscription = await registration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: urlB64ToUint8Array(VAPID_PUBLIC_KEY)
});
notifyMeButton.disabled = false;
fetch('/add-subscription', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(subscription)
});

Параметр userVisibleOnly должен иметь значение true . Возможно, когда-нибудь станет возможным отправлять сообщения без отображения видимых пользователю уведомлений ( тихие push- уведомления), но в настоящее время браузеры не поддерживают такую ​​возможность из-за проблем с конфиденциальностью.

Значение applicationServerKey опирается на служебную функцию, которая преобразует строку base64 в Uint8Array. Это значение используется для аутентификации между вашим сервером и службой push.

Отписаться от push-уведомлений

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

  1. Замените комментарий // TODO в unsubscribeButtonHandler() следующим кодом: 
// TODO
const registration = await navigator.serviceWorker.getRegistration();
const subscription = await registration.pushManager.getSubscription();
fetch('/remove-subscription', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({endpoint: subscription.endpoint})
});
const unsubscribed = await subscription.unsubscribe();
if (unsubscribed) {
  console.info('Successfully unsubscribed from push notifications.');
  unsubscribeButton.disabled = true;
  subscribeButton.disabled = false;
  notifyMeButton.disabled = true;
}

Получайте push-сообщение и отображайте его как уведомление

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

  1. Откройте public/service-worker.js и замените комментарий // TODO в обработчике событий push сервис-воркера следующим кодом: 
// TODO
let data = event.data.json();
const image = 'https://cdn.glitch.com/614286c9-b4fc-4303-a6a9-a4cef0601b74%2Flogo.png?v=1605150951230';
const options = {
  body: data.options.body,
  icon: image
}
self.registration.showNotification(
  data.title, 
  options
);
  1. Вернитесь на вкладку приложения.
  2. Нажмите Уведомить меня . Вы должны получить push-уведомление.
  3. Попробуйте открыть URL-адрес вкладки вашего приложения в других браузерах (или даже на других устройствах), пройти через рабочий процесс подписки, а затем нажать Уведомить всех . Вы должны получить одно и то же push-уведомление во всех браузерах, на которые вы подписаны. Вернитесь к Совместимости браузеров , чтобы увидеть список комбинаций браузера/ОС, которые, как известно, работают или не работают.

Вы можете настроить уведомление многими способами. Смотрите параметры ServiceWorkerRegistration.showNotification() чтобы узнать больше.

Открывать URL-адрес, когда пользователь нажимает на уведомление

В реальном мире вы, вероятно, будете использовать уведомление как способ повторно привлечь пользователя и побудить его посетить ваш сайт. Для этого вам нужно немного больше настроить своего service worker.

  1. Замените комментарий // TODO в обработчике событий notificationclick сервисного работника следующим кодом: 
// TODO
event.notification.close();
event.waitUntil(self.clients.openWindow('https://web.dev'));
  1. Вернитесь на вкладку приложения, отправьте себе еще одно уведомление, а затем щелкните уведомление. Ваш браузер должен открыть новую вкладку и загрузить https://web.dev .

Следующие шаги