Service Worker MessageChannel 双向通信与批量任务分发实践

概述双向通信可用于任务分发与状态回传。本文给出最小实现。页面端建立通道async function connectSW() { const reg = await navigator.serviceWorker.ready; const mc = new MessageChannel(); reg.active.postMessage({ type: 'connect' }, [mc.port2]); mc.port1.onmessage = e => { console.log('result', e.data); }; mc.port1.postMessage({ type: 'batch', items: [1,2,3] }); } SW 端接入与分发let port; self.addEventListener('message', e => { if (e.data && e.data.type === 'connect' && e.ports && e.ports[0]) { port = e.ports[0]; port.onmessage = ev => { if (ev.data.type === 'batch') { const out = ev.data.items.map(x => x * 2); port.postMessage({ ok: true, out }); } }; } });