Shared Worker 通过职责分离与通信契约实现前端状态管理：它作为中心化状态容器和通信中继，支持多页面隔离访问、原子更新、端口路由及生命周期自治，弥补 localStorage 和 BroadcastChannel 的协作空白。

shared worker 本身不是多进程，但它能模拟出类似多进程架构的前端状态管理效果：每个页面像一个“进程”，独立运行、不互相干扰；shared worker 则像一个轻量级“内核”或“系统服务”，统一维护状态、分发指令、协调行为。关键不在“进程数量”，而在职责分离与通信契约。

状态中心化：所有页面共用同一份可信数据源

Shared Worker 脚本中声明一个全局对象（如 state = {}），作为唯一状态容器。页面不直接读写 localStorage 或内存变量，而是通过消息协议请求操作：

• 发送 { type: 'SET', key: 'user', value: { id: 123 } }，Worker 更新 state 并可选择广播变更
• 发送 { type: 'GET', key: 'theme' }，Worker 返回当前值，避免各页面缓存不一致
• 发送 { type: 'UPDATE', payload: { count: state.count + 1 } }，Worker 执行原子更新（简单场景可用赋值，高并发建议加标记位防重入）

通信解耦：端口隔离 + 类型路由

每个页面连接 Shared Worker 后获得独立 MessagePort，Worker 内通过 onconnect 缓存端口，并在 port.onmessage 中按 type 字段 分发逻辑：

• 不把页面当“兄弟”，而当“客户端”——页面之间不直接通信，所有交互经 Worker 中转
• 支持单点响应（如只回给发起请求的页面）和全量广播（如登录态变更通知所有标签页）
• 可扩展路由：加入中间件机制，比如对 'API_CALL' 类型自动查缓存、去重、节流

生命周期自治：状态比页面更持久

Shared Worker 实例只要还有一个页面保持连接就不会销毁，这让它天然适合做状态锚点：

根据ui图生成前端页面

将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。

下载

• 用户在标签页 A 登录 → Worker 记录 state.auth = token → 标签页 B 加载时发 GET 请求立即获知登录态
• 页面关闭自动断开 port，Worker 可监听 port.onclose 清理关联数据（如移除该页面的播放器控制权）
• 配合 IndexedDB 或 sessionStorage，Worker 可在重启后恢复关键状态（如未发送的消息队列）

规避常见陷阱：不是万能，但能补位

Shared Worker 不替代其他机制，而是填补它们之间的协作空白：

立即学习“前端免费学习笔记（深入）”；

• 不取代 localStorage：它不自动持久化，但可封装成带持久化的 SET/GET 接口
• 不取代 BroadcastChannel：后者更轻、兼容性更好，但无状态管理能力；Shared Worker 适合需逻辑判断的场景（如“只允许一个标签页播放音频”）
• Safari 16.4+ 才支持，上线前需降级方案（如 fallback 到 localStorage + window.addEventListener('storage')）
• 不能访问 DOM，所有 UI 响应必须由页面自己根据收到的消息触发