PWA Fundamentals: Manifest, Installability & Offline UX
Learn the interview-ready mental model, practical trade-offs, and production patterns for this web fundamentals topic.
Topic content
Progressive Web Apps combine a Web App Manifest for installability, a Service Worker for offline capability and caching, and thoughtful UX design. Success depends on clear boundaries between static shell, dynamic data, and safe update behavior.
The manifest is the app icon and home screen metadata. The Service Worker is the background engine that makes it work offline and fast. The real challenge is designing an experience that feels native while gracefully handling network changes and version updates.
1Web App Manifest
Defines how the app appears when installed: name, icons, display mode (standalone/minimal-ui), start_url, theme_color, etc.
{
"name": "My App",
"short_name": "App",
"icons": [{ "src": "icon-192.png", "sizes": "192x192" }],
"start_url": "/",
"display": "standalone",
"theme_color": "#000000"
}2Installability Criteria
Requires HTTPS, a valid manifest, and a service worker controlling the page. Install prompts vary by browser and platform.
3Offline UX & Caching Strategy
Separate app shell (aggressively cached) from dynamic data (network-first or stale-while-revalidate). Design clear offline states and graceful degradation.
4Update Lifecycle
Manage service worker activation carefully to avoid stale shells. Use versioned caches and consider user prompts for updates.
- ✓Manifest defines install identity and appearance
- ✓Service Worker powers offline capability and caching
- ✓Separate app shell (cache-first) from dynamic data
- ✓Design intentional offline experiences and graceful degradation
- ✓Manage service worker updates carefully to avoid stale clients
- ✓PWA quality is about trust and reliability, not just install buttons
- ✓Test offline flows and update scenarios in real conditions