从服务工作者到 Angular 组件的 postMessage 对象

Question

如何将此有效负载对象传递给角度 4 组件？我读过帖子消息，但它对我不起作用：（有人可以解释如何使其正常工作吗？

服务工作者：

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

服务工作进程代码中至少存在一个错误。你不能只是在某个地方发布消息，你必须明确地发布消息一个特定的客户端。您必须首先查询由服务工作进程控制的客户端，然后发布其中一个客户端的消息。查看 Client.postMesssage（） 的 MDN 文档。

此外，在您提供的组件代码中，您从一开始就不会注册服务工作进程。您只需为通过 postMessage API 发送的消息添加事件侦听器，但不初始化/注册服务辅助角色。我真的建议您浏览serviceworke.rs的优秀指南：-）

Answer 2

更新：

您可以在此处结帐演示： https://codesandbox.io/s/demo-angular-sw-xlpuq?file=/src/app/app.component.ts

原答案：

这是我的工作代码片段：

元件：

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

如果需要从组件到软件发布消息，在 declair 服务工作线程变量 myServiceWorker 后，可以调用：

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

当然，SW.js需要一个听众：

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