Web Development6 min read

Progressive Web Apps

Turn any web app into an installable, offline-capable app with a Web App Manifest and Service Worker - bridging the gap between web and native.

PWAService WorkerWeb App ManifestOfflineCache API

skill: Progressive Web Apps category: Web Development tags: [PWA, Service Worker, Web App Manifest, Offline, Cache API] readingTime: 6

PWAs are the right choice when you want app-store-like installation and offline support without native development. For truly native capabilities (background sync, NFC, Bluetooth) or app store distribution, use React Native or native Swift/Kotlin instead.

Workflow

Add a Web App ManifestThe manifest tells browsers your app's name, icons, colors, and display mode - required for the 'Add to Home Screen' install prompt.
Register a Service WorkerThe Service Worker is a background script that intercepts network requests - enabling caching, offline support, and push notifications.
Cache assets with the right strategyDifferent resources need different caching strategies - app shell should always be served from cache, API data should be network-first.
Enable push notificationsWeb Push re-engages users even when the browser is closed - requires VAPID keys and a push service subscription.
Use Workbox to manage cachingWorkbox is Google's Service Worker library - it handles cache versioning, cleanup, and strategy boilerplate so you don't write raw fetch interceptors.

Output Format

Installable PWA with manifest, service worker, and appropriate caching strategies per resource type.

public/
├── manifest.json       # App identity
├── sw.js               # Service Worker (or generated by Workbox)
├── icon-192.png
└── icon-512.png

Caching strategies:
  App shell     → Cache First (precached)
  API data      → Network First (fresh, fallback to cache)
  Images/assets → Stale-While-Revalidate

Examples

Input

Output

Edge Cases & Gotchas

Safari PWA limitations - iOS Safari doesn't support Web Push Notifications before iOS 16.4, and has limited background sync support. Test on real iOS devices.
Cache invalidation on deploy - Service Workers serve old cached versions until the SW file itself changes. Workbox's precaching handles versioning via content hashes; manual caches need a cache version bump.
HTTPS requirement - Service Workers only work on HTTPS (or localhost). Ensure your production server has a valid SSL certificate before testing PWA features.
SW update lifecycle - A new SW waits until all tabs are closed before activating. Call skipWaiting() and clientsClaim() in the SW to activate immediately on update - but warn users the page will reload.

When to Break These Rules

Use React Native or Flutter when you need deep native APIs (camera, NFC, background location, Bluetooth) - PWAs have limited access to these.
Use a native app when App Store discovery and App Store review compliance are business requirements.

Reference Files

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