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

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

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

  • Отслеживает подписки на push-уведомления (т. е. сервер создает новую запись в базе данных, когда клиент соглашается на push-уведомления, и удаляет существующую запись в базе данных, когда клиент отказывается от них)
  • Отправляет push-уведомление одному клиенту
  • Отправляет push-уведомление всем подписанным клиентам

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

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

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

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

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

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

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

  • macOS: Brave, Edge, Safari
  • iOS

Стек приложений

  • Сервер построен на основе Express.js .
  • Библиотека web-push Node.js обрабатывает всю логику push-уведомлений.
  • Данные подписки записываются в файл JSON с использованием lowdb .

Вам не обязательно использовать какие-либо из этих технологий для внедрения push-уведомлений. Мы выбрали эти технологии, потому что они обеспечивают надежный опыт кодовой лаборатории.

Настраивать

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

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

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

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

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

  1. Откройте терминал Glitch, нажав «Инструменты» , а затем нажав «Терминал» .
  2. В терминале запустите npx web-push generate-vapid-keys . Скопируйте значения закрытого и открытого ключей.
  3. Откройте .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.
  1. Откройте public/index.js .
  2. Замените VAPID_PUBLIC_KEY_VALUE_HERE на значение вашего открытого ключа.

Управление подписками

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

Сохранить новую информацию о подписке

  1. Для предварительного просмотра сайта нажмите View App . Затем нажмите Fullscreen полноэкранный .
  1. Нажмите Register service worker на вкладке приложения. В поле статуса вы должны увидеть сообщение, похожее на это: 
Service worker registered. Scope: https://desert-cactus-sunset.glitch.me/
  1. На вкладке приложения нажмите Подписаться на push . Ваш браузер или операционная система, вероятно, спросят вас, хотите ли вы разрешить веб-сайту отправлять вам push-уведомления. Нажмите Разрешить (или любую эквивалентную фразу, которую использует ваш браузер/ОС). В поле статуса вы должны увидеть сообщение, похожее на это: 
Service worker subscribed to push.  Endpoint: https://fcm.googleapis.com/fcm/send/…
  1. Вернитесь к своему коду, нажав «Просмотреть исходный код» в пользовательском интерфейсе Glitch.
  2. Откройте Glitch Logs, нажав Tools , а затем Logs . Вы должны увидеть /add-subscription за которым следуют некоторые данные. /add-subscription — это URL, на который клиент отправляет запрос POST , когда хочет подписаться на push-уведомления. Следующие данные — это информация о подписке клиента, которую вам нужно сохранить.
  3. Откройте server.js .
  4. Обновите логику обработчика маршрута /add-subscription с помощью следующего кода: 
app.post('/add-subscription', (request, response) => {
  console.log('/add-subscription');
  console.log(request.body);
  console.log(`Subscribing ${request.body.endpoint}`);
  db.get('subscriptions')
    .push(request.body)
    .write();
  response.sendStatus(200);
});

Удалить старую информацию о подписке

  1. Вернитесь на вкладку приложения.
  2. Нажмите «Отписаться от push-уведомлений» .
  3. Посмотрите на Glitch Logs еще раз. Вы должны увидеть /remove-subscription за которым следует информация о подписке клиента.
  4. Обновите логику обработчика маршрута /remove-subscription с помощью следующего кода: 
app.post('/remove-subscription', (request, response) => {
  console.log('/remove-subscription');
  console.log(request.body);
  console.log(`Unsubscribing ${request.body.endpoint}`);
  db.get('subscriptions')
    .remove({endpoint: request.body.endpoint})
    .write();
  response.sendStatus(200);
});

Отправлять уведомления

Как объясняется в разделе Отправка push-сообщения , ваш сервер на самом деле не отправляет push-сообщения напрямую клиентам. Вместо этого он полагается на push-сервис для этого. Ваш сервер в основном просто запускает процесс push-сообщений клиентам, отправляя запросы веб-сервиса (запросы протокола web push) к веб-сервису (push-сервису), принадлежащему поставщику браузера, который использует ваш пользователь.

  1. Обновите логику обработчика маршрута /notify-me с помощью следующего кода: 
app.post('/notify-me', (request, response) => {
  console.log('/notify-me');
  console.log(request.body);
  console.log(`Notifying ${request.body.endpoint}`);
  const subscription = 
      db.get('subscriptions').find({endpoint: request.body.endpoint}).value();
  sendNotifications([subscription]);
  response.sendStatus(200);
});
  1. Обновите функцию sendNotifications() следующим кодом: 
function sendNotifications(subscriptions) {
  // TODO
  // Create the notification content.
  const notification = JSON.stringify({
    title: "Hello, Notifications!",
    options: {
      body: `ID: ${Math.floor(Math.random() * 100)}`
    }
  });
  // Customize how the push service should attempt to deliver the push message.
  // And provide authentication information.
  const options = {
    TTL: 10000,
    vapidDetails: vapidDetails
  };
  // Send a push message to each client specified in the subscriptions array.
  subscriptions.forEach(subscription => {
    const endpoint = subscription.endpoint;
    const id = endpoint.substr((endpoint.length - 8), endpoint.length);
    webpush.sendNotification(subscription, notification, options)
      .then(result => {
        console.log(`Endpoint ID: ${id}`);
        console.log(`Result: ${result.statusCode}`);
      })
      .catch(error => {
        console.log(`Endpoint ID: ${id}`);
        console.log(`Error: ${error} `);
      });
  });
}
  1. Обновите логику обработчика маршрута /notify-all с помощью следующего кода: 
app.post('/notify-all', (request, response) => {
  console.log('/notify-all');
  response.sendStatus(200);
  console.log('Notifying all subscribers');
  const subscriptions =
      db.get('subscriptions').cloneDeep().value();
  if (subscriptions.length > 0) {
    sendNotifications(subscriptions);
    response.sendStatus(200);
  } else {
    response.sendStatus(409);
  }
});
  1. Вернитесь на вкладку приложения.
  2. Нажмите Unsubscribe from push , а затем нажмите Subscribe to push снова. Это необходимо только потому, что, как упоминалось ранее, Glitch перезапускает проект каждый раз, когда вы редактируете код, а проект настроен на удаление базы данных при запуске.
  3. Нажмите Notify me . Вы должны получить push-уведомление. Заголовок должен быть Hello, Notifications! а тело должно быть ID: <ID> , где <ID> — случайное число.
  4. Откройте свое приложение в других браузерах или на других устройствах и попробуйте подписать их на push-уведомления, а затем нажмите кнопку Notify all . Вы должны получить одно и то же уведомление на всех подписанных устройствах (т. е. идентификатор в тексте push-уведомления должен быть одинаковым).

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

  • Прочитайте обзор push-уведомлений для более глубокого концептуального понимания того, как работают push-уведомления.
  • Ознакомьтесь с практической работой: Создание клиента push-уведомлений, чтобы узнать, как создать клиент, который запрашивает разрешение на получение уведомлений, подписывает устройство на получение push-уведомлений и использует Service Worker для получения push-сообщений и отображения сообщений в виде уведомлений.