Frontend5 min read

Service Workers & PWA

Build Progressive Web Apps with service workers - offline caching, push notifications, background sync, and Workbox for cache strategy management.

Service WorkerPWAOfflinePush NotificationsWorkbox

skill: Service Workers & PWA category: Frontend tags: [Service Worker, PWA, Offline, Push Notifications, Workbox] readingTime: 5

Service workers are a programmable network proxy in the browser - every request from your app goes through the service worker first. This enables offline-first apps, push notifications, and background sync. Use Workbox instead of writing cache logic from scratch - it handles cache versioning and update strategies correctly.

Workflow

Register a service workerService workers must be registered from the main page. They update only when the service worker file changes - important for cache invalidation on deploy.
Configure Workbox caching strategiesWorkbox provides correct implementations of cache strategies: Cache-First, Network-First, StaleWhileRevalidate - without the edge cases of hand-written service workers.
Implement push notificationsPush notifications re-engage users even when the app is closed. Web Push uses the VAPID protocol - no native app required.
Add Web App Manifest for install promptThe Web App Manifest enables "Add to Home Screen" - making the PWA installable on iOS and Android like a native app.
Handle offline gracefullyOffline-first means the app works without a network connection. Show offline state, queue writes for background sync, and provide cached content.

Output Format

PWA: Workbox via Vite-PWA for cache strategies, push notifications with VAPID, Web App Manifest for install, background sync for offline writes.

VitePWA: runtimeCaching with CacheFirst/NetworkFirst/StaleWhileRevalidate
Manifest: name + icons + display: standalone
Push: pushManager.subscribe + service worker push event
Offline: online/offline events + background sync
Update: waiting.postMessage(SKIP_WAITING) + reload

Examples

Input

Output

Edge Cases & Gotchas

Safari push notification limitations - iOS 16.4+ supports Web Push, but requires user to add app to home screen first. Older iOS does not support push at all. Feature-detect before prompting.
Service worker scope - A service worker at /dashboard/sw.js can only control pages under /dashboard/. Place sw.js at the root (/) to control all pages.
HTTPS requirement - Service workers require HTTPS (or localhost). Staging environments need a real certificate - self-signed certs don't work for service worker registration.
Update loop bug - If the service worker itself is cached (Cache-Control: max-age), the browser serves the old SW forever. Always serve sw.js with Cache-Control: no-cache.

When to Break These Rules

Skip service workers for server-rendered apps (Next.js, Astro) where content is fresh per-request - caching SSR responses introduces stale-content bugs.
Use native mobile apps instead of PWAs for features requiring deep OS integration (Bluetooth, NFC, complex background processes) that Web APIs don't fully expose.

Reference Files

https://developer.chrome.com/docs/workbox/
https://web.dev/progressive-web-apps/