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

}

};

}

});