Progressive Web App (PWA) Setup

SeedStart is now a Progressive Web App (PWA), allowing users to install it on their devices and receive push notifications.

Features

✅ Installable - Users can add SeedStart to their home screen
✅ Offline Support - Basic offline functionality via service worker
✅ Push Notifications - Receive notifications for organization activities
✅ App-like Experience - Standalone display mode when installed

Implementation Details

Files Created

1. public/manifest.json - Web app manifest defining app metadata
2. public/sw.js - Service worker for offline support and notifications
3. src/utils/pwa.ts - PWA utility functions
4. src/components/PWA/PWAInstallPrompt.tsx - Install prompt component
5. src/hooks/usePWANotifications.ts - Hook for managing notifications

Service Worker

The service worker (public/sw.js) handles:

• Caching - Caches app assets for offline access
• Push Notifications - Receives and displays push notifications
• Background Sync - Ready for future offline action queuing

Notification System

Notifications are triggered when:

• New activity logs are created for the current user
• User is mentioned in organization activities
• Contract signing events
• Application stage changes
• New messages (if configured)

Installation

Users can install the app:

1. Automatic Prompt - Browser shows install prompt (Chrome, Edge, etc.)
2. Manual Install - Via browser menu: "Install App" or "Add to Home Screen"
3. iOS Safari - Share button → "Add to Home Screen"

Setup Requirements

Icons

You need to create PWA icons in public/icons/:

• icon-72x72.png
• icon-96x96.png
• icon-128x128.png
• icon-144x144.png
• icon-152x152.png (iOS)
• icon-192x192.png (Android)
• icon-384x384.png
• icon-512x512.png (Splash screen)

See public/icons/README.md for icon creation instructions.

HTTPS Required

PWAs require HTTPS (except for localhost). Ensure your deployment uses HTTPS.

Testing

Local Development

1. Build the app: npm run build
2. Serve with HTTPS: npm run preview (or use a local HTTPS server)
3. Open in browser and check:
   • Service worker registration in DevTools → Application → Service Workers
   • Manifest in DevTools → Application → Manifest
   • Install prompt appears (if conditions are met)

Production

1. Deploy to Firebase Hosting (HTTPS enabled)
2. Test on mobile devices
3. Verify install prompt appears
4. Test notifications after granting permission

Browser Support

• ✅ Chrome/Edge (Android & Desktop)
• ✅ Safari (iOS 11.3+)
• ✅ Firefox (Android)
• ⚠️ Safari (Desktop) - Limited PWA support
• ⚠️ Older browsers - May not support all features

Future Enhancements

• [ ] Background sync for offline actions
• [ ] Periodic background sync
• [ ] Share target API integration
• [ ] File system access API
• [ ] Badge API for unread counts
• [ ] Web Share API integration

Troubleshooting

Service Worker Not Registering

• Check browser console for errors
• Ensure HTTPS (or localhost)
• Check service worker file is accessible at /sw.js
• Verify service worker scope matches app root

Notifications Not Working

• Check notification permission is granted
• Verify service worker is active
• Check browser supports notifications
• Ensure notifications are enabled in browser settings

Install Prompt Not Showing

• App must meet installability criteria:
  • HTTPS required
  • Valid manifest.json
  • Service worker registered
  • Icons provided
  • Not already installed
• Some browsers require user interaction before showing prompt

References

• MDN: Progressive Web Apps
• Web.dev: PWA
• Service Worker API