将消息从 Service Worker 发布到客户端页面

Question

今天我们可以找到许多从 service worker 向客户端发送消息的示例，但总是在 service worker 接收到 message 事件之后。

我想知道我们是否可以独立于此事件发送消息？如果是，怎么办？我尝试了一些东西，但没有成功...

在我的例子中，它用于在我的服务人员收到 push 事件时将客户端重定向到新页面。

Answer 1

Client.postMessage() is described at https://github.com/slightlyoff/ServiceWorker/issues/609 的界面。不幸的是，从第 45 版开始，它在 Google Chrome 中还没有完全实现，不过我希望它能在以后的某个版本中实现。

当该功能可用时，您可以使用 self.clients.matchAll() 获取由 service worker 控制的任何打开页面的列表，并在您指定的特定客户端上调用 postMessage() 方法关心。您需要记住，完全有可能不会打开任何由您的服务工作者控制的页面的选项卡，在这种情况下，您想要做一些事情，比如用您的目标 [=28 打开一个新的客户端页面=].

但是，有一种方法可能更适合您的用例（尽管目前在 Chrome 45 中也不支持）：WindowClient.navigate()，它将指示由您的服务工作者控制的打开选项卡导航到同一来源的不同 URL。

Answer 2

client.js :

const swListener = new BroadcastChannel('swListener');
swListener.onmessage = function(e) {
  console.log('swListener Received', e.data);
};

服务-worker.js

  const swListener = new BroadcastChannel('swListener');
   swListener.postMessage('This is From SW');

将消息从 Service Worker 发布到客户端页面

Posting messages from a service worker to a client page

javascript

service-worker