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

【问题标题】：Bi-directional communication between a client page and a service worker客户端页面和服务工作者之间的双向通信
【发布时间】：2020-04-03 09:32:23
【问题描述】：

拥有一个由 preact-cli 生成的 preact 应用程序（使用工作箱），我的目标是在 service worker 上注册一个“消息”事件处理程序，从应用程序发布消息并最终收到回复。

类似：

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

const response = ? // get the response somehow

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

我对 Service Worker 没有太多经验，而且有很多移动部件让我感到困惑，比如 Workbox 在 Service Worker 上施展魔法，预先隐藏了注册 Service Worker 的代码，而且 Service Worker 难以调试一般。

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

我知道我应该附加一个事件侦听器，但我找不到有关执行此操作的对象的文档。

【问题讨论】：

标签： javascript service-worker workbox preact

【解决方案1】：

（Workbox 和 Preact 都与这个问题没有太大关系。Workbox 允许您在 Service Worker 中使用您喜欢的任何其他代码，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]);
  });
}

然后在你的 Service Worker 中，你使用了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 做同样的事情来简化逻辑。

【讨论】：