Workbox 和 Preact 都与这个问题没有太大关系。Workbox 允许您在 Service Worker 中使用您想要的任何其他代码，而 Preact 也应该适用于您的客户端应用程序。）

此示例页面演示了使用 来从客户端页面向服务工作人员发送消息，然后进行响应MessageChannel。客户端页面上使用的相关帮助程序代码如下所示：

function sendMessage(message) {
  return new Promise(function(resolve, reject) {
    const messageChannel = new MessageChannel();
    messageChannel.port1.

问题:

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

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'})
     })