sharedworker 是 html5 中实现多标签页长连接消息实时同步最可靠的原生方案之一，通过托管唯一 websocket 连接、集中管理状态与路由消息，并配合降级策略和 localstorage 持久化保障可靠性。
SharedWorker 是 HTML5 中实现多标签页长连接消息实时同步最可靠的原生方案之一。它让所有同源页面共享一个后台线程，WebSocket 连接、状态管理、消息路由都集中在此，避免重复建连、资源浪费和数据错乱。
核心思路：用 SharedWorker 托管 WebSocket 实例
每个标签页不直接创建 WebSocket，而是统一通过 SharedWorker 建立并维护唯一连接。页面只与 Worker 通信，由 Worker 负责：
- 建立并保活 WebSocket，处理重连、心跳、错误恢复
- 接收服务端消息后，按需广播给所有页面，或定向发给发起请求的页面
- 将页面发来的业务消息（如登录、订阅、发送聊天）统一打包、添加 clientID 后转发给服务端
- 内部维护连接状态、订阅关系、待响应队列等上下文信息
关键实现步骤
分三部分落地：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- SharedWorker 脚本（如 ws-worker.js）：监听 connect 事件，缓存每个页面的 MessagePort；内部启动 WebSocket；onmessage 处理页面指令（send / subscribe / ping）；onmessage 从服务端收到数据后，遍历 ports 广播或点对点回传
-
页面端连接逻辑：调用
new SharedWorker('ws-worker.js')，检查typeof SharedWorker !== 'undefined'；调用worker.port.start()；绑定port.onmessage接收推送；发送消息用port.postMessage({type: 'send', data: {...}}) - 消息路由与隔离：为每个页面生成唯一 clientID（如用 crypto.randomUUID()），页面发消息时带上；Worker 收到服务端响应后，比对响应中的 reqId 或 targetId，只将结果发回对应 port，防止 A 页面收到 B 页面的私有数据
必须考虑的兼容性与降级策略
SharedWorker 在 Safari（iOS/macOS）中支持较晚，仅 iOS 16.4+/macOS 13.3+ 可用，且要求 HTTPS 或 localhost。生产环境不能只依赖它：
- 检测失败时，自动 fallback 到 BroadcastChannel + localStorage 时间戳选举主控页：首个页面建连，其余页面监听 bc 消息并复用连接
- 主控页需定时刷新 localStorage 中的时间戳（如每 20 秒），从属页检测超时（如 >35 秒）则触发重新竞拍
- 所有降级路径都要保证消息能正确路由、不丢失、不重复，尤其注意页面刷新后状态重建逻辑
状态持久化与初始化衔接
SharedWorker 本身不保存数据，页面刷新或 Worker 重启会导致连接中断、状态清空：
- Worker 初始化时，先从 localStorage 读取上次连接状态（如 token、lastSeq、订阅列表），用于断线重连时快速恢复
- 每次连接成功、身份认证通过、订阅确认后，及时写回 localStorage，带防抖（如延迟 300ms 再存）
- 页面首次连接 Worker 后，先请求当前状态快照（
port.postMessage({type: 'sync'})），Worker 返回完整上下文，页面据此渲染 UI
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
