从 service worker 到 Angular 组件的 postMessage 对象

Question

如何将此有效负载对象传递给 Angular 4 组件？我读到了 postMessage 但它对我不起作用:(有人可以解释一下如何让它正常工作吗？

服务工作者：

messaging.setBackgroundMessageHandler((payload) => {
  const notificationOptions = {
    "body": data.body,
    "icon": "icon.png",
    "click_action": click_action
  };
  postMessage({'test'});
  return self.registration.showNotification(notificationTitle, notificationOptions);
});

组件：

export class AppComponent implements OnInit {

  constructor() {}
  ngOnInit() {
     navigator.serviceWorker.addEventListener('message', function(event) {
      console.log("Got reply from service worker: " + event.data);
   });
    self.addEventListener('message', event => { 
      console.log('MESSAGE: ',event.data); 
   });

  }
}

Answer 1

您的 Service Worker 代码中至少存在一个错误。你不能只是 postMessage 某处，你必须明确地 postMessage 一个特定的客户端。您必须首先查询受 Service Worker 控制的客户端，然后再 postMessage 其中一个。查看Client.postMesssage()的MDN文档。

另外，在您提供的组件代码中，您从一开始就没有注册 Service Worker。您只需为通过 postMessage API 发送的消息添加事件侦听器，但您不初始化/注册 Service Worker。我真的建议您阅读 serviceworke.rs 的优秀指南 :-)

Answer 2

更新：

您可以在这里查看演示：https://codesandbox.io/s/demo-angular-sw-xlpuq?file=/src/app/app.component.ts

原始答案：

这是我的工作代码 sn-p：

组件：

...
ngOnInit() {
  // Declair service worker variable in Angular Component
  const myServiceWorker = new Worker('path/to/sw.js');
  myServiceWorker.addEventListener('message', this.logWSPostMsg);
}

logWSPostMsg(message) {
  console.log('WS send to Component', message.data);
}
...

服务工作者 (sw.js)

...
self.postMessage(msg); // It will send msg to Component
...

---

如果你需要将一个对象从 SW 发送到组件，你可以这样调用：

self.postMessage({key: "value"});

如果需要从Component到SW的postMessage，在声明service worker变量myServiceWorker后，可以调用：

myServiceWorker.postMessage(msg); // <msg> type any

当然，sw.js 需要一个监听器：

self.onmessage = function (msg) {
  console.log('Component send to WS', msg.data);
}