enhance-pwa

enhance-pwa — Make It Installable and Offline-Ready

Degree of freedom: MIXED. Strategy and prompt timing [HIGH freedom]; caching rules, Capacitor bypass, and Lighthouse [LOW freedom — run exactly].

A PWA closes the gap between "website" and "app". Users can install it to their home screen, it loads instantly from cache, and it keeps working when the network drops. This skill adds those capabilities to any existing web app without breaking what already works.

How to reason

1. Audit — manifest, SW, framework plugin already present
2. Choose — caching strategy per asset type; Workbox over raw SW
3. Ship — installable manifest + offline fallback + autoUpdate
4. Prove — Lighthouse PWA ≥ 90; Capacitor bridge not intercepted

Worked example

Audit: Next.js app; no manifest link; no SW; also ships Capacitor. Choose: Workbox via next-pwa; NetworkFirst APIs; CacheFirst images; skip capacitor://. Ship: manifest.webmanifest + 192/512 icons + /offline.html; install prompt after first success. Prove: offline revisit of / works; Lighthouse PWA ≥ 90; native bridge still functions.

Self-critique before reporting

• No stale deploys — autoUpdate, not silent stale cache
• No secrets in cache — auth tokens and sensitive APIs are NetworkOnly
• Offline path — fallback page or cached shell, not a browser error
• Right owner — native Capacitor shell → mobile-capacitor-platform; confirm bridge via mobile-emulator-test

---

Phase 0: Audit what already exists [HIGH freedom]

public/manifest.json or public/manifest.webmanifest  → existing manifest
public/sw.js or src/sw.ts                             → existing service worker
vite.config.*   → vite-plugin-pwa already configured?
next.config.*   → next-pwa already configured?
package.json    → workbox-*, vite-plugin-pwa, next-pwa, @vite-pwa/nuxt

Also check the current Lighthouse PWA score via:

// eval after goto
const pwaReady = {
  manifest: !!document.querySelector('link[rel="manifest"]'),
  sw: 'serviceWorker' in navigator,
  https: location.protocol === 'https:' || location.hostname === 'localhost',
};