PWA Development Skill Purpose: Build Progressive Web Apps that work offline, install like native apps, and deliver fast, reliable experiences across all devices. Core PWA Requirements Web App Manifest Required Fields Enhanced Manifest (Full Features) Manifest Checklist [ ] name and short name defined [ ] start url set (use query param for analytics) [ ] display set to standalone or fullscreen [ ] Icons: 192x192 and 512x512 minimum [ ] Maskable icon included for Android adaptive icons [ ] theme color matches app design [ ] background color for splash screen [ ] Screenshots for richer install UI (optional) [ ] Shortcuts for quick actions (optional) Service Worker Patterns Basic Service Worker Registration Caching Strategies Strategy Selection Guide Strategy Use Case Description Cache First Static assets (CSS, JS, images) Check cache, fall back to network Network First API responses, dynamic content Try network, fall back to cache Stale While Revalidate Semi static content (avatars, articles) Serve cache immediately, update in background Network Only Non cacheable requests (analytics) Always use network Cache Only Offline only assets Only serve from cache Cache First (Offline First) Network First (Fresh First) Stale While Revalidate Workbox (Recommended) Why Workbox? Battle tested caching strategies Precaching with revision management Background sync for offline forms Automatic cache cleanup TypeScript support Installation Workbox with Vite Workbox Manual Service Worker Offline Experience Offline Page Offline Detection Background Sync (Queue Offline Actions) App Like Features Install Prompt Detecting Standalone Mode Push Notifications Share Target Performance Optimization Critical Rendering Path Image Optimization Code Splitting Testing PWA Lighthouse Audit Manual Testing Checklist [ ] Installability [ ] Install prompt appears on desktop Chrome [ ] Can be added to home screen on mobile [ ] App opens in standalone mode after install [ ] Offline Support [ ] App loads when offline (airplane mode) [ ] Cached pages display correctly [ ] Offline fallback page shows for uncached routes [ ] Background sync works when coming back online [ ] Performance [ ] First Contentful Paint < 1.8s [ ] Largest Contentful Paint < 2.5s [ ] Time to Interactive < 3.8s [ ] Cumulative Layout Shift < 0.1 [ ] Service Worker [ ] SW registers successfully [ ] Static assets cached on install [ ] SW updates correctly (new version) [ ] No stale cache issues [ ] Manifest [ ] All required fields present [ ] Icons display correctly [ ] Theme color applied [ ] Splash screen shows on launch Testing Service Worker Updates Project Structure Common Mistakes Mistake Fix Missing maskable icon Add icon with "purpose": "maskable" No offline fallback Create offline.html and cache it Cache never expires Use ExpirationPlugin with Workbox SW caches too aggressively Use appropriate strategies per resource type No update mechanism Implement skipWaiting() + reload prompt Broken install prompt Ensure manifest meets all criteria No HTTPS in production Configure SSL certificate Large cache size Set maxEntries and maxAgeSeconds Stale API responses Use NetworkFirst for dynamic data Missing start url tracking Add query param: /?source=pwa PWA Development Checklist Before Launch [ ] HTTPS configured (production) [ ] Manifest complete with all required fields [ ] Icons in all required sizes (192, 512, maskable) [ ] Service worker registered and working [ ] Offline page created and cached [ ] Cache strategies defined for all resource types [ ] Install prompt handling implemented [ ] Lighthouse PWA audit passes After Launch [ ] Monitor cache sizes [ ] Test SW updates don't break app [ ] Track PWA installs via analytics [ ] Test on multiple devices/browsers [ ] Monitor Core Web Vitals [ ] Set up push notification flow (if needed) Framework Specific Guides Next.js Create React App Vite (Any Framework) See Workbox with Vite section above for configuration. Quick Reference Caching Strategy Cheat Sheet Manifest Minimum Requirements Service Worker Lifecycle

pwa-development