Service Worker 多页面通讯演示

场景说明

在实际应用中，一个 Service Worker 可能需要同时服务多个不同的页面或应用模块。本示例展示了如何使用 postmessage-duplex 实现：

🔗 多客户端独立连接

📡 消息广播机制

🎯 按类型定向推送

🔄 双向实时通讯

通讯架构

应用 1
购物车模块

应用 2
用户中心

点对点: publish/subscribe
广播: onBroadcast

Service Worker
消息路由 & 广播中心

● 点对点: 请求→响应

● 广播: 单向通知

操作指南

分别点击两个应用的「连接 SW」按钮，建立与 Service Worker 的连接
点对点通讯：使用 publish/subscribe，有响应，适合数据请求（如获取购物车、用户信息）
广播通讯：使用 broadcast/onBroadcast，无响应，适合通知和事件推送
尝试「广播给所有」和「广播给XX」按钮，观察另一个应用是否收到消息
观察通讯日志，注意区分点对点消息和广播消息的不同

点对点通讯

广播通讯

SW 端实现

对比总结

// ========== 点对点通讯（请求-响应模式） ==========

// 1. 连接 Service Worker
const channel = await ServiceWorkerChannel.createFromPage()

// 2. 发送请求并等待响应（publish 返回 Promise）
const response = await channel.publish('getCart', { userId: '123' })
if (response.ret === ReturnCode.Success) {
  console.log('购物车数据:', response.data)
}

// 3. 接收点对点消息（subscribe 需要返回响应）
channel.subscribe('directMessage', ({ data }) => {
  console.log('收到消息:', data.message)
  return { received: true }  // 返回响应给发送方
})
        