2.2.2 Pwa Offline First

This skill defines the technical standards for building Progressive Web Apps that work reliably regardless of network conditions, install natively on devices, and pass all Lighthouse PWA audits.

1. Web App Manifest (manifest.json)

Goal: Ensure installability and native-like presentation on all platforms.

• Required Fields: name, short_name, start_url, display (set to standalone), background_color, theme_color, icons (at minimum 192×192 and 512×512 PNG, include maskable purpose variant).
• Optional Enhancements: description, categories, screenshots (for richer install UI on Android), shortcuts (app launcher shortcuts), share_target (to receive shared content).
• Scope: Set scope to / or the app's root path. Ensure start_url falls within the declared scope.
• Validation: Test with Chrome DevTools → Application → Manifest panel. Verify installability criteria are met.

2. Service Worker Lifecycle

Goal: Reliable caching and seamless updates without stale content.

• Registration: Register the service worker in the app's entry point with navigator.serviceWorker.register('/sw.js', { scope: '/' }). Wrap in a feature check.
• Install Event: Pre-cache the App Shell (HTML, CSS, JS, critical fonts, icons) during the install event. Use cache.addAll() with a versioned cache name (e.g., app-shell-v2).
• Activate Event: Clean up old caches by iterating caches.keys() and deleting any cache name that doesn't match the current version. Call clients.claim() to immediately take control.
• Update Strategy: Use skipWaiting() cautiously. Prefer prompting the user with a "New version available — Refresh" banner triggered by the controllerchange event or a Broadcast Channel message from the new SW.