Service Worker PWA (Next.js)

Overview

Use this skill to build or fix a production-ready PWA in Next.js App Router with explicit service worker lifecycle, robust caching strategies, offline support, push notifications, and safe deployment behavior.

Workflow

1. Inspect existing Next.js PWA files and routing mode.
2. Implement manifest, icon set, and platform-specific meta tags.
3. Implement service worker registration, lifecycle management, and public/sw.js.
4. Choose and implement caching strategies based on resource types.
5. Implement offline fallback and, optionally, Background Sync.
6. Implement push subscriptions with Server Actions when needed.
7. Add update notification UX so users get new versions.
8. Secure service worker delivery and validate in HTTPS.
9. Debug and troubleshoot with DevTools.