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

Question

我使用 pushwoosh 在我的网络应用程序中接收推送通知。每件事都运行良好并在 serviceworker 侦听器中收到推送消息，但我想从 serviceworker 提供推送消息数据并在另一个 js 中处理它 class

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 在收到消息推送给它时向所有连接的客户端发送消息。

展示了服务人员与客户交谈的完整示例，但从根本上说：

它管理的页面监听消息：

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

service worker 像这样发送给他们：

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...*/);
    });
});

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

get and show push data from serviceworker in chrome

javascript

pushwoosh

service-worker