SharedWorker 多页面数据管道与缓存协作实践

概述SharedWorker 可在多个页面间共享同一运行上下文，适合作为数据管道与协调中心。本文提供连接与消息分发示例。能力检测与连接const supportsSW = typeof SharedWorker === 'function';

function connectShared() {

if (!supportsSW) return null;

const sw = new SharedWorker('shared.js');

sw.port.start();

sw.port.postMessage({ type: 'hello' });

sw.port.onmessage = e => {

if (e.data.type === 'state') {

localStorage.setItem('shared-state', JSON.stringify(e.data.payload));

}

};

return sw.port;

}

SharedWorker 端消息分发const ports = [];

onconnect = e => {

const port = e.ports[0];

ports.push(port);

port.onmessage = ev => {

if (ev.data.type === 'hello') {

for (const p of ports) p.postMessage({ type: 'state', payload: { ts: Date.now() } });

}

};

};