Progressive Web App with offline support and sync

[bgorzelic]

Description

Wildfire observers often work in areas with poor or no cellular connectivity. Firevector needs to work offline — allowing users to create and edit observations without an internet connection, then sync changes when connectivity returns.

Proposed Implementation

Service Worker

• Use next-pwa or Serwist for Next.js service worker integration
• Cache strategy: Network-first for API/data, Cache-first for static assets
• App shell cached for instant offline load

Offline Data Storage

• Use IndexedDB (via idb or Dexie.js) for local observation storage
• Queue mutations (create/update/delete) when offline
• Sync queue when connectivity returns
• Conflict resolution: last-write-wins with timestamp comparison

UI Indicators

• Online/offline status indicator in header
• "Pending sync" badge on observations that haven't synced
• Sync progress indicator when reconnecting
• Toast notification when sync completes

Web App Manifest

• manifest.json with Firevector branding
• App icons at required sizes (192, 512)
• display: standalone for native-like experience
• Theme color matching the dark tactical UI

Acceptance Criteria

• App installs as PWA on mobile and desktop
• Can create new observations while offline
• Can edit existing observations while offline
• Changes sync automatically when online
• Offline indicator visible in UI
• Pending sync count shown on queued observations
• Static assets cached for instant load
• Works after clearing browser cache (service worker bootstraps)

Technical Considerations

• Map tiles won't work offline (Mapbox limitation) — show placeholder
• GPS still works offline (device hardware)
• Authentication tokens need offline refresh strategy