服务工作者与客户沟通答案

【问题标题】：Service worker communicate to clients服务工作者与客户沟通
【发布时间】：2022-01-06 02:58:08
【问题描述】：

我一直在尝试从服务人员向客户发送消息，但如果我使用

self.clients.matchAll()
.then((clients) => {
  clients.forEach(function(client) {
    client.postMessage({msg: 'Hello from SW'})
  })
})

即使我在浏览器中打开了一个标签，它也不会发送给任何客户端，但是如果我从 客户端 向 service worker 发送消息/p>

// client
navigator.serviceWorker.controller.postMessage({title: 'Send message from client'})

在服务人员中

self.addEventListener('message', function(event) {
  self.clients.fetchAll()
    .then((clients) => {
      clients.forEach(function(client) {
        client.postMessage({msg: 'Hello from SW'})
     })
  })
})

它可以发送消息并找到客户。我做错了什么？，我应该改用 indexedDB 吗？

【问题讨论】：

标签： client service-worker

【解决方案1】：

我不相信clients.fetchAll() 存在。你的意思可能是clients.matchAll()，它应该会给你你描述的行为：

self.clients.matchAll().then(clients => {
    clients.forEach(client => client.postMessage({msg: 'Hello from SW'}));
})

一个更好的替代方法是让服务工作者与客户端通信，同时避免一个接一个地发送消息，是make use of the Broadcast Channel API。现在，最新版本的 Chrome 和 Firefox 都支持它。

// From service-worker.js:
const channel = new BroadcastChannel('sw-messages');
channel.postMessage({title: 'Hello from SW'});

// From your client pages:
const channel = new BroadcastChannel('sw-messages');
channel.addEventListener('message', event => {
    console.log('Received', event.data);
});

【讨论】：

self.clients.matchAll 是对的，我用过，广播频道的 API 非常好用。谢谢。
感谢人 BroadcastChannel 为我工作，但是当我们在做 client.postMessage 时，我们应该能够使用下面的代码在页面中捕获响应？navigator.serviceWorker.addEventListener('message', function(event ) { console.log('收到来自 service worker 的消息：', event.data); });为什么这段代码不起作用？
@3bu1 你能在评论中找到问题的答案吗？
我也用过。但我只是想知道你是否曾经让 client.postMessage 工作
BroadcastChannel 在 Safari 中不起作用 :( 我有 v14

【解决方案2】：

添加includeUncontrolled 选项应该可以：

for (const client of await clients.matchAll({includeUncontrolled: true, type: 'window'})) {
  client.postMessage(message);
}

【讨论】：