demo · v148

Shared Clock

One worker, one timer, many tabs. This page connects to a SharedWorker that ticks once per second — and the same tick number lands in every tab connected to the same origin. That's the canonical motivating use case from the whatwg/html #11205 discussion that re-enabled SharedWorker on Android: a single upstream "feed" (WebSocket, SSE, timer) shared by every open tab instead of one per tab.

Open this page in two or three tabs. Watch the tick number stay in lock-step across them, and watch the "connected ports" number tick up.

checking SharedWorker…
—
last tick id from the shared worker
—
connected tabs
—
worker uptime (s)
—
tab id (local)

cross-tab broadcast (one channel, all tabs)

// broadcast messages from any tab show up here

the code

// One worker, one upstream connection, many tabs.
const worker = new SharedWorker("/worker.js", { name: "shared-clock" });
worker.port.start();

worker.port.onmessage = (e) => {
  if (e.data.type === "tick") render(e.data);
  if (e.data.type === "broadcast") logChat(e.data);
};

worker.port.postMessage({ type: "broadcast", from: tabId, text: "hi all" });

// Inside worker.js, ports is a Set; one setInterval feeds all ports.
// In production you'd swap setInterval for a single WebSocket / SSE.

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗