广播频道 API 更简单

Question

我尝试在WebApp和相应的ServiceWorker之间postMessage。 serviceWoker目前已成功注册并正常工作不幸的是我发现了一些奇怪的行为：
1. navigator.serviceWorker.controller始终为null 2.在serviceWorker端，我以这种方式实现了postMessage：

self.addEventListener('message', function (evt) {
console.log('postMessage received', evt);
});

不幸的是发回原点的重要字段 evt.origin =“”和evt.source = null不包含所需的值。但我总是收到发送的evt.data。

你知道怎么回帖吗？

非常感谢！岸堤

Answer 1

将工作人员的响应发送回受控应用程序的一种方法显示在this demo中，并按以下方式完成（我还没有对此进行过测试，但该演示效果很好，而且代码似乎与规范一致。）

在主页面中：

function sendMessage(message) {
  // This wraps the message posting/response in a promise, which will
  // resolve if the response doesn't contain an error, and reject with
  // the error if it does. If you'd prefer, it's possible to call
  // controller.postMessage() and set up the onmessage handler
  // independently of a promise, but this is a convenient wrapper.
  return new Promise(function(resolve, reject) {
    var messageChannel = new MessageChannel();
    messageChannel.port1.onmessage = function(event) {
      if (event.data.error) {
        reject(event.data.error);
      } else {
        resolve(event.data);
      }
    };

    // This sends the message data as well as transferring
    // messageChannel.port2 to the service worker.
    // The service worker can then use the transferred port to reply
    // via postMessage(), which will in turn trigger the onmessage
    // handler on messageChannel.port1.
    // See
    // https://html.spec.whatwg.org/multipage/workers.html#dom-worker-postmessage
    navigator.serviceWorker.controller.postMessage(message, [messageChannel.port2]);
  });
}

在服务工作者代码中：

self.addEventListener('message', function(event) {
  event.ports[0].postMessage({'test': 'This is my response.'});
});

然后，您应该能够使用sendMessage函数返回的承诺，通过来自服务工作者的响应来执行您想要的任务。

Answer 2

@GalBracha问你是否可以在没有先发送消息的情况下与客户沟通 - 是的！这是一个快速示例，说明当我想在收到推送通知时向客户发送消息时（不是当用户点击通知，而是当服务工作人员收到事件时）我是如何做到的：

在您的客户端js中（在服务工作者注册后等）：

// find the client(s) you want to send messages to:
self.clients.matchAll(/* search options */).then( (clients) => {
    if (clients && clients.length) {
        // you need to decide which clients you want to send the message to..
        const client = clients[0];
        client.postMessage("your message");
    }

在您的服务工作者中，以响应某些事件（可能是安装事件）：

{{1}}

技巧（显然是？）将消息事件的监听器附加到serviceWorker对象，而不是窗口对象。

Answer 3

广播频道 API 更简单

与 Broadcast Channel API 相比，使用 other methods 在 Service Worker 与其客户端之间来回发送信息要容易得多。

广播的工作原理

在 Service Worker 和客户端中定义一个新的广播频道。

const channel4Broadcast = new BroadcastChannel('channel4');

要在工作程序或客户端中发送广播消息：

channel4Broadcast.postMessage({key: value});

要在工作程序或客户端接收广播消息：

channel4Broadcast.onmessage = (event) => {
    value = event.data.key;
}

广播还允许在客户端的网络工作者、客户端和服务工作者之间发送消息。

警告

不过，这种简单性是有代价的。按照目前的情况，the service worker will not wake up 接收广播消息。因此，它仅在 Service Worker 处于运行（活动或等待）状态时才起作用；即当客户端可见时。尽管如此，这可能仍然有用，例如广播版本号或网络推送等。

Chrome ServiceWorker postMessage

3 个答案:

广播频道 API 更简单

广播的工作原理

警告