Part 21 — Browser APIs

Revision notes.

API	Purpose	Note
`fetch`	HTTP requests	promise-based; doesn't reject on 4xx/5xx
`localStorage`/`sessionStorage`	key-value string storage	sync, ~5MB
`IndexedDB`	large structured client DB	async, transactional; use a wrapper (idb)
`Service Worker`	background proxy for caching/offline/push	HTTPS only; enables PWAs
`Notification`	system notifications	needs permission
`Geolocation`	user location	`navigator.geolocation.getCurrentPosition`
`Clipboard`	copy/paste	`navigator.clipboard` (async, secure ctx)
`WebSocket`	full-duplex realtime	`new WebSocket(url)`
`WebRTC`	peer-to-peer media/data	complex; signalling required
`Web Workers`	run JS on a separate thread	no DOM; message-passing
`SharedWorker`	worker shared across tabs
`BroadcastChannel`	messaging between tabs/workers	same origin
`Canvas` / `WebGL`	2D/3D drawing	`getContext("2d")`
Web Audio / `<video>`	audio graph / media control
Drag & Drop	`dragstart`/`drop` events
`IntersectionObserver`/`ResizeObserver`/`MutationObserver`	efficient observation	Part 17

// Web Worker — offload heavy CPU work off the main thread
const worker = new Worker("worker.js");
worker.postMessage({ nums });
worker.onmessage = (e) => console.log("result", e.data);
// worker.js: onmessage = (e) => postMessage(heavyCompute(e.data.nums));

// Service Worker registration
if ("serviceWorker" in navigator) navigator.serviceWorker.register("/sw.js");

Workers are the answer to "how do I do CPU-heavy work without freezing the UI?" — they run in a separate thread and communicate via messages (structured-clone serialized). 🎯