[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

[Provibez999]

Hi I would love to solve this issues

[grantfox-oss]

🦊 GrantFox — @Provibez999 has been assigned to this issue as part of the Official Campaign | FWC26 campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #28)
2. Your PR will be reviewed by the EquipChain maintainers

Good luck! Track your progress on GrantFox.

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox as part of the Official Campaign | FWC26 campaign!

@Provibez999's PR #33 was approved and merged by @KarenZita01.

🏆 @Provibez999: You earned 35 FoxPoints for this contribution! Your current tier: Explorer (83 total points). Track your full progress on GrantFox.

👏 Great work, @Provibez999! Keep contributing to EquipChain.