服务工作者在重新激活后丢失与浏览器通信的端口答案

【问题标题】：service worker losts ports to communicate with browser after reactivates服务工作者在重新激活后丢失与浏览器通信的端口
【发布时间】：2021-08-27 22:39:36
【问题描述】：

我的前端代码中有以下代码：

    const messageChannel = new MessageChannel();

    navigator.serviceWorker.controller.postMessage(
      {
        type: 'INIT_PORT',
      },
      [messageChannel.port2],
    );

这在我的 service worker 中：

let getVersionPort;

self.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'INIT_PORT') {
    getVersionPort = event.ports[0];
  }
});

首先，它创建了我的 messageChannel，然后使用该频道向我的 serviceWorker 发布一条消息。此代码在我的应用启动时运行。

接下来，我的服务工作者注册消息侦听器，一旦发送了来自客户端的消息，它会检查它并且它是一个端口，因此它将它分配给 getVersionPort。我可以使用 getVersionPort 与浏览器进行通信，并且它可以完美运行，直到我的 serviceWorker 被浏览器停止。在它停止然后重新激活之后，我们无法控制它，它的代码从上到下运行并且 getVersionPort 变得未定义。

如何解决这个问题？即使浏览器挂起并重新激活，如何强制 serviceWorker 保持 getVersionPort 的值？

【问题讨论】：

标签： javascript service-worker message-channel

【解决方案1】：

你的建议是不可能的。每当 Service Worker 停止然后重新启动时，属于 ServiceWorkerGlobalScope 的变量都会被丢弃，您需要 re-populate them at startup time 以确保它们可用。

此外，我很确定尝试将 MessagePort 序列化为 IndexedDB 并在以后重用它们 won't work，因此您需要在服务工作者和客户端页面之间建立“新”消息连接每次启动。

【讨论】：