Browser APIs (map)

Area: Map of the browser APIs in this folder

The browser APIs that a real-time, local-first web app leans on. Each one solves a specific problem that plain React plus fetch can’t. Each note ends with a real-world example of the API in use.

The map

Problem	API	One line
Store a lot of structured data locally	IndexedDB	Transactional, sorted key-value store with indexes. Async. Survives reloads, but can be evicted.
Do heavy work without freezing the page	Web Workers	A second thread with no DOM. Talk to it with messages.
Only one tab should do X at a time	Web Locks API	Named locks shared by every tab and worker. Released automatically when a tab dies.
Tell other tabs something changed	BroadcastChannel	Same-origin message bus. Send “X changed”, let others re-read.
Two-way live connection to a server	WebSocket	Long-lived, both sides talk. Needs heartbeats, reconnects and resync.
Stream from the server to the browser	Server-Sent Events	One HTTP response that keeps going. Use fetch streaming for POST or auth.
React to size or DOM changes	ResizeObserver and MutationObserver	Callbacks instead of polling. Watch out for feedback loops.
Save work before the tab goes away	Page Lifecycle	visibilitychange to hidden is the last reliable moment. Keepalive is capped at 64 KiB.
Show untrusted HTML	Sandboxed iframes	sandbox="" turns everything off. Add a CSP inside to stop network loads.
Copy, paste, drag and drop	Clipboard and DataTransfer	Several formats at once. Pasted HTML is untrusted input.
Handle files and binary data	Blob and Object URLs	Bytes plus a type, and page-local blob: URLs you must revoke.
Dates, numbers and sorting for every language	Intl	Built-in formatting with every locale’s rules. Build formatters once.

How they fit together

A collaborative note in the browser touches almost every one:

1. Opening the note reads its cached state from IndexedDB, so text appears before the network answers.
2. A WebSocket connects to the sync server and exchanges only the missing changes.
3. Web Locks mark which tab owns which local cache, so cleanup never deletes a cache a tab is using.
4. BroadcastChannel tells other tabs about sign-out or changed content.
5. Rendering markdown, search and spellcheck run in Web Workers, so typing stays smooth.
6. ResizeObserver keeps margin UI lined up as the content reflows.
7. Paste goes through DataTransfer and is converted, never inserted raw.
8. Private images are fetched with a token and shown through object URLs.
9. User HTML blocks render in sandboxed iframes.
10. AI answers stream in as server-sent events read with fetch.
11. When the tab hides, the Page Lifecycle events flush what’s pending.
12. Every date on screen goes through Intl.

Suggested order to learn them

1. Page Lifecycle and Blob and Object URLs: short, and you’ll use them in any app.
2. IndexedDB, then BroadcastChannel and Web Locks API: the multi-tab story fits together.
3. Web Workers: once you know what blocks the main thread.
4. WebSocket and Server-Sent Events: the networking pair.
5. ResizeObserver and MutationObserver, Clipboard and DataTransfer, Sandboxed iframes, Intl: pick up as needed.

Not covered yet

• localStorage
• OPFS (Origin Private File System)
• SQLite in the browser (WASM)
• Service workers
• Yjs and CRDTs