[Frontend] Progressive Web App (PWA) & Offline Read-Only Mode Support

[blurbeast]

Overview & Background

Users on mobile devices frequently check incoming payment streams and balance accruals on the go. Adding Progressive Web App (PWA) capabilities allows users to install FlowFi directly to their home screen as a native-feeling standalone application with offline cached stream viewing.

---

Technical Specification & Architecture

1. Web App Manifest & Icons:
   • Configure frontend/public/manifest.webmanifest with name, theme colors, and responsive icons (192x192, 512x512).
   • Enable display: standalone for fullscreen mobile experience.
2. Service Worker Caching:
   • Cache static assets, UI fonts, and API responses with stale-while-revalidate strategy.
3. Offline Banner & State Indicator:
   • Display a non-intrusive offline indicator when internet connection drops.
   • Allow users to view cached stream balances with an "Offline (Last synced X mins ago)" badge.

---

Target Files

• frontend/public/manifest.webmanifest
• frontend/src/app/layout.tsx
• frontend/src/components/OfflineBanner.tsx
• frontend/src/hooks/useNetworkStatus.ts

---

Acceptance Criteria

• Installable PWA prompt on mobile Chrome, Safari, and Edge.
• Offline read-only dashboard loads cached streams when disconnected.
• Passes Google Lighthouse PWA audit.

[aweledavid3]

Hi Maintainer,

I would like to contribute to this project.

I am a full stack developer with a passion for software development, open-source collaboration, and artificial intelligence. I have experience working with JavaScript, Python, C++, and Rust, with a primary focus on frontend development using React, Next.js, and TypeScript.