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

Question

有一个由preact-cli (使用workbox)生成的preact应用程序，我的目标是在服务工作者上注册一个' message‘事件处理程序，发布来自该应用程序的一条消息，最后接收一个返回的响应。

类似于：

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

const response = ? // get the response somehow

/* sw.js */
addEventListener('message', function (e) { return 'polo' });

我没有太多使用服务工作者的经验，有很多移动部件让我感到困惑，比如workbox对服务工作者施展魔法，预先隐藏注册服务工作者和服务工作者的代码，这通常很难调试。

到目前为止，我已经按照preact-cli文档的指示在src/目录中放置了一个sw.js文件：https://preactjs.com/cli/service-worker/

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

Answer 1

( Workbox和Preact都与这个问题没有太多关系。Workbox允许你在你的服务工作者中使用任何你想要的额外代码，Preact也应该用于你的客户端应用程序。)

This example page演示了如何使用MessageChannel将消息从客户机页发送到服务工作者，然后进行响应。客户端页面上使用的相关助手代码如下所示：

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

您也可以使用Comlink library来简化逻辑来做同样的事情。