在 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

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

您可以让您的服务工作者在收到推送给它的消息时向所有连接的客户端发送消息。

This answer 展示了一个服务工作者与客户交谈的完整示例，但从根本上讲：

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 和更早的语法（但我认为任何支持服务工作者的浏览器都不支持箭头功能）：

页面监听：

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

工人发送：

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