pwa

To make a Next.js PWA installable, you need a valid web app manifest, a registered service worker with a fetch handler, HTTPS or localhost, and proper first-party navigation. These installability checklist items trigger the browser install prompt.

To add a branded offline fallback page, configure your Serwist service worker to intercept HTML navigation requests and fall back to a dedicated `/offline` route when network requests fail. This provides a graceful offline experience instead of a confusing browser error.

Configure your service worker cache strategy by precaching static assets and HTML appropriately while keeping auth-sensitive API or tRPC traffic network-only. This separation ensures users get fast static loads without risking stale or cached protected data.

Updated PWA manifest icons may not show because the service worker is serving cached versions of the manifest or icons. You need to follow an icon refresh workflow that accounts for service worker caching, verifying activation and cache invalidation to apply new branding.

Yes, you can use Serwist for service worker setup in an existing Next.js web app. The PWA configuration requires @serwist/next to manage service worker generation, HTML navigation fallbacks, and manifest delivery alongside your current application routing.

Debug PWA service worker behavior by verifying manifest delivery through the Next metadata route, checking service worker activation states in browser devtools, running Lighthouse PWA audits, and tracing cache hits and misses for navigation and asset requests.