service worker 的 message 事件不支持直接回复，必须用 messagechannel 实现双向通信：主线程创建通道并 transfer port2，sw 通过 event.ports[0] 回复；不可用 self.clients.matchall() 伪双向。
Service Worker 的 message 事件只能单向接收，不能直接回复
主线程调用 navigator.serviceWorker.controller.postMessage() 发消息给 Service Worker 后，SW 端通过 self.addEventListener('message', ...) 能收到，但此时没有内置的 event.reply() 或类似机制。你不能像 Web Worker 那样直接用 event.source.postMessage() 回复——因为 event.source 在 SW 中是 Client 实例，而 Client 对象不支持 postMessage()（它不是 Window 或 Worker）。
必须用 MessageChannel 实现可靠双向通信
这是目前唯一被规范支持、浏览器广泛兼容的双向方案。核心是主线程创建 MessageChannel，把其中一端（port2）随消息一起传给 SW，SW 拿到后用它回传。
- 主线程侧：创建
new MessageChannel()，监听port1.onmessage，发送时把port2放进postMessage()的第二个参数（transfer list）中 - Service Worker 侧：从
event.ports[0]取出该 port，调用postMessage()发送响应 - 必须确保 transfer list 正确传递：第二个参数写成
[event.ports[0]]，否则 port 会变成null - 注意：
port1和port2是成对绑定的，不可复用；每次通信建议新建一个MessageChannel
示例（主线程）：
const channel = new MessageChannel();
channel.port1.onmessage = (e) => {
console.log('收到 SW 响应:', e.data);
};
navigator.serviceWorker.controller.postMessage(
{ cmd: 'fetchUser' },
[channel.port2] // ← 关键：必须在这里 transfer
);
示例（SW）：
self.addEventListener('message', (e) => {
if (e.data.cmd === 'fetchUser' && e.ports[0]) {
e.ports[0].postMessage({ id: 123, name: 'Alice' }); // ← 用 port 回复
}
});
别误用 self.clients.matchAll() 做“伪双向”
常见错误是：在 SW 收到消息后，用 self.clients.matchAll() 找到所有页面 client，再挨个 client.postMessage() 广播——这本质是广播，不是针对原请求者的响应。问题包括：
- 无法保证只发给发起请求的那个页面（比如用户开了多个 tab）
- 如果原页面已关闭，
client可能已失效，postMessage()静默失败 - 没有超时或重试机制，无法判断对方是否真的收到了
- 和
MessageChannel相比，多了异步查找开销，延迟更高
除非你明确需要广播（比如通知所有打开的 tab 更新缓存），否则不要用这种方式模拟“回复”。
主线程如何确认 SW 已就绪并可通信
通信前必须确保 navigator.serviceWorker.controller 存在且有效，否则 postMessage() 会报错 TypeError: Cannot read properties of null。
- 注册成功不等于 controller 就绪：注册后需等待
state变为'activated'，且页面是 SW 控制下的（刷新后才生效） - 推荐检查逻辑：
if (navigator.serviceWorker.controller && navigator.serviceWorker.controller.state === 'activated') - 更稳妥的做法是监听
navigator.serviceWorker.addEventListener('controllerchange', ...)，在事件触发后再发消息 - 首次注册时，
controller可能为null，直到下一次页面加载才可用
容易忽略的一点：Service Worker 的 message 事件监听器必须在 install 或 activate 阶段之前就注册好——通常放在脚本顶层即可，但若用动态 importScripts() 加载逻辑，要确保监听器已挂载。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
