demo · v139

Cross-Tab State Bus

Open this page in two tabs. A SharedWorker with extendedLifetime: true keeps a tick counter and event log, and pushes deltas to every connected tab. Close every tab, reopen one — the counter is still there, because the worker never died.

Connecting…

this tab

Tab ID: —
Counter: —
Worker uptime: —

worker broadcast

Connected tabs: —

snippet

// Tab side
const worker = new SharedWorker('./state-bus.js', {
  name: 'state-bus',
  extendedLifetime: true,   // 139+: stays alive past last page
});
worker.port.onmessage = (e) => render(e.data);
worker.port.postMessage({ type: 'bump' });

// Worker side (./state-bus.js)
let counter = 0;
const ports = new Set();
self.onconnect = (e) => {
  const port = e.ports[0];
  ports.add(port);
  port.onmessage = ({ data }) => {
    if (data.type === 'bump') counter++;
    broadcast({ counter });
  };
  port.start();
  port.postMessage({ counter, hello: true });
};
function broadcast(msg) { for (const p of ports) p.postMessage(msg); }

see also