BroadcastChannel API: Browser Support, Features, Use Cases

What is the BroadcastChannel API?

The BroadcastChannel API is a JavaScript interface defined in the WHATWG HTML Living Standard. It creates a one-to-many message bus between browsing contexts that share the same origin. Pages, iframes, web workers, shared workers, and service workers can all join a named channel and receive messages posted to it.

Which browsers does the BroadcastChannel API support?

The BroadcastChannel API works in every modern Chromium, Gecko, and WebKit browser, while Internet Explorer and Microsoft Edge Legacy never added the constructor.

What are the key features of the BroadcastChannel API?

The BroadcastChannel API gives JavaScript a small, easy-to-use pub/sub bus for same-origin tabs, frames, and workers, with structured cloning of any serializable payload.

• Named channels: The BroadcastChannel constructor takes a string. Every context that constructs a channel with the same name joins the same bus.
• postMessage method: postMessage broadcasts any structured-cloneable value to every BroadcastChannel that shares the channel name, except the sender itself.
• message event: Receivers attach an onmessage handler or an addEventListener('message') call, and each delivery includes the cloned data on event.data.
• close method: Calling close on a channel detaches the receiver. The channel goes away once every BroadcastChannel for that name has closed.
• Structured cloning: Payloads can include strings, numbers, arrays, plain objects, Maps, Sets, ArrayBuffers, Blobs, and File objects. Functions, DOM nodes, and class prototypes do not survive the clone.
• Same-origin scope: Only browsing contexts with the same origin and storage key receive messages, so a malicious site on a different origin cannot eavesdrop.
• Worker-friendly: Web workers, shared workers, and service workers can all construct a BroadcastChannel and join the same bus as the foreground page.

Feature-detect the constructor before you reach for it; the snippet below ships in production code on browsers that lack the API:

// Feature detect BroadcastChannel before constructing one.
if (typeof BroadcastChannel !== 'undefined') {
    const runs = new BroadcastChannel('test-runs');

    runs.postMessage({ status: 'started', runId: 1842 });

    runs.onmessage = (event) => {
        console.log('Run update:', event.data);
    };
} else {
    console.warn('BroadcastChannel not supported. Falling back to localStorage events.');
}

What are the common use cases of the BroadcastChannel API?

Web apps reach for the BroadcastChannel API any time the same user has multiple tabs open and one tab needs to tell the others about a state change.

• Synchronized logout across tabs: When the user signs out in one tab, the auth handler posts a logout event so every other tab from the same origin clears local state and routes back to the login screen.
• Live theme and language updates: Switching dark mode or language in one tab posts an event that every other tab subscribes to and re-renders without a full reload.
• Cross-tab cache invalidation: A successful POST in tab A broadcasts a "stale: orders" event, so tab B refetches the orders endpoint instead of serving a stale cached response.
• Service worker coordination: A service worker waits for skipWaiting messages from an active page, then activates and refreshes every connected tab through the same channel.
• Multi-tab form autofill: A single form draft synced through BroadcastChannel lets the user start typing in one tab and finish in another without losing input.
• Real-time dashboards: Slack, Trello, Notion, and Figma all use a same-origin tab bus to keep notifications, presence indicators, and unread counts consistent across every open workspace tab.

What are the known issues with the BroadcastChannel API?

BroadcastChannel is well established, but production code still has to plan around several real constraints that the spec is explicit about.

• Same-origin only: BroadcastChannel checks the origin and storage key on every delivery. A page on app.example.com cannot exchange messages with a page on payments.example.com, even though both are subdomains of example.com.
• Same-device, same-browser only: The bus runs inside one browser process tree on one device. It is not a server-sent or peer-to-peer transport, so it cannot push state to a different machine, a different browser profile, or a different incognito session.
• Structured-clone limits: Functions, DOM nodes, getters, and class prototypes do not survive postMessage. Sending a class instance lands as a plain object on the receiving side, which surprises code that calls instance methods after delivery.
• No delivery acknowledgement: postMessage returns immediately. There is no built-in delivered event or retry, so coordinating critical state still needs an idempotent receiver and a reconcile step on tab focus.
• Older Safari fallback: Safari versions before 15.4 do not include the BroadcastChannel constructor. Sites that still see iOS 14 traffic need a localStorage storage-event fallback or a small polyfill.
• Edge Legacy and IE blank spot: Microsoft Edge before 79 and every Internet Explorer build skip the API entirely. Enterprise Windows fleets on those browsers need a fallback path.
• Jest test environment: jsdom does not implement BroadcastChannel, so unit tests that hit the API need a manual mock or a Node 16+ polyfill before they can run green.

In my experience, the most common production bug is assuming structured cloning preserves class instances. A receiver that calls instance.refresh() after a postMessage works in development with a single tab and breaks the moment a second tab joins the channel. Always serialize to plain objects and rehydrate on the receiver side.

Citations

All BroadcastChannel API version numbers and platform notes in this guide come from these primary sources:

• WHATWG HTML Living Standard - Web Messaging: html.spec.whatwg.org/multipage/web-messaging.html
• MDN Web Docs - Broadcast Channel API: developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API
• MDN Web Docs - BroadcastChannel interface: developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel
• MDN Web Docs - BroadcastChannel.postMessage: developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel/postMessage
• WebKit blog - New WebKit Features in Safari 15.4: webkit.org/blog/12445/new-webkit-features-in-safari-15-4
• Chrome for Developers - BroadcastChannel API: developer.chrome.com/blog/broadcastchannel
• Mozilla Hacks - BroadcastChannel API in Firefox 38: hacks.mozilla.org/2015/02/broadcastchannel-api-in-firefox-38
• MDN Browser Compat Data - BroadcastChannel.json: github.com/mdn/browser-compat-data/blob/main/api/BroadcastChannel.json
• Apple Developer - Safari 15.4 Release Notes: developer.apple.com/documentation/safari-release-notes/safari-15_4-release-notes