messagechannel 实现页面与 service worker 双向可靠通信，通过配对端口确保请求响应一一对应，避免 postmessage 单向通信导致的竞态和匹配混乱。
用 MessageChannel 实现页面与 Service Worker 的通信，核心是建立一条**双向、可响应、端到端隔离**的消息通道。它比单纯用 postMessage 更可靠，能避免竞态、确保响应必达，尤其适合需要等待结果的场景（比如“发指令→等处理完成→拿返回值”）。
为什么不用直接 postMessage？
直接调用 navigator.serviceWorker.controller.postMessage() 是单向的：页面能发，但 Service Worker 回复时没有天然绑定的响应路径。若多个请求并发，你无法准确知道哪个回复对应哪次请求。而 MessageChannel 通过一对端口（port1 和 port2）把通信“配对”，让每次交互自成闭环。
页面端：创建通道并发送消息
在页面 JavaScript 中：
- 新建
MessageChannel实例，拿到port1和port2 - 给
port1绑定onmessage，用于接收 Service Worker 的响应 - 调用
postMessage向 Service Worker 发送数据，同时把port2作为transfer参数传过去（注意必须用数组包裹） -
务必检查
navigator.serviceWorker.controller是否存在，否则会静默失败
示例代码：
function sendMessageToSW(data) {<br>
if (!navigator.serviceWorker.controller) return Promise.reject('No active SW');<br>
const channel = new MessageChannel();<br>
return new Promise((resolve, reject) => {<br>
channel.port1.onmessage = (e) => {<br>
if (e.data?.error) reject(e.data.error);<br>
else resolve(e.data);<br>
};<br>
navigator.serviceWorker.controller.postMessage(<br>
{ command: 'process', payload: data },<br>
[channel.port2]<br>
);<br>
});<br>
}
Service Worker 端：接收并响应
在 sw.js 中：
- 监听全局
message事件 - 从
event.ports[0]拿到传来的port2（它和页面的port1是一对） - 处理完逻辑后，调用
event.ports[0].postMessage()把结果发回去 - 不需要手动关闭端口，浏览器会在消息传递完成后自动清理
示例代码：
self.addEventListener('message', (e) => {<br>
const { command, payload } = e.data;<br>
if (command === 'process') {<br>
try {<br>
const result = doSomething(payload);<br>
e.ports[0].postMessage({ success: true, data: result });<br>
} catch (err) {<br>
e.ports[0].postMessage({ error: err.message });<br>
}<br>
}<br>
});
常见问题与注意事项
-
端口只能 transfer 一次：
port2传给 SW 后，页面不能再用它；同理，SW 也不能再把它转给别的地方 -
不能跨域共享端口：
MessageChannel只适用于同源环境，不解决跨域通信 -
Service Worker 必须已激活且控制页面：如果 SW 处于 installing 或 waiting 状态，
controller为null，需先等navigator.serviceWorker.ready - 如需简化写法，可用
Comlink库自动包装通道，把通信变成函数调用形式
