Cross-tab messaging

BroadcastChannel

Baseline widely available
  • Chrome54
  • Edge79
  • Firefox38
  • Safari15.4

Features it needs

The broadcast-channel package wraps the same-named browser API and adds a fallback for browsers that lack it. BroadcastChannel lets any tab, window, or worker on the same origin post a message that every other one listening on that channel name receives, with no server and no polling a shared storage key.

When this applies

Sending a message from one open tab to other tabs on the same site.

The native approach

const channel = new BroadcastChannel("cart-updates");
channel.postMessage({ itemCount: 3 });
channel.onmessage = (event) => console.log(event.data);

MDN reference

When the dependency is still right

An answer that always says "the platform covers it" is worse than no answer. These are the cases where this one does not hold.

  • You need to reach a different origin, or a tab that isn't open yet. BroadcastChannel only reaches same-origin tabs that already exist.
  • You need delivery guarantees. A backgrounded or frozen tab may not receive the message until it resumes.
  • You need to support browsers old enough that the wrapper package's localStorage-event fallback is still doing real work.

Packages this covers