Уведомления в браузере (Web Push)
Минимальный набор действий для получения браузерных уведомлений (Web Push) состоит из создания и регистрации service worker и подписки на уведомления.

Простейший service worker – это скрипт, обрабатывающий события push и pushsubscriptionchange:
self.addEventListener('push', function(event) {
  var title = event.data ? event.data.text() : 'Yay a message.';
  var body = 'We have received a push message.';
  var icon = '/images/icon.png';
  var tag = 'simple-push-demo-notification-tag';
  event.waitUntil(
    self.registration.showNotification(title, {
      body: body,
      icon: icon,
      tag: tag
    })
  );
});

self.addEventListener('pushsubscriptionchange', function() {
  // Обновить подписку на сервере.
});

Зарегистрируйте service worker следующим образом:
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js');
} else {
  // Браузер не поддерживает service worker.
}


Для подписки проверьте поддержку необходимых механизмов, запросите разрешения (автоматически при попытке подписаться) и предоставьте ключ vapid (можно получить запросом /v2/vapid_key и для поддержки в большинстве браузеров преобразовать в массив):
if ('showNotification' in ServiceWorkerRegistration.prototype && 'PushManager' in window) {
  navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
    vapidPublicKey = ...;
    serviceWorkerRegistration.pushManager.subscribe({userVisibleOnly: true, applicationServerKey: vapidPublicKey})
    .then(function(subscription) {
      // Отправить подписку на сервер, который вызовет /v2/subscribe/webpush
    })
    .catch(function(e) {
      if (Notification.permission === 'denied') {
        // Пользователь запретил уведомления.
      } else {
        // Произошла ошибка.
      }
    });
  });
} else {
  // Не поддерживается.
}


Дополнительно