How would you use the BroadcastChannel API to sync application state across multiple open browser tabs?

Q: How would you use the BroadcastChannel API to sync application state across multiple open browser tabs?

**Target Audience:** Engineers preparing for JavaScript fundamentals interviews. **Difficulty:** Medium > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term: . Every claim below — including the self-exclusion behavior — was verified live in a real, current browser via the Claude Browser pane. `BroadcastChannel` is confirmed genuinely NOT implemented in jsdom. ## 1. Why This Even Matters — A Story First A group text message thread where everyone who has joined the thread genuinely sees every message someone else sends — but your own phone never re-displays your own message back to you as if it were new, since you already know you sent it. `BroadcastChannel` behaves exactly like that group thread: every OTHER tab tuned to the same channel name genuinely hears a posted message, but the sender's own tab never receives an echo of its own broadcast. ## 2. The Core Idea 📌 **Interview term:** `new BroadcastChannel(name

Tricky JavaScript Scenario #90: BroadcastChannel multi-tab updates

The problem

Question presented to candidate: "A user logs out in one browser tab. You need every OTHER open tab of your app to also immediately reflect the logged-out state. How would you notify them, without polling localStorage or a server round-trip?"

What a strong answer should cover:

📌 Interview term: BroadcastChannel — a real, built-in browser API letting any number of same-origin browsing contexts (tabs, windows, iframes, even workers) construct a channel with the SAME name string and genuinely send/receive messages between each other directly, entirely client-side.
📌 Interview term: the real, direct answer to the prompt — verified directly: a message posted on one BroadcastChannel instance is genuinely delivered to every OTHER instance constructed with the same channel name (new BroadcastChannel("app-state")) — the real mechanism to notify sibling tabs of a logout without polling localStorage or hitting a server.
📌 Interview term: the real, sharp, self-exclusion fact — verified directly: a channel genuinely does NOT receive its own posted message — a message handler registered on the SAME instance that called .postMessage() never fires for that message, confirmed directly by an empty self-receive log even while a SEPARATE instance on the identical channel name correctly received it.
📌 Interview term: .close() — verified directly: calling .close() on a channel and then attempting .postMessage() on it genuinely throws a real DOMException — a channel cannot be reused after closing.
A precise answer names the real, practical contrast with polling localStorage for the "storage" event: that older pattern genuinely works too (and fires cross-tab, also correctly excluding the tab that made the write) but requires structuring the "message" as a stored key-value pair; BroadcastChannel is the more direct, purpose-built, message-passing-shaped tool for this exact use case.

Clarifying questions expected:

None — this is a definitional/practical question; directly demonstrating the real, verified cross-instance delivery and self-exclusion behavior is the strong signal.

Code / implementation expected: Yes — real, separate BroadcastChannel instances on the same channel name, verified with cross-instance delivery, the self-exclusion behavior, and the closed-channel error.

messaging
tricky
real-world

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Engineers preparing for JavaScript fundamentals interviews. Difficulty: Medium

How to read this doc: Concepts are explained in plain language first, then tagged with 📌 Interview term:. Every claim below — including the self-exclusion behavior — was verified live in a real, current browser via the Claude Browser pane. BroadcastChannel is confirmed genuinely NOT implemented in jsdom.

1. Why This Even Matters — A Story First

A group text message thread where everyone who has joined the thread genuinely sees every message someone else sends — but your own phone never re-displays your own message back to you as if it were new, since you already know you sent it. BroadcastChannel behaves exactly like that group thread: every OTHER tab tuned to the same channel name genuinely hears a posted message, but the sender's own tab never receives an echo of its

The solution is hidden so you can try first

6 min read · 8 sections

Run the code

Edit the code and run it here. Each console line with an expected value becomes a test.

JavaScriptReal, direct proof: BroadcastChannel genuinely delivers messages between separate instances on the same channel name, but a channel never receives its own posted message — verified directly