--- name: pwa-checklist description: Step-by-step checklist for implementing Progressive Web App features in Next.js including manifest, service workers, and offline support allowed-tools: Read, Write, Edit, Bash --- # PWA Implementation Checklist Complete checklist for making your Next.js app a PWA. ## 1. Install next-pwa ```bash npm install next-pwa ``` ## 2. Configure Next.js ```typescript \/\/ next.config.ts import withPWA from 'next-pwa' const nextConfig = withPWA({ dest: 'public', register: true, skipWaiting: true, disable: process.env.NODE_ENV === 'development', })({ \/\/ Your existing Next.js config }) export default nextConfig ``` ## 3. Create Web App Manifest ```json \/\/ public\/manifest.json { "name": "Your SaaS App", "short_name": "SaaS", "description": "Your app description", "start_url": "\/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#000000", "orientation": "portrait-primary", "icons": [ { "src": "\/icons\/icon-192x192.png", "sizes": "192x192", "type": "image\/png", "purpose": "any maskable" }, { "src": "\/icons\/icon-512x512.png", "sizes": "512x512", "type": "image\/png", "purpose": "any maskable" } ] } ``` ## 4. Add Manifest to Layout ```tsx \/\/ app\/layout.tsx export const metadata: Metadata = { manifest: '\/manifest.json', themeColor: '#000000', appleWebApp: { capable: true, statusBarStyle: 'default', title: 'Your SaaS App', }, } ``` ## 5. Create Icons Required sizes: - **Android**: 192x192, 512x512 (maskable) - **iOS**: 180x180 (apple-touch-icon.png) - **Favicon**: 32x32, 16x16 Place in `public\/icons\/` directory. ## 6. Add Apple Touch Icon ```tsx \/\/ app\/layout.tsx (in ) ``` ## 7. Create Install Prompt Component ```tsx 'use client' import { useEffect, useState } from 'react' import { Button } from '@\/components\/ui\/button' interface BeforeInstallPromptEvent extends Event { prompt: () => Promise userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }> } export function InstallPrompt() { const [deferredPrompt, setDeferredPrompt] = useState(null) const [showPrompt, setShowPrompt] = useState(false) useEffect(() => { const handler = (e: Event) => { e.preventDefault() setDeferredPrompt(e as BeforeInstallPromptEvent) setShowPrompt(true) } window.addEventListener('beforeinstallprompt', handler) return () => window.removeEventListener('beforeinstallprompt', handler) }, []) const handleInstall = async () => { if (!deferredPrompt) return deferredPrompt.prompt() const { outcome } = await deferredPrompt.userChoice setDeferredPrompt(null) setShowPrompt(false) } if (!showPrompt) return null return (

Install our app for better experience<\/p>