получить и показать push-данные от serviceworker в chrome

Я использую pushwoosh для получения push-уведомлений в моем веб-приложении. все вещи работают хорошо и получили push-сообщение в слушателе serviceworker, но я хочу дать push messge данные от serviceworker и обработать их в другом классе js

Главная.js вот так: 

if ('serviceWorker' in navigator) {
  console.log('Service Worker is supported');
  navigator.serviceWorker.register('sw.js').then(function() {
    return navigator.serviceWorker.ready;
  }).then(function(reg) {
    console.log('Service Worker is ready :^)', reg);
      // TODO
  }).catch(function(error) {
    console.log('Service Worker error :^(', error);
  });
}

// get push message data in main.js and process it

Работник службы, как это: 

self.addEventListener('push', function(event) {
  console.log('Push message', event);

  var title = 'Push message';

  event.waitUntil(
    self.registration.showNotification(title, {
      'body': 'The Message',
      'icon': 'images/icon.png'
    }));
});
1 2
javascript service-worker

1 ответ:

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

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

Этот ответ показывает полный пример работника службы, разговаривающего с клиентами, но в основном:

  1. Страницы, которыми он управляет, прослушивают сообщения: 

    navigator.serviceWorker.addEventListener('message', event => {
    // use `event.data`
});

  2. Работник службы посылает к ним вот так: 

    self.clients.matchAll().then(all => all.forEach(client => {
    client.postMessage(/*...message here...*/);
}));

Или с ES5 и более ранним синтаксисом (но я не думаю, что какой-либо браузер, поддерживающий service workers, также не поддерживает функции стрелок):

Страница прослушивания: 

navigator.serviceWorker.addEventListener('message', function(event) {
    // use `event.data`
});

Отправка рабочего: 

self.clients.matchAll().then(function(all) {
    all.forEach(function(client) {
        client.postMessage(/*...message here...*/);
    });
});
3