SharedWorker 的 Port 连接需显式调用 start() 激活，否则消息被缓存不触发 onmessage；应为每个 port 分配唯一 ID 并记录最后活跃时间，结合定时 ping/pong 心跳与超时清理（如 30 秒无响应则关闭）来保障连接可靠性。
SharedWorker 中的 Port 连接是隐式建立、显式激活的，没有内置连接生命周期管理或心跳机制。要实现可靠通信和连接状态感知，需在应用层手动维护 Port 引用、监听连接事件，并结合定时消息 + 响应确认来模拟心跳。
Port 的获取与激活时机
每个页面通过 new SharedWorker() 获取 Worker 实例后，调用 port.start() 才真正建立双向通信通道。SharedWorker 内部需监听 connect 事件，在回调中拿到 port 并调用 port.start()，否则消息无法送达。
- 页面侧必须显式调用
worker.port.start()（或设置worker.port.onmessage自动触发） - Worker 侧必须在
connect回调里对新 port 调用port.start() - 未 start 的 port 会缓存消息但不触发
onmessage，容易误判为“无响应”
连接存活状态的主动跟踪
SharedWorker 无法直接获知页面是否关闭，只能依赖 port.onclose（页面卸载或 port.close() 时触发），但该事件有时延且不可靠。更稳妥的方式是：为每个 port 分配唯一 ID，记录其首次连接时间与最后活跃时间，并定期清理超时端口。
- 在
connect事件中生成随机 portId，保存到 Map：ports.set(portId, { port, lastActive: Date.now() }) - 每次收到消息时更新对应 port 的
lastActive - 启动一个
setInterval检查所有 port，若Date.now() - lastActive > 30000则视为失效，调用port.close()并从 Map 删除
轻量级心跳协议设计
避免轮询开销，采用“按需探测 + 超时判定”策略：Worker 定期向各活跃 port 发送 { type: 'ping', ts: Date.now() }，页面收到后立即回 { type: 'pong', ts: ping.ts }。Worker 根据响应时间与是否到达判断连接健康度。
- 心跳间隔建议设为 25–45 秒（避开浏览器 tab 冻结阈值）
- 页面侧监听
message，匹配ping后同步 postMessagepong，不需额外逻辑 - Worker 收到
pong时更新对应 port 的lastActive；若连续 2 次未收到响应，则标记为离线并清理 - 注意：不要在
pong回复中携带大量数据，保持消息体小于 1KB
页面卸载前的优雅断连
页面刷新或关闭时，beforeunload 或 pagehide 钩子中主动关闭 port，能加快 Worker 端感知速度，减少无效心跳。
- 页面侧注册：
window.addEventListener('beforeunload', () => worker.port.close()) - SharedWorker 中监听
port.onclose，及时移除对应 portId，避免后续心跳发送失败报错 - 若页面异常崩溃未触发 close，仍依赖前述超时清理兜底
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
