Javascript 客户端页面和服务工作者之间的双向通信

通过preact cli生成preact应用程序（使用workbox），我的目标是在服务工作者上注册一个“消息”事件处理程序，发布来自应用程序的消息，并最终收到响应

比如：

/* app.js */
navigator.serviceWorker.postMessage('marco');

const response = ? // get the response somehow

/*sw.js*/
addEventListener（'message'，函数（e）{return'polo'}）；

我在服务人员方面没有太多经验，有很多活动部件让我感到困惑，比如workbox对服务人员施展魔法，预先隐藏注册服务人员的代码，服务人员通常很难调试

到目前为止，我已经按照preact cli文档的指示，在

src/

目录中放置了一个

sw.js

文件，如下所示：

我知道我应该附加一个事件侦听器，但我找不到要附加的对象的文档。

（Workbox和Preact都与此问题无关。Workbox允许您在服务人员中使用您喜欢的任何其他代码，Preact也应该用于您的客户端应用。）

演示如何从客户端页面向服务工作人员发送消息，然后使用进行响应。客户端页面上使用的相关帮助程序代码如下所示：

function sendMessage(message) {
  return new Promise(function(resolve, reject) {
    const messageChannel = new MessageChannel();
    messageChannel.port1.onmessage = function(event) {
      // The response from the service worker is in event.data
      if (event.data.error) {
        reject(event.data.error);
      } else {
        resolve(event.data);
      }
    };

    navigator.serviceWorker.controller.postMessage(message,
      [messageChannel.port2]);
  });
}

然后在您的服务人员中，您使用

MessageChannel

的端口进行响应：

self.addEventListener('message', function(event) {
  // Your code here.

  event.ports[0].postMessage({
    error: // Set error if you want to indicate a failure.
    message: // This will show up as event.data.message.
  });
});

您也可以使用来简化逻辑