如何将消息从服​​务工作者发送到Workbox类实例的“消息”事件？

Question

我在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即可工作。

Answer 1

您应该能够使用以下内容将消息从服​​务工作者发送至所有define（即，您的网络应用的一个或多个实例，可能会在多个选项卡中打开）：

WindowClient

对const clients = await self.clients.matchAll({type: 'window'}); for (const client of clients) { client.postMessage({...}); } 的调用应触发通过client.postMessage({...})注册的Web应用程序中的处理程序。