Reference · print-friendly

BroadcastChannel decision playbook

One page for design reviews. Walk top to bottom; stop when a row rejects the current candidate.

← Lesson 4 Integration checklist Core API Glossary

1. Gate A · Job (which multi-context tool?)

If…	Prefer…
Same-origin peers must hear a signal and act locally (logout, theme, invalidate)	BroadcastChannel
One process must own a scarce resource (socket, engine, shared memory-ish coordinator)	SharedWorker
One page CPU offload only	Dedicated Worker
Offline shell / fetch policy / push control plane	Service worker (+ Cache)
Tab-private sticky state for a page session	sessionStorage / memory — not a bus
Tiny durable prefs; optional crude multi-tab	localStorage (+ `storage` events as legacy bus)
Cross-origin messaging	`window.postMessage` / MessageChannel — not BC

2. Gate B · Wire (if BroadcastChannel)

Exact channel name convention (namespace: "app:auth")
Local apply, then post — sender is excluded from destinations
Small structured payloads ({ type, … }); structured clone only — no transfer list
onmessage / messageerror; close() on teardown; never post after close

3. Gate C · Truth & late joiners

BC is a live bus, not a mailbox — no history replay
Durable authority: server and/or client store (IDB, localStorage for tiny prefs)
Late tabs: read store first, then join the channel for live updates
Partial order only across agents — not a distributed commit log

4. Gate D · Ship risks

Same origin partitioning — “same site” is not enough
Support floor: modern engines / Safari 15.4+; feature-detect long tail (storage-event fallback is stringly)
No BC-only locks / leader election without a real lease model
Payload size / clone cost; closed-channel InvalidStateError
Name typos = silent silence

Sentence to say in review

“We use BroadcastChannel | SharedWorker | sessionStorage | SW | … because job; wire is name + local-then-post + small clone; truth is store/server; we own origin · support · no lock myth · close hygiene.”

5. Mini API crib

const ch = new BroadcastChannel("app:sync");
ch.onmessage = (e) => handle(e.data);
function publish(msg) {
  handle(msg); // local — sender excluded
  ch.postMessage(msg);
}
// teardown: ch.close();