Cross-Tab Communication
Keeping several open tabs of the same app consistent, best done by broadcasting small notifications and letting each tab re-read the truth.
Cross-tab communication is how several open tabs or windows of the same site tell each other that something changed. Users open the same app in several tabs constantly. Without coordination, an edit in one tab leaves the others showing stale data, and two tabs can make conflicting changes, each unaware of the other.
The browser offers a few same-origin channels (see Same-Origin Policy):
BroadcastChannel: a named pub/sub channel. Any tab can post a message, and every other tab subscribed to the name receives it. It is the simplest and most direct option.- The
storageevent: fires in other tabs whenlocalStoragechanges. Older and cruder, but universally supported. SharedWorker: one worker shared by all tabs, able to hold a single connection or state on their behalf.- Web Locks (
navigator.locks): a named mutex across tabs, which is how a group of tabs performs Leader Election so that only one holds the WebSocket or runs the poller.
The design lesson is to broadcast a notification, not the data. A message saying "conversation 42 changed" is better than one carrying the new contents, for several reasons. Messages are not persisted, so a tab opened a second later never sees them. A frozen tab processes them late, possibly out of order. Two tabs can broadcast conflicting payloads. A notification that only wakes the receiver, which then re-fetches from the server, avoids all of these: whatever the receiver reads is current, and duplicates are harmless because re-reading is idempotent. The same reasoning lies behind "thin" webhooks that carry an ID and expect the receiver to call back.
A notification channel is an optimization, not a guarantee. It makes the common case instant. A slow poll, or a re-sync on visibilitychange, covers the cases where the message never arrived, which the channel by design cannot report. The result is Eventual Consistency within one browser: tabs converge quickly in the usual case and eventually in every case.
It also helps to identify who made a change. A tab receiving its own broadcast should ignore it, and a UI that offers "stop" or "undo" for an action should check whether the viewer is the one who started it, not merely whether it is running.
See also6
Iframe
A whole web page embedded inside another, the web's main isolation boundary for ads, payments, and widgets, and the messaging and sandboxing rules that govern it.
Web Platform12 connections
Tabs
A row of labels that switch between panels of content occupying the same space, borrowed from paper folder tabs, suited to parallel sections viewed one at a time, and governed by a specific keyboard pattern.
Design & Interface12 connections
Optimistic UI
Updating the UI as if a server request has already succeeded, before the server has actually responded.
Web Platform21 connections
Service Worker
A background script the browser runs between a page and the network, able to intercept requests even when no page is open.
Web Platform12 connections
Message Queue
A buffer that decouples a producer from a consumer in time, so neither has to be up, fast, or reachable at the same moment.
Data & Content14 connections
Web Storage
The browser's built-in ways to keep data on the user's device, from the simple string store localStorage to the transactional database IndexedDB, and their limits on size, persistence and security.
Web Platform12 connections
Linked from6
- Back-Forward CacheWeb Platform
Browsers keeping a whole page frozen in memory when you navigate away, so pressing Back restores it instantly, unless something on the page makes it ineligible.
- Background Tab ThrottlingWeb Platform
Browsers deliberately slow, freeze, or discard pages that are not visible, so code that assumes it keeps running in the background will be wrong.
- IframeWeb Platform
A whole web page embedded inside another, the web's main isolation boundary for ads, payments, and widgets, and the messaging and sandboxing rules that govern it.
- Leader ElectionData & Content
The process a distributed system uses to pick one node to coordinate, and to notice and replace it when it dies.
- State ManagementWeb Platform
How a front-end application keeps track of the data that changes as people use it, and decides where each piece lives, from local component state to global stores to server caches.
- Web StorageWeb Platform
The browser's built-in ways to keep data on the user's device, from the simple string store localStorage to the transactional database IndexedDB, and their limits on size, persistence and security.