Progressive Web App development with Service Workers, offline support, and app-like behavior. Use for caching strategies, install prompts, push notifications, background sync. Activate on "PWA", "Service Worker", "offline", "install prompt", "beforeinstallprompt", "manifest.json", "workbox", "cache-

Progressive Web App Expert Build installable, offline capable web apps with Service Workers, smart caching, and native like experiences. When to Use This Skill Making a web app installable on mobile/desktop Implementing offline functionality Setting up Service Worker caching strategies Handling install prompts ( beforeinstallprompt ) Background sync for offline first apps Managing PWA update flows Creating web app manifests When NOT to Use This Skill Native app development → Use React Native, Flutter, or native SDKs General web performance → Use Lighthouse/performance auditing tools Server side rendering issues → Use Next.js/framework specific docs Push notifications only → Consider dedicated push notification services Simple static sites → PWA overhead may not be worth it Core Concepts What Makes a PWA Installable 1. HTTPS (or localhost for dev) 2. Web App Manifest with required fields 3. Service Worker with fetch handler 4. Icons (192×192 and 512×512 minimum) The PWA Stack Web App Manifest Complete manifest.json Display Modes Mode Description fullscreen No browser UI, full screen standalone App like, no URL bar (recommended) minimal ui Some browser controls browser Normal browser tab Link in HTML Service Worker Basics Registration Basic Service Worker Structure See: references/service worker patterns.md for caching strategy implementations Caching Strategies Strategy Best For Tradeoff Cache First Static assets, fonts, images Stale until cache updated Network First API data, user content Slower, needs connectivity Stale While Revalidate Balance freshness/speed Background updates Network Only Auth, real time data No offline support Cache Only Versioned assets Never updates See: references/service worker patterns.md for full implementations Install Prompts Handle the beforeinstallprompt event to show a custom install UI: See: references/install prompt.md for full usePWAInstall hook and component Offline Experience Key patterns: Offline page fallback for navigation failures useOnlineStatus hook to detect connectivity Offline banner to inform users See: references/offline handling.md for implementations Background Sync Queue actions while offline, execute when connectivity returns: See: references/background sync.md for full IndexedDB integration Update Flow Notify users when a new version is available: See: references/update flow.md for usePWAUpdate hook and update strategies Next.js Integration Options for Next.js PWA: 1. next pwa Works with standard Next.js server 2. Custom SW Required for output: 'export' (static sites) 3. Workbox CLI Generate SW after build See: references/nextjs integration.md for detailed configurations Quick Reference Task Solution Check if installed window.matchMedia('(display mode: standalone)').matches Force SW update registration.update() Clear all caches caches.keys().then(keys = keys.forEach(k = caches.delete(k))) Check online navigator.onLine Get SW registration navigator.serviceWorker.ready Skip waiting self.skipWaiting() in SW Take control self.clients.claim() in SW Testing PWA Chrome DevTools 1. Application tab → Manifest, Service Workers, Cache Storage 2. Lighthouse → PWA audit 3. Network → Offline checkbox to simulate Debug Checklist [ ] Manifest loads (Application → Manifest) [ ] SW registered (Application → Service Workers) [ ] Cache populated (Application → Cache Storage) [ ] Install prompt fires (Console for beforeinstallprompt) [ ] Offline page works (Network → Offline) [ ] Update flow works (trigger update, verify prompt) References Detailed implementations in /references/ : service worker patterns.md Caching strategy implementations install prompt.md usePWAInstall hook and install component offline handling.md Offline page, status hooks, banners background sync.md Background sync with IndexedDB update flow.md Update detection and user prompts nextjs integration.md Next.js PWA configuration options

pwa-expert