[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.

[Ranjeet2063]

Hello! I'd like to work on this issue.

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

• UI & Component Design: Build [Frontend] Progressive Web App (PWA) & Offline Read-Only Mode Support with modular React/Next.js components, responsive layouts, and robust loading/error boundaries.
• Strict Typing & State: Ensure zero any types, smooth wallet state transitions, and responsive mobile/desktop rendering.
• Quality Gate: Include component tests (Vitest/Jest) and verify clean production build (pnpm build).

Why assign me?

• Proven Proof-of-Work: #1 contributor on Mova Store (28 merged Web3 PRs) and official ElizaOS contributor.
• Fast Turnaround: Dedicated to shipping a tested, production-grade PR within 12–24 hours.
• Zero Maintainer Burden: Self-documenting code with green CI and tests included so you don't spend time debugging.

Excited to contribute—please assign this to me and I'll push a clean PR shortly!