服务人员与客户沟通

Question

我一直在尝试从服务工作者向客户发送消息但是如果我使用的话

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

即使我在浏览器中打开了一个标签,它也不会发送给任何客户端,但是如果我从客户端向服务工作者发送消息

// 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吗？

Answer 1

我不相信clients.fetchAll()存在.你可能意味着clients.matchAll(),它应该给你你描述的行为:

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

允许服务工作者与客户端通信,同时避免必须逐个发送消息的更好的替代方案是使用广播信道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);
});

Answer 2

添加includeUncontrolled选项应该这样做：

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