Syncing Component State Across Tabs with Service Workers
summary
A demo shows a concrete way to keep React component state identical across tabs without WebSockets by using a service worker message bus that receives state updates and broadcasts them. Implementation uses clients.matchAll to enumerate tabs, clients.matchAll + clientId filter to avoid echoing back to the sender, postMessage to push state, and a client-side listener plus post-to-worker calls on every increment/decrement. Demo is built, runs in modern browsers (not IE), and code is posted.
AI-written summary · about
chapters (8)
- 0:00Intro
- 0:27About me
- 0:54Syncing Component State
- 1:35Service Workers
- 1:50Demo
- 2:46Service Worker
- 4:05Messaging Listener
- 4:46Recap
related talks
36mMultithreading in React: A guide to Web Workers
29mTyler Clark - React to Web Workers
22mPWA patterns for window and service worker communication
26mBrowsers behind your back
34mParallel computing in React
47mAdventures in Rendering Off the Main Thread
31mDecoupled, Not Disconnected: State and Sync in Micro-Frontends
35mBeyond The Tab: Executing JavaScript Across Browser Contexts