Two tabs may hold different snapshots of the same case. A same-origin message channel can tell other tabs that case 47 changed, but delivery is transient and depends on each context being open and listening. It does not replace a server version check or a fresh read. Send only a scoped invalidation identifier and version hint. A receiving tab should discard or mark its cached record stale, fetch the current authorized representation, and preserve unsaved local edits until the user chooses how to reconcile. A message from another tab is not permission to display private content in the current account context.
Make this comfortable
Cross-Tab Invalidation and Version Checks
Working case
Tab A changes case 47 from Open to Resolved. Tab B is on the same origin with an unsaved note and an old version number. Tab A broadcasts a case-changed hint. Tab B does not overwrite its note with the hint; it marks the visible case status stale and fetches the current server version. A conditional save from Tab B receives a version conflict, and the editor offers a field comparison. If Tab B was closed during the broadcast, it still revalidates on focus or route return. A logout message clears local private caches but the server remains the authority for sessions.
Implementation boundary
function shouldRefresh(currentVersion, notice) {
return notice.caseId === 47 && notice.version > currentVersion;
}
console.log(shouldRefresh(6, { caseId: 47, version: 7 }));
// Output: trueThe predicate handles one case; a real listener also validates notice shape and account scope. A BroadcastChannel or storage event can carry the hint in supported contexts, but neither is a durable queue and neither guarantees an inactive tab heard the change. On focus and before sensitive mutation, revalidate against the server. Keep local unsaved fields separate from fetched server state. Include a generation token to ignore late responses for a previous account or route. Close listeners on teardown. A session transition should clear cached private data in every open context, while each request still relies on server-side authorization.
Cost and boundaries
Broadcasting one short hint is O(1) per change, and invalidating a keyed cache entry is O(1) on average. Refetching n open tabs can cause O(n) network requests; debounce repeated notices and avoid broadcasting every keystroke. Keeping full records in cross-tab messages increases transfer, privacy exposure, and merge ambiguity. Focus-based revalidation adds latency after tab return but catches missed messages. Measure stale-window duration and duplicate fetches under multiple tabs. Cross-device consistency remains a server synchronization problem, not a browser channel feature.
Failure trace
A developer sends a whole case object through a channel and Tab B applies it directly to the editor. Tab B loses an unsaved note, and a tab still signed into an old account displays content it should not see. Send a narrow hint, scope it to the current session, and fetch authorized current data. Another defect assumes a closed tab received every message, so it never revalidates on return. Test tabs opened after the change and tabs suspended for an hour. Messages improve responsiveness; conditional writes prevent the lost update.
Verification
- Unsaved edits survive a cross-tab refresh.
- A tab that missed a message revalidates on return.
- Logout clearing is paired with server authorization on every request.
Practice drill
Open two tabs on case 47 with version 6. Save version 7 in Tab A while Tab B contains an unsaved note. Confirm the note remains and the server status refreshes. Close Tab B before the next change and reopen it; it must recover without a missed message. Log out in Tab A and verify private cached data clears in Tab B, then try a stale API request and confirm server rejection. Flood 62 hints for the same version and measure deduplicated reads and listener cleanup.
Decision note
Broadcast invalidation hints, then let an authorized server read and versioned write establish truth.
Common Mistakes
- Treating a browser message as a durable event log.
- Broadcasting whole private records between tabs.
- Applying a new snapshot over unsaved edits without a conflict path.
Connected lessons
Cross-Tab and Offline Data Coordination; Offline Outbox, Idempotency, and Replay; Snapshot, Delta Cursor, and Gap Recovery; Collaborative Conflicts and Presence Expiry; Client Cache Keys and Invalidation; Conditional Writes and Lost-Update Prevention; Browser Security and Data Stewardship.
Apply and check
Build Project: multi-tab offline case review and review Web Development: operations and sync decisions quiz.
Further connections
web-tech
web-development