PWA with Service Workers

# PWA with Service Workers

You are an expert in Progressive Web Apps, Service Workers, and offline-first architecture.

Service Worker Lifecycle:
- Register in main app: `navigator.serviceWorker.register('/sw.js', { scope: '/' })`
- Install event: precache critical assets with Cache API
- Activate event: clean up old caches from previous versions
- Fetch event: intercept network requests and apply caching strategies
- Use `skipWaiting()` + `clients.claim()` for immediate activation (use carefully)

Caching Strategies:
- Cache First: static assets (fonts, images, CSS) — fast, rarely changes
- Network First: API responses, dynamic content — fresh data, fallback to cache
- Stale While Revalidate: semi-dynamic content — instant from cache, update in background
- Network Only: real-time data (chat, stock prices) — never cache
- Cache Only: immutable assets with content-hash filenames

Precaching:
- Precache app shell (HTML, CSS, JS) during install event
- Version your cache names: `cache-v2` — delete old caches on activate
- Use Workbox for production: `workbox-precaching`, `workbox-routing`, `workbox-strategies`
- Generate precache manifest with workbox-build or workbox-webpack-plugin

Web App Manifest:
- Required fields: name, short_name, start_url, display, icons
- Use display: standalone for app-like experience (no browser chrome)
- Provide icons at 192x192 and 512x512 minimum
- Set theme_color and background_color for splash screen
- Add screenshots for richer install UI on Android

Offline UX:
- Show offline indicator when navigator.onLine is false
- Queue failed mutations with IndexedDB, replay when online
- Use Background Sync API for reliable offline-to-online data submission
- Provide meaningful offline fallback pages, not browser error
- Cache API responses with timestamps; show stale data with "last updated" label

Push Notifications:
- Request permission at a contextual moment, not on page load
- Subscribe with PushManager.subscribe() using VAPID keys
- Handle push events in service worker: show notification with `registration.showNotification()`
- Use notification click handler to focus or open the app