Service Worker 与 MessageChannel 双向协作

`title: Service Worker 与 MessageChannel 双向协作``categories: Web 开发/前端/数据管理``keywords: Service Worker,MessageChannel,消息,双向通信,缓存``description: 使用 MessageChannel 进行页面与 Service Worker 的双向通信，传递控制消息与分块数据，协调缓存与持久化任务。`初始化通道async function connectSW() { const reg = await navigator.serviceWorker.ready; const ch = new MessageChannel(); navigator.serviceWorker.controller.postMessage({ type: 'connect' }, [ch.port2]); ch.port1.onmessage = (e) => { /* 处理 SW 回传消息 */ }; return ch.port1; } 分块发送function sendChunks(port, id, chunks) { for (const c of chunks) { port.postMessage({ type: 'chunk', id, data: c }, [c.buffer]); } port.postMessage({ type: 'end', id }); } SW 侧接收self.addEventListener('message', (e) => { const data = e.data; if (data && data.type === 'connect' && e.ports && e.ports[0]) { const port = e.ports[0]; port.onmessage = async (ev) => { const msg = ev.data; if (msg.type === 'chunk') { // 收到分块，可写入 Cache/OPFS } else if (msg.type === 'end') { // 合并与清理 } }; port.postMessage({ ok: true }); } });