Shared Worker 可通过保存并遍历 MessagePort 实现广播：onconnect 时存端口到 clients 数组，广播时检查 port.readyState === 'open' 后 postMessage；页面端创建 SharedWorker 并通过 port.postMessage({type: 'broadcast'}) 触发，支持 topic 分类分发。

Shared Worker 本身不自带“广播”功能，但可以通过在 Worker 脚本中主动遍历所有已连接的 MessagePort 实例，逐个调用 port.postMessage()，实现向所有页面发送相同消息的效果。这是最常用、最可控的广播方式。

核心逻辑：收集端口 + 遍历发送

Worker 线程需在 onconnect 事件中保存每个页面传来的通信端口，并在需要广播时统一推送：

• 每次有新页面连接，e.ports[0] 就是一个专属端口，把它存进数组（如 clients = []）
• 发送广播前，确保每个端口都已调用过 port.start()（使用 port.onmessage 可自动触发）
• 遍历 clients 数组，对每个端口执行 port.postMessage(data)
• 注意：若某页面已关闭但端口未及时清理，port.postMessage() 不会报错，但消息无法送达；可结合 port.onclose 或定期检查 port.readyState === 'open' 做清理

Worker 脚本示例（shared-worker.js）

以下代码实现基础广播能力：

const clients = [];

self.onconnect = function(e) {
  const port = e.ports[0];
  clients.push(port);

  port.onmessage = function(event) {
    const data = event.data;

    // 收到页面发来的指令，例如 { type: 'broadcast', payload: 'hello' }
    if (data.type === 'broadcast') {
      // 向所有当前活跃页面广播
      clients.forEach(p => {
        if (p.readyState === 'open') {
          p.postMessage({ from: 'shared-worker', ...data.payload });
        }
      });
    }
  };

  port.start();
};

页面端如何触发与接收

每个页面只需创建 SharedWorker 实例，通过其 port 发送广播指令、监听返回消息：

• 创建连接：const worker = new SharedWorker('shared-worker.js');
• 监听广播消息：worker.port.onmessage = e => console.log('收到广播:', e.data);
• 发起广播：worker.port.postMessage({ type: 'broadcast', payload: { msg: '系统维护中' } });
• 务必调用 worker.port.start()（如果用 onmessage 则自动生效）

补充：广播内容可带标识或过滤逻辑

实际项目中常需区分消息类型或目标范围，比如只通知“登录态变更”或“配置更新”。可在广播数据中加入 topic 字段，Worker 端按需分发：

• 页面发送：worker.port.postMessage({ type: 'broadcast', topic: 'auth', data: { isLoggedIn: true } });
• Worker 中根据 topic 决定是否转发，或只推给订阅了该主题的端口（需额外维护订阅关系）