SharedWorker 是 HTML5 提供的跨页面通信核心机制，可作为轻量级前端消息分发中心，支持同一源下多标签页/iframe 共享单实例线程，实现广播、状态同步与请求-响应。
SharedWorker 是 HTML5 提供的跨页面通信核心机制，它天然适合作为轻量级前端消息分发中心——同一源下的多个标签页、iframe 或窗口可共用一个后台线程，统一收发、广播、中转消息，无需后端介入。
一、SharedWorker 的分发中心定位
它不是简单的“中转站”，而是具备状态管理能力的共享服务端：
- 单实例运行：所有页面调用
new SharedWorker('center.js')，实际只启动一个线程，资源复用率高 - 端口隔离：每个页面连接后获得独立
MessagePort，支持点对点响应与全量广播双模式 - 生命周期自主：只要还有一个页面保持连接，SharedWorker 就持续存活，适合长期驻留的状态同步场景
二、核心实现结构
分发中心由两部分构成，职责分明：
-
页面脚本（如 pageA.html / pageB.html）：负责建立连接、发送事件、监听响应。使用
worker.port.postMessage({type: 'login', user: 'Alice'})发送结构化消息；用worker.port.onmessage接收返回或广播 -
SharedWorker 脚本（center.js）：维护端口池、定义路由逻辑。在
onconnect中缓存 port；通过port.addEventListener('message', ...)解析 type 字段，执行对应动作（如存用户状态、向其他 port 广播通知）
三、关键通信模式示例
一个实用的消息分发中心至少支持三种基础能力：
立即学习“前端免费学习笔记（深入）”；
-
广播通知：Worker 收到一条
{type: 'notify', content: '系统维护中'}，遍历所有已注册 port，逐个port.postMessage(...) -
状态同步：某页面提交
{type: 'updateCounter', delta: 1}，Worker 累加全局计数器，并主动推送最新值给全部端口 -
请求-响应：页面发送
{type: 'getUsers'}，Worker 查本地缓存后，仅向发起该请求的 port 回传port.postMessage({type: 'users', data: [...]})
四、注意事项与避坑点
SharedWorker 表面简单，但几个细节直接影响稳定性：
- 必须启用 HTTPS 或 localhost，否则浏览器直接拒绝创建（非同源、非安全上下文会静默失败）
- Worker 内不可访问 DOM、
window、document，所有数据需靠消息传递，状态建议用纯对象或 Map 存储 - 端口未
start()可能导致首次消息丢失（尤其在使用addEventListener时），推荐统一在onconnect中调用port.start() - 页面刷新会断开当前 port，但 SharedWorker 实例仍在；需在 Worker 端监听
port.onclose清理对应状态，避免内存泄漏
