01 — Requirements
“Design a system that keeps state synchronized across multiple browser tabs.”
02 — API & Data Model
Define message protocols and shared state shape.
03 — Architecture
Map the sync topology: tabs channel leader shared store.
04 — BroadcastChannel
Send structured messages between tabs using the BroadcastChannel API.
05 — Message Protocol
Design message types: state-sync, action, heartbeat, election.
06 — Tab Registry
Track open tabs with heartbeat-based liveness detection.
07 — Leader Election
Implement the Bully algorithm for single-leader coordination.
08 — State Sync
Synchronize edits across tabs with immediate propagation.
09 — Conflict Resolution
Handle concurrent edits with last-write-wins, merge queue, or leader-decides strategies.
10 — localStorage Events
Use storage events as a cross-tab communication fallback.
11 — SharedWorker
Route messages through a single SharedWorker for large state payloads.
12 — Tab Lifecycle
Handle visibility states: visible, hidden, frozen, terminated.
13 — Background Throttling
Detect and compensate for timer throttling in hidden tabs.
14 — Memory Pressure
Discard and restore tab state under memory constraints.
15 — Lock API
Coordinate exclusive access to shared resources across tabs.