10

我尝试postMessage在 Web 应用程序和相应的服务人员之间进行切换。服务工作者已成功注册并工作至今。不幸的是，我注意到一些奇怪的行为：

  1. navigator.serviceWorker.controller总是null。_
  2. 在服务人员方面，我实现postMessage如下：
self.addEventListener('message', function (evt) {
    console.log('postMessage received', evt);
});

不幸的是，要回发到原点的重要字段evt.origin=''不evt.source=null包含所需的值。尽管如此，我总是收到发送的evt.data.

你知道怎么回帖吗？

非常感谢！
和我

4

3 回答 3

19

此演示中显示了将工作人员的响应发送回受控应用程序的一种方法，并按以下方式完成（我还没有实际测试过，但演示运行良好，代码似乎与规范一致） .

在主页中：

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函数返回的承诺，对来自服务工作者的响应执行您想要的操作。

于 2015-05-13T22:15:17.033 回答
8

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

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

// navigator.serviceWorker.addEventListener('message', ... ) should work too
navigator.serviceWorker.onmessage = function (e) {
    // messages from service worker.
    console.log('e.data', e.data);
};

在您的服务人员中，响应某些事件（可能是安装事件）：

// 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");
    }

诀窍是（显然？）将消息事件的侦听器附加到 serviceWorker 对象，而不是 window 对象。

于 2017-03-22T23:29:49.910 回答
4

广播频道 API 更简单

与其他方法相比，使用广播通道 API在服务工作者和它的客户端之间来回发送信息要容易得多。

这是广播的工作原理

在服务工作者和客户端中定义一个新的广播频道。

const channel4Broadcast = new BroadcastChannel('channel4');

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

channel4Broadcast.postMessage({key: value});

要在工作人员或客户端中接收广播消息：

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

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

警告

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

于 2021-03-24T16:26:02.517 回答