Reference

Integration checklist

60-second design-review scan + two-tab hands-on. Print-friendly.

Reject early if…

Need a shared process (one WebSocket, in-memory coordinator, multi-window engine) → SharedWorker, not BC alone.
Need cross-origin messaging → window.postMessage / ports, not BroadcastChannel.
Treating messages as source of truth (no server / durable store) → redesign; BC only signals.
Shipping multi‑MB payloads or transfer ownership over the bus → wrong layer; store bulk, post an id / “invalidate.”
Need a real distributed lock / leader with safety guarantees → not pure BC; server or SharedWorker + careful design.
Supporting browsers before the BC floor (Safari < 15.4, IE) with no fallback story.

Green-light when…

Same origin; job is notify peers (logout, theme, list invalidated, “another tab edited X”).
Each tab can act locally from a small structured message + its own store/UI.
Wiring is local-apply → postMessage → close() on teardown; namespaced channel names.

Risk scan (deal-breakers)

Risk	What to check
Origin / name	Exact origin partitioning; exact channel string; typos = silent silence
Sender excluded	Local UI path exists without relying on self-echo
Order / delivery	Best-effort notify; no total order across agents; not a commit log
Closed channel	No post after `close()`; unmount cleanup doesn’t leave stale refs posting
Payload size	Clone cost; keep signals small
Support	Modern Chromium / Firefox / Safari 15.4+ baseline; fallback if needed
Truth	Server or durable client store owns authority; BC is a hint

Hands-on: two tabs (light lab)

Open two same-origin tabs to a page that constructs new BroadcastChannel("lab") and logs onmessage.
From Tab A, postMessage({ type: "ping", n: 1 }) — Tab B logs; Tab A does not log its own post.
Typo Tab B’s name to "Lab" — silence (exact match).
close() on Tab A’s channel, then post again — expect InvalidStateError.
Optional: open a third tab after posts — it does not replay history (no store).

Patterns (short)

// Logout
doLogoutLocal(); showLoggedOut(); ch.postMessage({ type: "logout" });

// Theme (persist separately)
applyTheme(v); localStorage.setItem("theme", v);
ch.postMessage({ type: "theme", value: v });

// Invalidate list (truth = server or IDB)
ch.postMessage({ type: "invalidate", resource: "orders" });
// peers: refetch or re-read store — do not trust the message alone