Shared Worker 可实现同源多标签页共享后台线程与状态，需单独部署脚本、手动维护 state 并通过 MessagePort 通信，不支持 DOM 但可调用 fetch/IndexedDB，须 HTTPS、注意 Safari 兼容性及持久化补充。
Shared Worker 可以让多个浏览器标签页、iframe 甚至不同窗口共享同一个后台线程，从而实现轻量级的跨标签页状态同步。但它不能直接替代 localStorage 或 BroadcastChannel，而更适合需要统一逻辑处理、避免重复请求或协调复杂状态变更的场景。
Shared Worker 的基本工作原理
Shared Worker 是一个独立于页面生命周期运行的脚本，由所有同源页面共同连接。每个页面通过 new SharedWorker() 创建连接，Worker 内部用 onconnect 接收端口（MessagePort），再通过端口双向通信。
关键点：
- 必须同源（协议 + 域名 + 端口完全一致）
- Worker 脚本需单独部署为一个 .js 文件，不能是内联脚本
- 页面关闭时自动断开连接，但 Worker 实例可继续运行，直到所有连接关闭
- 不支持访问 DOM、window 或 document，只能操作全局作用域和 Web API（如 fetch、IndexedDB）
实现全局状态共享的核心结构
Shared Worker 本身没有内置状态管理，需手动维护一个共享对象，并通过消息机制同步更新。推荐结构如下：
- Worker 内定义一个
state = {}对象，作为唯一可信数据源 - 所有页面发送
{ type: 'GET', key }或{ type: 'SET', key, value }消息 - Worker 统一响应：读取返回当前值，写入则更新 state 并广播给所有活跃端口（可选）
- 为避免竞态，简单场景可用对象深拷贝 + 赋值；高并发建议加锁（如用
self.locks.request()，需启用 Permissions Policy）
一个可用的最小示例
Worker 文件（shared-state-worker.js）：
let state = { count: 0, lastUpdated: Date.now() };
const ports = new Set();
self.onconnect = (e) => {
const port = e.ports[0];
ports.add(port);
port.onmessage = (msg) => {
const { type, key, value } = msg.data;
if (type === 'GET') {
port.postMessage({ type: 'VALUE', key, value: state[key] });
} else if (type === 'SET') {
state[key] = value;
state.lastUpdated = Date.now();
// 向所有端口广播变更（可选）
ports.forEach(p => p.postMessage({ type: 'UPDATE', key, value }));
}
};
port.start();
};
页面中使用：
const worker = new SharedWorker('shared-state-worker.js');
const port = worker.port;
port.onmessage = ({ data }) => {
if (data.type === 'VALUE') {
console.log('当前值：', data.value);
} else if (data.type === 'UPDATE') {
console.log('其他标签页更新了：', data.key, data.value);
}
};
port.start();
// 获取
port.postMessage({ type: 'GET', key: 'count' });
// 设置
port.postMessage({ type: 'SET', key: 'count', value: 123 });
注意事项与常见坑
Shared Worker 在实际项目中容易遇到以下问题：
- HTTPS 限制：本地开发（file://）或 HTTP 页面无法使用，必须 HTTPS 或 localhost
-
调试困难：Chrome DevTools 中需在 Application → Shared Workers 标签页查看，无法直接打断点（需用
debugger+ Sources 面板） - 兼容性：Safari 支持较晚（iOS 16.4+ / macOS 13.3+），旧版本会静默失败，务必加降级逻辑（如 fallback 到 localStorage + window.addEventListener('storage')）
-
内存泄漏风险：忘记调用
port.close()或未清理事件监听器，可能导致端口残留 - 无持久化：Worker 重启后 state 清空，如需持久，应在 SET 时同步写入 IndexedDB 或 localStorage（由 Worker 自行完成）
