Progressive Web Apps (PWA)
Progressive Web Apps use service workers, a manifest, and HTTPS to deliver installable, offline-capable, app-like experiences from one codebase. They reach desktop and mobile users without the cost of separate native apps.
Best Practice: Progressive Web Apps (PWA)
Progressive Web Apps are web applications that use modern browser capabilities to feel like native apps while remaining on the open web. The core ingredients are a service worker (for offline caching and background tasks), a web app manifest (for installability and home-screen icons), and HTTPS. The term was coined by Frances Berriman and Alex Russell in 2015. PWAs let teams ship one installable, offline-capable, fast experience across desktop and mobile from a single codebase, avoiding the cost of separate native apps for many use cases.
Step-by-Step Implementation Guidance
- Serve the app over HTTPS, a hard requirement for service workers.
- Add a web app manifest with name, icons, theme color, and display mode.
- Register a service worker and define a caching strategy for the app shell.
- Add offline fallbacks for navigation and key data.
- Make the experience responsive and fast under flaky networks.
- Implement an install prompt and, where useful, push notifications.
- Audit with Lighthouse and test offline and install flows on real devices.
Common Mistakes Teams Make When Ignoring This Practice
- Caching aggressively with no update strategy, serving stale content.
- Treating the service worker as fire-and-forget and skipping cache versioning.
- A manifest with missing icons or wrong display mode, breaking install.
- No offline fallback, so the app simply errors without a network.
- Assuming feature parity with native without testing platform limits.
Tools and Techniques That Support This Practice
- Workbox for service worker generation and caching strategies.
- Lighthouse PWA audits.
- The Cache Storage API and IndexedDB for offline data.
- Web Push and the Notifications API.
How This Practice Applies to Different Migration Types
- Cloud Migration: Pair service-worker caching with a CDN for resilient global delivery.
- Database Migration: Use background sync to queue writes while a backend is in transition.
- SaaS Migration: Offer an installable PWA instead of maintaining separate native apps.
- Codebase Migration: Add PWA capabilities incrementally while modernizing the web app.
Checklist
- Served over HTTPS.
- Valid web app manifest with icons.
- Service worker with a defined cache strategy.
- Offline fallbacks for key flows.
- Cache versioning and update handling.
- Install and offline flows tested.
- Lighthouse PWA audit passes.