如何从服务工作者向 Workbox 类实例的“消息”事件发送消息？答案

【问题标题】：How to send a message from service worker to a Workbox class instance's "message" event?如何从服务工作者向 Workbox 类实例的“消息”事件发送消息？
【发布时间】：2019-09-24 04:49:00
【问题描述】：

我的 window.js 中有这个...

const wb = new Workbox('sw.js');

wb.messageSW({type:'START'});

wb.addEventListener('message', e=>{
   console.log(e);
});

...在我的 sw.js 中，我有...

self.addEventListener('message', (e)=>{
   if (e.data) {
       switch(e.data.type) {
           case 'START':
               //do some processing here...
               //...then how do I send a message to the client here so...
               //...that it will be received by the wb.addEventListener('message',... in window.js?
           break;
       }
   }
});

我尝试通过 e.ports[0] 中的 MessagePort.postMessage() 发送，但没有成功。我觉得这是基本的东西，尤其是在使用 Workbox 类时，但我就是无法让它工作。

我最后的手段是使用 BroadcastChannel（带有 polyfill），但我先尝试这个，因为它可能不需要任何 polyfill 才能工作。

【问题讨论】：

标签： workbox workbox-window

【解决方案1】：

您应该能够使用以下内容从服务人员向所有WindowClients 发送消息（即您的网络应用程序的一个或多个实例，在可能的多个选项卡中打开）：

const clients = await self.clients.matchAll({type: 'window'});
for (const client of clients) {
  client.postMessage({...});
}

对client.postMessage({...}) 的调用应该会触发您的网络应用程序中通过wb.addEventListener('message', ...) 注册的处理程序。

【讨论】：