Skip to content

PWA-CHECKLIST.md

Latest commit

 

History

History
133 lines (111 loc) · 3.82 KB

PWA-CHECKLIST.md

File metadata and controls

133 lines (111 loc) · 3.82 KB

PWA Implementation Checklist

✅ Completed Components

1. Manifest (public/manifest.json)

  • Name: "Dirt Free CRM"
  • Short name: "DirtFreeCRM"
  • Description and start URL configured
  • Display: "standalone"
  • Theme color: "#3060A0"
  • Icons: 192x192, 512x512, 512x512-maskable
  • All required manifest fields present

2. App Icons (public/icons/)

  • icon-192x192.png (placeholder created)
  • icon-512x512.png (placeholder created)
  • icon-512x512-maskable.png (placeholder created)
  • Paths match manifest configuration

3. Service Worker (src/sw.js)

  • Workbox implementation with precaching
  • Static assets caching (fonts, styles, images)
  • /tech-weekly route offline caching (read-only)
  • Sensitive data exclusion (auth, customers, jobs, reminders)
  • Stale-while-revalidate strategy for assets
  • Install prompt event handling

4. Next.js Configuration (next.config.ts)

  • next-pwa integration
  • Output to public/sw.js
  • Disabled in development
  • Runtime caching configuration

5. Install Prompt (src/components/pwa/InstallPrompt.tsx)

  • beforeinstallprompt event handling
  • Shadcn Dialog UI component
  • Session-based dismissal logic
  • "Install" and "Not now" actions
  • Benefits explanation for users

6. Layout Integration (src/app/layout.tsx)

  • Manifest link: <link rel="manifest" href="/manifest.json" />
  • Theme color meta tag: "#3060A0"
  • Apple PWA meta tags
  • InstallPrompt component included
  • PWA metadata configuration

7. Verification Tools

  • Lighthouse PWA audit script (scripts/lighthouse-pwa-check.js)
  • PWA checklist documentation

🧪 Testing Requirements

Manual Testing

  • App builds without errors (npm run build)
  • Manifest loads correctly at /manifest.json
  • Icons load properly from /icons/ directory
  • Service worker registers and activates
  • Install prompt appears (desktop Chrome/Edge)
  • Install prompt can be dismissed
  • /tech-weekly works offline after initial visit

Lighthouse PWA Audit

  • Score ≥ 90/100 overall
  • ✅ Installable manifest
  • ✅ Service worker registered
  • ✅ Works offline
  • ✅ Offline start URL responds
  • ✅ Has viewport meta tag
  • ✅ Themed omnibox
  • ✅ Has maskable icon

Security Verification

  • Sensitive routes NOT cached:
    • /api/auth/*
    • /api/customers/*
    • /api/jobs/*
    • /api/reminders/*
    • /dashboard/*
    • /customers/*
    • /jobs/*
    • /reminders/*

🚀 Usage Instructions

Running PWA Audit

# Install Lighthouse globally
npm install -g lighthouse

# Start production build
npm run build
npm start

# Run PWA audit
node scripts/lighthouse-pwa-check.js

Testing Install Prompt

  1. Open app in Chrome/Edge desktop
  2. Navigate to homepage
  3. Install prompt should appear automatically
  4. Test "Install" and "Not now" buttons
  5. Verify it doesn't reappear in same session

Offline Testing

  1. Visit /tech-weekly route
  2. Open Chrome DevTools > Application > Service Workers
  3. Check "Offline" checkbox
  4. Refresh page - should still work
  5. Try navigating to sensitive routes - should show offline page

📝 Production Notes

Icon Conversion

The current icons are SVG placeholders. For production:

# Convert SVG to PNG using your preferred tool
npm run convert-icons  # (implement this script)
# Or use online converters, design tools, etc.

Performance Monitoring

  • Monitor PWA install rates via analytics
  • Track offline usage patterns
  • Monitor service worker cache hit rates
  • Lighthouse CI for continuous PWA scoring

Browser Support

  • Chrome/Edge: Full PWA support with install prompts
  • Firefox: Service worker + manifest (no install prompt UI)
  • Safari: Basic service worker support (iOS 11.3+)
  • Mobile browsers: Add to homescreen functionality