Service Worker 多页面通讯演示

一个 Service Worker 与多个独立应用页面之间的双工通讯

场景说明

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

🔗 多客户端独立连接
📡 消息广播机制
🎯 按类型定向推送
🔄 双向实时通讯
应用 1 购物车模块
应用 2 用户中心

通讯架构

应用 1
购物车模块
应用 2
用户中心
点对点: publish/subscribe
广播: onBroadcast
点对点: publish/subscribe
广播: onBroadcast
Service Worker
消息路由 & 广播中心
点对点: 请求→响应
广播: 单向通知
操作指南
  1. 分别点击两个应用的「连接 SW」按钮,建立与 Service Worker 的连接
  2. 点对点通讯:使用 publish/subscribe,有响应,适合数据请求(如获取购物车、用户信息)
  3. 广播通讯:使用 broadcast/onBroadcast,无响应,适合通知和事件推送
  4. 尝试「广播给所有」和「广播给XX」按钮,观察另一个应用是否收到消息
  5. 观察通讯日志,注意区分点对点消息和广播消息的不同
点对点通讯
广播通讯
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 } // 返回响应给发送方 })