Service Worker 与页面通信需通过 postMessage 实现双向事件监听，关键在于确保发送时机正确（controller 或 active 存在）、使用 event.source 精准回复、页面校验消息来源，并遵守结构化克隆限制。
Service Worker 与页面通信主要靠 postMessage，核心是双向事件监听 + 安全消息传递。关键不在“能不能发”，而在于“什么时候能发”“发给谁”“怎么回”。
页面向 Service Worker 发消息的两种可靠时机
不能一注册完就盲目调用 postMessage，必须确认目标 SW 实例已就绪：
service-qa-coach
下载
评估聊天、邮件、电话、社交平台私信（DM）或电商平台客服团队的服务质量。适用于团队需要制定 QA 评分卡、故障模式分析、辅导计划、校准检查清单或服务改进简报，但无法访问实时工单系统、CRM 或联络中心系统的情况。
-
用
navigator.serviceWorker.controller：适用于页面已被当前 SW 控制后（比如刷新过一次）。此时它指向正在接管该页面的 active SW。若首次加载、SW 刚注册但尚未 activate，这个值为null。 -
用
registration.active：适用于注册成功后想立刻通信的场景。只要 SW 已进入active状态（哪怕还没控制当前页面），就能发。但要注意：如果注册刚完成、SW 还在installing或waiting阶段，registration.active也可能为null。
Service Worker 中接收并响应消息
在 SW 脚本（如 /sw.js）里监听 message 事件，注意两点：
- 使用
event.source回复，而不是self.postMessage()—— 后者无效，且不指定接收方； -
event.source只在消息来自 client（页面）时存在，可用于精准回传； - 示例写法：
self.addEventListener('message', event => {
console.log('收到页面消息:', event.data);
if (event.source) {
event.source.postMessage({ reply: '已处理', timestamp: Date.now() });
}
});
页面监听来自 Service Worker 的回复
页面端需主动监听 message 事件，且建议校验来源以防误收：
- 监听全局
message事件即可，无需额外绑定到某个对象； - 推荐检查
event.source是否为navigator.serviceWorker.controller，或至少验证event.origin === self.origin； - 示例：
window.addEventListener('message', event => {
if (event.source !== navigator.serviceWorker.controller) return;
console.log('SW 回复:', event.data);
});
常见坑点和加固建议
- 消息体必须可被结构化克隆（structured clone）—— 支持对象、数组、字符串、数字、布尔、
ArrayBuffer等，但不能传函数、undefined、DOM 节点； - 不要用
"*"作为targetOrigin，即使同域也应写明self.origin； - 如果需要广播消息给所有受控客户端，可在 SW 中用
self.clients.matchAll()获取 clients 并逐个postMessage； - 调试时可加
console.log配合 Chrome DevTools 的 Application → Service Workers 面板查看激活状态和消息日志。
