从服务工作者向客户端页面发布消息

Question

今天我们可以找到许多示例，从服务工作者向客户端发送消息，但始终遵循服务工作者中的message事件接收。

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

在我的情况下，这是为了在我的服务工作者接收到push事件时将客户端重定向到新页面。

- Mathieu Le Bihan

Answer 1

client.js：

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

service-worker.js

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

- Haytham Tomeh

Answer 2

Client.postMessage()的接口在https://github.com/slightlyoff/ServiceWorker/issues/609中有描述。不幸的是，截至版本45，Google Chrome没有完全实现该功能，但我期望它会在以后的版本中实现。

当该功能可用时，您可以使用self.clients.matchAll()获取由service worker控制的任何打开的页面列表，并在您关心的特定客户端上调用postMessage()方法。您需要记住，完全有可能没有任何选项卡打开，其中包含由您的service worker控制的页面，在这种情况下，您将要做的是打开一个新的客户端页面，其中包含您的目标URL。

但是，这里有一个方法可能更适合您的用例（尽管目前在Chrome 45中也不支持）：{{link1：WindowClient.navigate()}}，它将指示由您的Service Worker控制的打开选项卡导航到相同源的不同URL。

- Jeff Posnick