Build progressive web application

[Jackson57279]

Adds Progressive Web App (PWA) support to the application, enabling offline capabilities and installability.

This includes configuring the Vite PWA plugin, generating necessary icons and manifest files, and setting up a service worker for caching.

---

[cursor]

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
zapdev	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 8, 2025 0:05am

[claude]

Claude finished @otdoges's task —— View job

---

Code Review: PWA Implementation

I've completed a comprehensive review of the PWA implementation. Here's my detailed analysis:

• Analyze the PWA implementation in vite.config.ts
• Review package.json changes and dependencies
• Check PWA assets configuration
• Review HTML changes for PWA support
• Assess security considerations
• Evaluate performance implications
• Check for best practices compliance
• Provide comprehensive review feedback

✅ Strengths

1. Solid PWA Foundation

• Proper use of vite-plugin-pwa with sensible defaults
• Auto-update registration for seamless user experience
• Development mode enablement for testing

2. Well-Configured Manifest (vite.config.ts:29-68)

• Complete manifest with all required fields
• Proper icon sizes (192x192, 512x512) and maskable variants
• Appropriate display mode (standalone) and theme colors

3. Good Dependencies Management

• Added @vite-pwa/assets-generator for automated icon generation
• Latest version of vite-plugin-pwa (0.21.1)
• Added sharp ecosystem for image processing

4. Service Worker Configuration

• Smart navigate fallback exclusions for API routes (/api/, /convex/, /_)
• Auto-injection and registration

⚠️ Issues Found

1. Critical: Missing Icon Files (vite.config.ts:50-60)

// These icons are referenced but don't exist
{
  src: '/maskable-192x192.png', // ❌ Not found in public/
  sizes: '192x192',
  type: 'image/png',
  purpose: 'maskable'
},
{
  src: '/maskable-512x512.png', // ❌ Not found in public/
  sizes: '512x512',
  type: 'image/png',
  purpose: 'maskable'
}

2. Icon Inconsistency

• Manifest references favicon.svg but actual file path should be verified
• Missing proper Apple touch icon configuration in HTML

3. Security Considerations

• Service worker caches all content by default - consider excluding sensitive routes
• No CSP headers defined for PWA security

4. Performance Concerns

• Large package-lock.json changes (10k+ additions) suggest dependency bloat
• No workbox runtime caching strategies defined for API calls

🔧 Recommended Fixes

High Priority

1. Fix Missing Icons: Either generate the missing maskable icons or remove references:

   npm run generate-pwa-assets  # Generate missing icons

2. Add Apple Touch Icon to HTML:

   <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">

Medium Priority

3. Enhance Service Worker Caching (vite.config.ts:23-25):

   workbox: {
     navigateFallbackDenylist: [/^\/api\//, /^\/convex\//, /^\/_/],
     runtimeCaching: [{
       urlPattern: /^https:\/\/api\./,
       handler: 'NetworkFirst',
       options: { cacheName: 'api-cache' }
     }]
   }

4. Add PWA Meta Tags:

   <meta name="mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-capable" content="yes">

Low Priority

5. Consider Background Sync for offline functionality
6. Add PWA update notifications in the UI
7. Implement offline fallback pages

📊 Test Coverage Gap

• No tests for PWA functionality
• Consider adding E2E tests for:
  • Manifest validation
  • Service worker registration
  • Offline functionality
  • Install prompt behavior

🎯 Overall Assessment

Good foundation with critical fixes needed. The PWA implementation follows best practices but has deployment-blocking issues with missing icons. Once fixed, this will provide a solid progressive web app experience.

Recommendation: Fix the missing icons before merging, then consider the performance enhancements post-deployment.