重新激活后，Service Worker 丢失了与浏览器通信的端口

如何解决重新激活后，Service Worker 丢失了与浏览器通信的端口

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

    const messageChannel = new MessageChannel();

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

这在我的服务工作者中：

let getVersionPort;

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

首先，它创建我的 messageChannel，然后将带有此频道的消息发布到我的 serviceWorker。此代码在我的应用启动时运行。

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

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

解决方法

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

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