Progressive Web Apps: Native-like Experience on the Web
Service Workers and Offline Capabilities
Service Worker: JavaScript running in background (separate thread). Lifecycle: install (download assets), activate (cache cleanup), fetch (intercept requests). Example: navigator.serviceWorker.register('/sw.js'). Service Worker caches assets on install. Cache strategies: (1) Cache-first (offline page served from cache, network update), (2) Network-first (try network, fallback to cache), (3) Stale-while-revalidate (serve cache, update in background). Example: Cache-first for images (static content). Network-first for API calls (fresh data important). Offline support: background-sync (queue failed requests, retry when online). Example: user submits form offline, request queued, automatically sent when online. Background sync API: tag requests, retry on schedule (useful for push notifications). ServiceWorkerContainer: register/unregister service workers. Update check: background periodically checks for updates (user notified). Push notifications: server sends notification via service worker (appears even if app closed). Permission: user grants notification access (browser dialog). Scope: service worker applies to pages matching URL pattern. Example: /service-worker.js registered at / applies to all routes. Precaching: assets downloaded on install (offline availability guaranteed). Cache versioning: sw.js version bumped, cache invalidated on update.
Web App Manifest and Installation
Web App Manifest: JSON file describes app (name, icons, colors, start URL). Example: { "name": "My App", "short_name": "App", "start_url": "/", "display": "standalone", "theme_color": "#000", "background_color": "#fff", "icons": [...] }. Standalone mode: app runs full-screen (no address bar, like native app). Display modes: browser (normal tab), standalone (full-screen), fullscreen (immersive). Installation: add to home screen (iOS, Android). PWA installability criteria: (1) HTTPS, (2) service worker, (3) manifest file, (4) responsive design, (5) metadata (title, description). Browser support: Chrome 39+, Edge 79+, Firefox (limited), Safari (limited). Installation trigger: browser shows "Install" prompt, user clicks, app added to home screen. Launch: icon on home screen opens app (full-screen, fast). Performance: PWA startup ~500ms-2s (faster than downloading from app store, no store review delay). Metadata: name, icons auto-populated from manifest (consistent branding). Update mechanism: manifest change triggers browser to check for updates (no forced restart like native apps).
Performance Optimization and Caching Strategies
Performance metrics: FCP (First Contentful Paint, <1.8s), LCP (Largest Contentful Paint, <2.5s), CLS (Cumulative Layout Shift, <0.1). PWA targets: <2s first load, <1s subsequent loads. Caching strategy selection: (1) Images: cache-first (change infrequently), (2) CSS/JS: cache-first with version hash, (3) HTML: network-first (always fresh), (4) API: network-first with timeout (fresh data, but handle offline). Precaching: manifest.js lists assets to cache on install. Example: Workbox generates manifest (npm workbox). Lazy loading: load routes on-demand (reduce initial bundle). Code splitting: import('./module') returns promise (async import). Example: Webpack/Rollup build tools split code by route (each route ~50-100KB typically). Compression: gzip (text), brotli (better compression, ~20% smaller). Image optimization: WebP format (70% smaller vs JPEG). Responsive images: srcset specifies different resolutions (mobile gets small, desktop gets large). Fonts: WOFF2 format (smaller than TTF). Font loading: font-display: swap (show fallback immediately, swap fonts when loaded). Resource hints: preconnect to CDN, prefetch assets. Example: .
Push Notifications and Engagement
Push notifications: server-initiated messages. User subscribes: const subscription = await serviceWorkerRegistration.pushManager.subscribe(). Subscription sends endpoint + encryption keys to server. Server sends notification: sends encrypted payload to endpoint. Notification shows on device (even if PWA not open). Permission: browser prompt (user allows/denies). Engagement: rich notifications (image, buttons, actions). Example: "New message from John" with Reply button. Action handling: notification.onclick = (event) => { ... } (button click triggers action). Transactional notifications: order confirmed, package shipped (time-sensitive). Marketing notifications: new content, promotions (should not be excessive, risk uninstall). Permission decay: users revoke notification permission if spammed. Best practice: ask for permission contextually (after user action), not immediately. Analytics: track notification impressions, click-through rate. Badging: app icon badge shows unread count (minor visual indicator).
API Integration and Advanced Features
Web APIs: access device features. Geolocation: navigator.geolocation.getCurrentPosition(). Camera: getUserMedia stream. Microphone: for voice calls (WebRTC). Sensors: accelerometer, gyroscope (for motion-based games). File API: read local files, upload. IndexedDB: client-side database (store data locally). Example: const db = indexedDB.open('mydb'); store data offline, sync when online. Payment API: Web Payments (secure payment form). Credential API: save passwords securely (browser autofill). Notifications API: local notifications (not from server). Example: new Notification("Title", { body: "Message", icon: "icon.png" }). Background Fetch: download large files offline (resume on reconnect). Example: download 1GB video in background (survives browser close). Share API: navigator.share ({ title, text, url }) (OS share menu). WebRTC: peer-to-peer communication (video calls, file sharing). Limitations: iOS PWA limitations (service workers not fully supported).
Development and Testing
Debugging: Chrome DevTools → Application tab (service workers, cache, manifest). Clear cache: right-click cache entry, delete. Unregister service worker: unregister button (complete app reset). Testing offline: DevTools → Network → Offline (simulate no connection). Test strategies: (1) unit tests (cache logic), (2) integration tests (service worker + page), (3) e2e tests (install flow). E2E testing: Puppeteer, Playwright automate browser. Example: test install flow, verify offline mode. Performance testing: Lighthouse audits PWA. Score 90+ indicates good PWA. Metrics: performance, accessibility, best practices, SEO, PWA score. Build tools: Workbox (service worker toolkit), Web-app-manifest validator. Deployment: HTTPS mandatory (requirement for service workers). CDN: CloudFlare, Akamai cache content globally (<50ms latency most users). Monitoring: Sentry (error tracking), Analytics (user behavior). Version management: service worker version bumped, cache invalidated. Rollback: previous version cached, user can switch back if issues.
Adoption and Market Perspective
PWA adoption: Google, Microsoft, Twitter PWAs (high engagement). Performance: vs native app (similar), vs web app (10-100x faster offline). Cost: 50-70% cheaper than native apps (single codebase for web + PWA). Target platforms: iOS (limited PWA support), Android (full support). User acceptance: PWA installable like app (no app store friction). Market: mature technology (service workers standardized 2019). Ecosystem: web frameworks (Next.js, Vue, React) offer PWA templates. Framework support: Create React App --template pwa (built-in PWA setup). Libraries: pouchdb (offline sync), UpUp (service worker toolkit). Monetization: ads, subscriptions work on PWAs. Analytics: standard web analytics apply. Challenges: discoverability (app store has search, web doesn't), fragmented browser support (iOS limitations), user expectations (web apps less discoverable than app store apps). Future: improved iOS support, adoption of web standards (WebAssembly for performance). Recommendation: PWA suitable for content apps, progressive enhancement for existing web apps, not replacement for native gaming/performance-critical apps.