Chrome ServiceWorker的postMessage [英] Chrome ServiceWorker postMessage

问题描述

我尝试在WebApp和相应的ServiceWorker之间传递postMessage。 serviceWoker已成功注册并且工作至今。

不幸的是我注意到了一些奇怪的行为：

1. navigator.serviceWorker.controller始终为空。

2.在serviceWorker方面，我以这种方式实现了postMessage：

pre $ self.addEventListener（'message'，function（evt）{
console.log（'postMessage received'，evt）;
}）;

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

您知道如何回复吗？

谢谢非常多！

Andi

解决方案

将工作人员的响应发送回受控应用程序的一种方法显示在此演示中，并按以下方式完成（我避难实际上测试了这一点，但演示效果很好，代码似乎与规格一致）。

在主页中：

 函数sendMessage（消息）{
 //这将在消息中包装消息发布/响应，将
 //解析if响应不包含错误，并拒绝
 //错误（如果有）。如果您愿意，可以调用
 // controller.postMessage（）并设置onmessage处理函数
 //，而不受承诺影响，但这是一个方便的包装。 
 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）; 
} 
}; 
 
 //这将发送消息数据以及将
 // messageChannel.port2传送给服务人员
 //服务工作人员可以使用传送的端口回复
 //通过postMessage（），它将触发messageChannel.port1上的onmessage 
 //处理程序。
 //请参阅
 // 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 '}）; 
}）; 
  

您应该可以使用 sendMessage 函数根据来自服务工作人员的响应来做你想做的事情。

I try to postMessage between a WebApp and the corresponding ServiceWorker. The serviceWoker is successfully registered and working so far.
Unfortunately I noticed some strange behavior:
1. The navigator.serviceWorker.controller is always null.
2. At the serviceWorker side I implemented postMessage this way:

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

Unfortunately the important field to post back to origin evt.origin="" and evt.source=null do not contain the desired values. But I always receive the sent evt.data.

Do you know how to post back?

Thank you very much!
Andi

解决方案

One way to send a response from the worker back to the controlled app is shown in this demo and is done the following way (I haven't actually tested this yet, but the demo works well and the code seems to agree with the specs).

In the main page:

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]);
  });
}

And in the service worker code:

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

You should then be able to use the promise returned by the sendMessage function to do what you want with the response coming from the service worker.

这篇关于Chrome ServiceWorker的postMessage的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！