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 });

}

});