如何在页面刷新/导航时保持SharedWorker存活？

核心问题在于：SharedWorker的生命周期和所有连接它的MessagePort绑定——当最后一个端口关闭（比如页面刷新导致原页面端口断开），浏览器就会销毁Worker进程。要让它在刷新时存活，必须在刷新全程保持至少一个活跃的端口连接。

下面是仅用SharedWorker实现的可行方案：

实现思路 #

在页面触发刷新/跳转的瞬间，打开一个隐藏的同域弹窗，让弹窗主动连接到SharedWorker，维持Worker的存活；当新页面加载完成并重新连接Worker后，再通知弹窗关闭，确保Worker始终有活跃连接。

代码示例 #

1. SharedWorker逻辑（shared-worker.js） #

// 维护所有活跃连接的端口
let connections = [];
// 要保存的状态数据
let persistentState = {
  createdAt: new Date().toISOString(),
  sequenceId: 0
};

self.onconnect = (e) => {
  const port = e.ports[0];
  connections.push(port);
  
  // 向新连接发送当前状态
  port.postMessage({ type: 'INIT', state: persistentState });

  port.onmessage = (msg) => {
    switch (msg.data.type) {
      case 'INCREMENT':
        // 更新状态并同步给所有连接
        persistentState.sequenceId++;
        connections.forEach(conn => conn.postMessage({ type: 'STATE_UPDATED', state: persistentState }));
        break;
      case 'CLOSE_POPUP':
        // 移除弹窗的端口并通知弹窗关闭
        connections = connections.filter(conn => conn !== port);
        port.postMessage({ type: 'SHUTDOWN' });
        break;
    }
  };

  // 端口关闭时清理列表
  port.onclose = () => {
    connections = connections.filter(conn => conn !== port);
  };
};

2. 主页面逻辑 #

let workerInstance;
let keepAlivePopup;

// 连接SharedWorker的通用函数
function connectWorker() {
  workerInstance = new SharedWorker('shared-worker.js');
  workerInstance.port.start();

  workerInstance.port.onmessage = (msg) => {
    switch (msg.data.type) {
      case 'INIT':
        console.log('恢复的状态:', msg.data.state);
        // 新页面连接成功后，通知弹窗可以关闭
        if (keepAlivePopup && !keepAlivePopup.closed) {
          workerInstance.port.postMessage({ type: 'CLOSE_POPUP' });
        }
        break;
      case 'STATE_UPDATED':
        console.log('状态更新:', msg.data.state);
        break;
    }
  };
}

// 页面加载时自动连接
window.addEventListener('load', connectWorker);

// 页面刷新/卸载前启动保活弹窗
window.addEventListener('beforeunload', (e) => {
  // 打开一个不可见的极小弹窗
  keepAlivePopup = window.open('', '_blank', 'width=1,height=1,left=-9999px,top=-9999px');
  if (!keepAlivePopup) return; // 弹窗被拦截则无法生效

  // 弹窗加载后立即连接SharedWorker
  keepAlivePopup.onload = () => {
    keepAlivePopup.document.write(`
      <script>
        const popupWorker = new SharedWorker('shared-worker.js');
        popupWorker.port.start();
        popupWorker.port.onmessage = (msg) => {
          if (msg.data.type === 'SHUTDOWN') window.close();
        };
      <\/script>
    `);
  };

  // 可选：取消默认的刷新提示
  e.preventDefault();
  e.returnValue = '';
});

// 测试按钮：递增序列ID
document.querySelector('#testBtn')?.addEventListener('click', () => {
  workerInstance.port.postMessage({ type: 'INCREMENT' });
});

关键细节说明 #

• 弹窗的独立连接：弹窗是主动连接SharedWorker，而非依赖主页面传递端口——这样主页面销毁时，弹窗的端口仍然独立存活，不会失效。
• 连接清理：新页面连接后立即通知弹窗关闭，避免无用的弹窗残留。
• 弹窗拦截处理：部分浏览器会拦截无交互触发的弹窗，建议在用户第一次交互（比如点击页面按钮）时提前打开一次空弹窗，后续刷新时就不会被拦截。

局限性 #

• 如果用户关闭所有同域标签页（包括保活弹窗），SharedWorker仍会被销毁，这是浏览器的原生机制，无法绕过。
• 仅适合同域场景，跨域无法共享同一个SharedWorker。

内容的提问来源于stack exchange，提问作者Endless