Начало работы с Web Push-уведомлениями

Автор оригинала: Alex Rudenko.

Я слышал о Web Push-уведомлений и обслуживающих работниках много раз, но я никогда не реализовал их до прошлой недели для Только комментарии Отказ Поэтому я решил поделиться своими заметками об этой технологии.

Прежде всего, существует множество статей и полезной документации о уведомлениях Web Push, поэтому я не буду добавлять что-то новое для него. Я постараюсь обобщить то, что я чувствую, нужно быстро понимать и знать, чтобы начать быстро и реализовать базовую версию уведомлений Web Push.

Начнем с некоторых ключевых фактов:

# 1 push-уведомления полагаются на множественные отдельные apis браузера

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

# 2 Не все браузеры поддерживают push-уведомления (пока)

В настоящее время, IE && Opera Mini не поддерживает обслуживание работников и Нажмите API И, дополнительно, iOS Safari, Chrome для Android, Samsung Browser и Browser UC для Android не поддерживают Веб-уведомления API Отказ

Это означает, что вам нужно обнаружить, поддерживает ли браузер требуемый API или не при внедрении push-уведомлений.

Большая диаграмма того, как это работает

Я создал простую диаграмму, чтобы обернуть голову вокруг разных API и концепций. Он соединяет различные части через последовательность действий/отношений между ними.

Таким образом, все начинается с некоторого кода JavaScript на вашей веб-странице, которые регистрируются (1) обслуживающий работник. Сервисский работник предоставляет (2) объект регистрации обслуживания работника, который, в свою очередь, дает доступ (3) к экземпляру Push-менеджера. Push-менеджер может предоставить (4) нам подписку Push, если пользователь позволяет. Этот объект подписки может быть отправлен на ваш бэкэн (5). На сервере вы можете использовать подписку для отправки сообщения (6) в браузер пользователя. Сервисный работник получает (7) сообщение, но он не отображается автоматически пользователю. Сервисский работник разрабатывает сообщение и может решить, что с этим делать. Обычно работник отображает уведомление (8) с использованием API уведомлений.

Кодирующая часть

Как я уже упоминал в ключевых фактах, не все браузеры поддерживают API, поэтому нам нужно проверить, поддерживает ли работу работников браузеров пользователя:

function supportsPushNotifications() {
  return 'serviceWorker' in navigator && 'PushManager' in window;
}

supportsPushNotifications() === true // if the browser supports needed APIs

После того, как мы проверяем, мы можем использовать сервисных работников, мы можем начать с первого шага и зарегистрировать сервисного работника:

navigator
  .serviceWorker
  .register('/sw.js')
  .then(swRegistration => {
    // TODO step 2 & 3 here
  })
  .catch(err => {
    console.log('serviceWorker.register failed', err);
  });

Этот код извлекает SW.JS в корне вашего сайта. Регистрация Функция возвращает обещание. Поэтому мы обращаемся к этому с .then Для успешного случая и .catch Если что-то пойдет не так.

Теперь мы можем реализовать шаг 2 и 3, который требует Свергистрация :

const applicationServerKey = '';
swRegistration
  .pushManager
  .getSubscription()
  .then(subscription => {
    const isSubscribed = !(subscription === null);
    if (!isSubscribed) {
      return swRegistration.pushManager
        .subscribe({
          userVisibleOnly: true,
          applicationServerKey,
        })
        .then(sendSubscriptionToServer);
    }
    sendSubscriptionToServer(subscription);
  })
  .catch(err => {
    console.log('getSubscription failed', err);
  });

Не беспокойтесь о Приложениеерверки пока что. Приложениеерверки Позволяет связать подписку на ваш сервер. Я объясню, как получить этот ключ позже.

Так что здесь происходит: мы называем pushmanager.getsubscription Метод, который возвращает подписку, если пользователь уже позволил Push-уведомления и null иначе. Если у нас уже есть подписка, мы можем отправить его на бэкэнду. Если нет, мы называем pushmanager.subscribe попросить пользователя разрешить push-уведомления.

Теперь для шага 5 вы можете использовать любой метод, который вам нравится отправлять объект подписки на ваш сервер. Я рекомендую сначала строчить его с Json.stringify (подписка) Отказ

Для отправки сообщения с вашего сервера на клиент я рекомендую использовать Web-push Модуль:

const webpush = require('web-push');

const vapidKeys = {
  publicKey: '',
  privateKey: '',
};

webpush.setVapidDetails(
  'mailto:your@email',
  vapidKeys.publicKey,
  vapidKeys.privateKey
);

webpush.sendNotification(
  JSON.parse(subscription),
  JSON.stringify({
    title: 'Title',
    icon: 'https://your-site.com/assets/push-icon.png',
    body: 'Body',
    url: 'https://your-site.com/url-to-open',
  })
)

А теперь в шагах 7 и 8, мы обратно обратно в SW.JS , сервисный рабочий код, отвечающий за получение и отображение нажимающего сообщения:

self.addEventListener('push', function(event) {
  const message = JSON.parse(event.data.text());
  const title = message.title;
  const url = message.url;
  const options = {
    body: message.body,
    icon: message.icon,
    badge: message.badge,
    data: url,
  };
  event.waitUntil(self.registration.showNotification(title, options));
});

self.addEventListener('notificationclick', function(event) {
  event.notification.close();
  event.waitUntil(clients.openWindow(event.notification.data));
});

Здесь определены два слушателя событий. С толчок Слушатель, мы разбираем сообщение и вызови Образчение Способ отображения уведомления. На NotificationClick Мы закрываем уведомление и перейдите к URL-адресу, отправленном через Push-сообщение.

Генерация клавиш

Вы можете использовать Web-push Библиотека для генерации ключей. Ключевое поколение должно быть сделано один раз. Как интерфейс, так и бэкэнда используют один и тот же открытый ключ, и бэкэнд использует только закрытый ключ:

const webpush = require('web-push');
const vapidKeys = webpush.generateVAPIDKeys();
console.log(vapidKeys);

Вы должны указать ключи в предыдущих фрагментах кода, где это необходимо.

Заключение

Я нахожу API для Push-уведомлений, чтобы быть довольно простым и простым. Тем не менее, вначале требуется совсем некоторое время, чтобы обернуть голову вокруг всех концепций и движущихся частей.

Я надеюсь, что вы найдете эти заметки полезными, и вы вернетесь к ним, как только вам нужно будет реализовать push-уведомления. И если на этот раз наступает, пожалуйста, не просим разрешения, как только нагрузка веб-страницы: это раздражает, и большинство людей блокируют его.

Спасибо за прочтение!