[Feature] Implement Progressive Web App with Offline Support, Background Sync, and Service Worker

[KarenZita01]

Description

The frontend has no progressive enhancement strategy for offline usage, slow networks, or intermittent connectivity. In many regions where utility metering is most needed, internet connectivity is unreliable. The application should gracefully degrade and continue functioning where possible.

Resilience gaps:

• No service worker for offline cache
• No offline fallback pages
• No background sync for queued operations
• No client-side data persistence (IndexedDB)
• No "you are offline" banner with retry
• No optimistic cache for previously viewed data
• No stale-while-revalidate for frequently accessed data
• No PWA install prompt
• No periodic background sync for meter reading aggregation
• No last-seen indicator for data freshness

Technical Context & Impact

• Affected Components/Files: public/sw.js (missing), src/lib/offline/ (missing), next.config.ts
• Impact: Inaccessible during network interruptions; poor experience in low-connectivity areas

Step-by-Step Implementation Guide

1. Create service worker: Use next-pwa or @serwist/next for PWA support:
   • Cache static assets (JS, CSS, fonts) on first load
   • Cache API responses under /api/ with stale-while-revalidate strategy
   • Cache pages for offline viewing
   • Background sync for queued transactions
2. Implement IndexedDB client: src/lib/storage/db.ts using Dexie.js or idb:
   • Store meters, streams, billing data locally
   • Sync with server when online
   • Conflict resolution (last-write-wins with timestamp)
   • Encryption of sensitive data (optional)
3. Create offline-aware hooks: src/lib/hooks/useOnlineStatus.ts:
   • useOnlineStatus() returning isOnline, wasOffline, lastOnlineTime
   • Dispatch events when connectivity changes
4. Add offline banner: src/components/common/OfflineBanner.tsx:
   • Yellow banner at top: "You're offline. Some features may be unavailable."
   • Queue indicator: "3 pending operations" when transactions queued
   • Reconnection animation when back online
5. Implement background sync: Queue transactions in IndexedDB:
   • When user submits while offline, queue transaction
   • When back online, process queue in order
   • Show pending queue status
6. Create offline pages: app/offline/page.tsx:
   • Cached version of dashboard
   • Show last synced data with "last updated" timestamp
   • Manual retry button
7. Add PWA install prompt: usePwaInstall() hook triggering beforeinstallprompt event
8. Implement periodic sync: navigator.periodicSync.register('sync-data', { minInterval: 12 * 60 * 60 * 1000 })

Verification & Testing Steps

1. Load app while online -> open service worker cache -> verify assets are cached
2. Go offline -> refresh page -> verify app loads from cache
3. Submit streaming transaction while offline -> verified queued in IndexedDB
4. Go back online -> verify queued transaction is processed
5. Install PWA on mobile -> verify app opens in standalone mode
6. Run npx tsc --noEmit