пример Embedded fallback - Жизненный цикл service worker для использования

// Ключевое отличие по сравнению с Push Payload именно в использовании
// Notitfication API в SW

self.addEventListener('push', function(event) {
  var payload = event.data 
    // У нас все-таки волшебный мир с фантастическими тварями, поэтому
    // try.. catch мы не ставим ¯\_(ツ)_/¯
    ? JSON.parse(event.data)
    : {
      name: 'Expecto patronum!',
      icon: 'buck.jpg',
      locale: 'en'
    };
  
  event.waitUntil(
    // Показываем уведомление с заголовком и телом сообщения.
    // Устанавливаем иные параметры:
    // * язык
    // * шаблон вибрации
    // * изображение
    // имеется очень много параметров, о которых вы можете узнать тут
    // https://notifications.spec.whatwg.org/
    self.registration.showNotification('Summoning spell', {
      lang: payload.locale,
      body: payload.name,
      icon: payload.icon,
      vibrate: [500, 100, 500],
    })
  );
});

var num = 1;

self.addEventListener('push', function(event) {
  event.waitUntil(
    // Показываем уведомление с заголовком и телом сообщения.
    // Число, которое увеличивается для каждого полученного уведомления.
    // Поле тега позволяет заменить старое уведомление на новое 
    // (уведомление с тем же тегом другого заменит его)
    self.registration.showNotification('Attacking Spell', {
      body: ++num > 1 ? 'Bombarda Maxima' : 'Bombarda',
      tag: 'spell',
    })
  );
});

self.addEventListener('install', function(event) {
  event.waitUntil(self.skipWaiting());
});

self.addEventListener('activate', function(event) {
  event.waitUntil(self.clients.claim());
});

self.addEventListener('push', function(event) {
  event.waitUntil(
    // Получить список клиентов для SW
    self.clients.matchAll().then(function(clientList) {
          // Проверяем, есть ли хотя бы один сфокусированный клиент.
      var focused = clientList.some(function(client) {
        return client.focused;
      });

      var notificationMessage;
      if (focused) {
        notificationMessage = 'Imperio! You\'re still here, thanks!';
      } else if (clientList.length > 0) {
        notificationMessage = 'Imperio! You haven\'t closed the page, ' +
                              'click here to focus it!';
      } else {
        notificationMessage = 'Imperio! You have closed the page, ' +
                              'click here to re-open it!';
      }
      // Показывать уведомление с заголовком «Unforgiveable Curses»
      // и телом в зависимости от состоянию клиентов SW
      // (три разных тела: 
      // * 1, страница сфокусирована;
      // * 2, страница по-прежнему открыта, но не сфокусирована;
      // * 3, страница закрыта).
      return self.registration.showNotification('Unforgiveable Curses', {
        body: notificationMessage,
      });
    })
  );
});

// Регистрируем обработчик события 'notificationclick'.
self.addEventListener('notificationclick', function(event) {
  event.waitUntil(
    // Получаем список клиентов SW.
    self.clients.matchAll().then(function(clientList) {
      // Если есть хотя бы один клиент, фокусируем его.
      if (clientList.length > 0) {
        return clientList[0].focus();
      }
      // В противном случае открываем новую страницу.
      return self.clients.openWindow('our/url/page');
    })
  );
});

// Для простоты будем использовать кнопку. 
// На боевой версии лучше использовать события.
var subscriptionButton = document.getElementById('subscriptionButton');

// Поскольку объект подписки требуется в нескольких местах, давайте создадим метод,
// который возвращает Promise.
function getSubscription() {
  return navigator.serviceWorker.ready
    .then(function(registration) {
      return registration.pushManager.getSubscription();
    });
}

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('service-worker.js')
    .then(function() {
      console.log('SW registered');
      subscriptionButton.removeAttribute('disabled');
    });
  getSubscription()
    .then(function(subscription) {
      if (subscription) {
        console.log('Already invaded', subscription.endpoint);
        setUnsubscribeButton();
      } else {
        setSubscribeButton();
      }
    });
}

// Получить «registration» от SW и создать новую
// подписку с помощью `registration.pushManager.subscribe`.
// Затем зарегистрировать новую подписку, отправив POST-запрос.
function subscribe() {
  navigator.serviceWorker.ready.then(function(registration) {
    return registration.pushManager.subscribe({ userVisibleOnly: true });
  }).then(function(subscription) {
    console.log('Legilimens!', subscription.endpoint);
    return fetch('register', {
      method: 'post',
      headers: {
        'Content-type': 'application/json'
      },
      body: JSON.stringify({
        endpoint: subscription.endpoint
      })
    });
  }).then(setUnsubscribeButton);
}

// Получить существующую подписку от SW,
// отменить подписку (`subscription.unsubscribe ()`) и 
// отменить регистрацию на сервере с помощью POST-запроса 
// для прекращения отправки push-сообщений.
function unsubscribe() {
  getSubscription().then(function(subscription) {
    return subscription.unsubscribe()
      .then(function() {
        console.log('Unsubscribed', subscription.endpoint);
        return fetch('unregister', {
          method: 'post',
          headers: {
            'Content-type': 'application/json'
          },
          body: JSON.stringify({
            endpoint: subscription.endpoint
          })
        });
      });
  }).then(setSubscribeButton);
}

// Для демонстрации (или тренировок). Изменяем текст кнопки.
function setSubscribeButton() {
  subscriptionButton.onclick = subscribe;
  subscriptionButton.textContent = 'Open mind!';
}

function setUnsubscribeButton() {
  subscriptionButton.onclick = unsubscribe;
  subscriptionButton.textContent = 'Protego!';
}

// Слушаем событие 'push'.
self.addEventListener('push', function(event) {
  event.waitUntil(self.registration.showNotification('Your mind', {
    body: 'Wizard invaded to your mind!'
  }));
});

// Слушаем событие 'pushsubscriptionchange', которое запускается,
// когда истекает срок подписки. 
// Подписываемся снова и регистрируем новую подписку на сервере,
// отправив POST-запрос.
// На боевом приложении скорее всего будет использоваться ID или token
// для идентификации пользователя.
self.addEventListener('pushsubscriptionchange', function(event) {
  console.log('Spell expired');
  event.waitUntil(
    self.registration.pushManager.subscribe({ userVisibleOnly: true })
    .then(function(subscription) {
      console.log('Another invade! Legilimens!', subscription.endpoint);
      return fetch('register', {
        method: 'post',
        headers: {
          'Content-type': 'application/json'
        },
        body: JSON.stringify({
          endpoint: subscription.endpoint
        })
      });
    })
  );
});

var webPush = require('web-push');
var subscriptions = [];
var pushInterval = 10;

webPush.setGCMAPIKey(process.env.GCM_API_KEY || null);

// Отправляем уведомление push-сервису. 
// Удаляем подписку из общего массива `subscriptions`,
// если push-сервис отвечает на ошибку или подписка отменена или истекла.
function sendNotification(endpoint) {
  webPush.sendNotification({
    endpoint: endpoint
  }).then(function() {
  }).catch(function() {
    subscriptions.splice(subscriptions.indexOf(endpoint), 1);
  });
}

// В реальных условиях приложение отправляет уведовление только в случае
// возникновения события.
// Чтобы имитировать его, сервер отправляет уведомление каждые `pushInterval` секунд
// каждому подписчику
setInterval(function() {
  subscriptions.forEach(sendNotification);
}, pushInterval * 1000);

function isSubscribed(endpoint) {
  return (subscriptions.indexOf(endpoint) >= 0);
}

module.exports = function(app, route) {
  app.post(route + 'register', function(req, res) {
    var endpoint = req.body.endpoint;
    if (!isSubscribed(endpoint)) {
      console.log('We invaded into mind ' + endpoint);
      subscriptions.push(endpoint);
    }
    res.type('js').send('{"success":true}');
  });

  // Unregister a subscription by removing it from the `subscriptions` array
  app.post(route + 'unregister', function(req, res) {
    var endpoint = req.body.endpoint;
    if (isSubscribed(endpoint)) {
      console.log('It was counterspell from ' + endpoint);
      subscriptions.splice(subscriptions.indexOf(endpoint), 1);
    }
    res.type('js').send('{"success":true}');
  });
};