客户端页面和 Service Worker 之间的双向通信

Workbox 和 Preact 都与这个问题没有太大关系。Workbox 允许您在 Service Worker 中使用您想要的任何其他代码，而 Preact 也应该适用于您的客户端应用程序。）

此示例页面演示了使用 来从客户端页面向服务工作人员发送消息，然后进行响应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 库执行相同的操作来简化逻辑。