You are an expert Next.js and PWA developer.
I have an existing Next.js application (using App Router, Next.js 14+). Convert it into a fully functional Progressive Web App (PWA) that can be installed/downloaded as a native-like app on Android (via Chrome) with the following requirements:
Core PWA Features Required:
-
Web App Manifest (manifest.json)
- Proper
name, short_name, description
- Multiple icon sizes (192x192, 512x512, maskable icons)
start_url, display: standalone, theme_color, background_colororientation: portrait or any as needed- Categories and screenshots if possible
-
Service Worker
- Workbox or custom service worker for caching (pages, assets, API responses)
- Offline support (show cached content or offline page)
- Background sync / push notification readiness (even if not implementing push yet)
- Proper caching strategies (NetworkFirst for API, CacheFirst for static assets)
-
Next.js Configuration
- Use
next-pwa plugin if recommended, or manual setup with next.config.js / next.config.mjs
- Correct handling of App Router (
app/ directory)
- Environment variables and build optimizations for PWA
- HTTPS enforcement reminder / secure context
-
Installation Experience on Android
- Make the "Install" / "Add to home screen" prompt appear reliably in Chrome on Android
- Proper meta tags (
<meta name="theme-color">, apple-touch icons for broader compatibility)
- Custom install button (optional but recommended) with
beforeinstallprompt event
-
Best Practices
- Lighthouse PWA score ≥ 90
- Fast loading (Core Web Vitals optimized)
- Responsive design already assumed
- Update handling (new version notification)
- Fallback offline page
Deliverables:
- Full updated
next.config.js / next.config.mjs
- Complete
public/manifest.json
- Service worker file(s) location and code
- Any new components (e.g., InstallPrompt component)
- Updated
app/layout.tsx or _document.js with all necessary <Head> / meta tags
- Instructions for:
- Running in development mode with PWA
- Building and testing the PWA
- How to test installability on Android (Chrome DevTools + Android device)
- Deploying to Vercel/Netlify (PWA-compatible hosting)
Assume the project uses TypeScript and Tailwind. Provide the complete code changes with clear file paths and diff-style explanations where helpful.
Start by asking me for any specific details about my app (name, icons, features, current folder structure) if needed, otherwise provide a complete ready-to-use implementation.
You are an expert Next.js and PWA developer.
I have an existing Next.js application (using App Router, Next.js 14+). Convert it into a fully functional Progressive Web App (PWA) that can be installed/downloaded as a native-like app on Android (via Chrome) with the following requirements:
Core PWA Features Required:
Web App Manifest (
manifest.json)name,short_name,descriptionstart_url,display: standalone,theme_color,background_colororientation: portraitoranyas neededService Worker
Next.js Configuration
next-pwaplugin if recommended, or manual setup withnext.config.js/next.config.mjsapp/directory)Installation Experience on Android
<meta name="theme-color">, apple-touch icons for broader compatibility)beforeinstallprompteventBest Practices
Deliverables:
next.config.js/next.config.mjspublic/manifest.jsonapp/layout.tsxor_document.jswith all necessary<Head>/ meta tagsAssume the project uses TypeScript and Tailwind. Provide the complete code changes with clear file paths and diff-style explanations where helpful.
Start by asking me for any specific details about my app (name, icons, features, current folder structure) if needed, otherwise provide a complete ready-to-use implementation.