v148 · workers · shipped

Collaborative Notes

Three simulated "tabs" share a single SharedWorker. Type in any tab and the note syncs instantly to all others — the worker is the single source of truth. On Android Chrome 148+, this works natively; the demo simulates the multi-tab message bus in-page.

Checking SharedWorker support…

Initializing shared worker…

Tab A Type here — other tabs will sync

Tab B Connected to the same SharedWorker

Tab C Changes appear here too

Sync log (SharedWorker message bus)

Worker starting…

SharedWorker message bus pattern

// shared-worker.js — single instance shared across all tabs
const ports = new Set();

onconnect = ({ ports: [port] }) => {
  ports.add(port);
  port.onmessage = ({ data }) => {
    // Broadcast to all other connected ports
    for (const p of ports) {
      if (p !== port) p.postMessage(data);
    }
  };
  port.onmessageerror = () => ports.delete(port);
};

// In each tab:
const worker = new SharedWorker('/shared-worker.js');
worker.port.onmessage = ({ data }) => noteArea.value = data.content;
noteArea.oninput = () =>
  worker.port.postMessage({ content: noteArea.value });

references

implementation reference

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