在 chrome 中获取并显示来自 serviceworker 的推送数据

Question

我使用 pushwoosh 在我的网络应用程序中接收推送通知。一切正常，并在 serviceworker 侦听器中收到推送消息，但我想从 serviceworker 提供推送消息数据并在另一个 js 类中处理它

main.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'
    }));
});

Answer 1

正如我在评论中提到的，对于服务工作者而不是标准工作者来说，这似乎是一个有点奇怪的用例，但是：

您可以让 Service Worker 在收到推送给它的消息时向所有连接的客户端发送消息。

这个答案显示了一个 Service Worker 与客户端交谈的完整示例，但从根本上说：

1. 它管理的页面监听消息：

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

2. Service Worker 像这样发送给他们：

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

或者使用 ES5 和更早的语法（但我认为任何支持 Service Worker 的浏览器都不支持箭头函数）：

页面聆听：

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

工人发送：

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