feat: add PWA offline support with cached dashboard data

[Priyanshu-byte-coder]

Feature Request

Is your feature request related to a problem?
DevTrack is registered as a PWA but currently shows a blank/error screen when opened offline. Users who've installed the app expect to at least see their last-known dashboard data.

Describe the solution you'd like
Implement proper PWA offline support:

1. Cache last successful API responses in the service worker
2. When offline, show cached dashboard data with a clear "Offline — showing cached data" banner
3. Background sync: queue data refresh for when connectivity returns

Implementation Details

• Update public/sw.js or configure next-pwa for runtime caching
• Cache /api/dashboard, /api/metrics, /api/streak responses
• Use Cache-first strategy for static assets, Network-first for API responses
• Add offline detection (navigator.onLine) and show banner component

Acceptance Criteria

• App loads when offline (shows last cached data)
• Clear "offline" indicator shown when network unavailable
• Static assets (fonts, icons) work offline
• Data refreshes automatically when connection restored
• Cache invalidated after 24 hours
• Works on Android (Chrome) and iOS (Safari)

Additional context
DevTrack already has manifest.json and PWA registration. This completes the PWA experience.

[srinidhi-2006-bit]

Hi @Priyanshu-byte-coder

I’d like to work on this feature under GSSoC’26.

This sounds like a really impactful improvement for the PWA experience, and I’d love to help make DevTrack usable even without an internet connection.

My planned approach:

• configure runtime caching for dashboard-related API routes using the existing service worker/PWA setup
• implement network-first caching for API data and cache-first strategy for static assets
• add offline state detection with a clear “Offline — showing cached data” banner
• ensure last successful dashboard data is available during offline usage
• implement automatic refresh/sync once connectivity is restored
• add cache expiration/invalidation handling for stale data cleanup
• verify behavior across Chrome Android and Safari iOS environments

I’ll also test offline flows carefully using DevTools network throttling and installed PWA mode to ensure the experience feels reliable and seamless.

Please assign this issue to me if it’s available. Thanks!

[Kishalll]

Hi @Priyanshu-byte-coder! I'd like to work on this issue under gssoc.

My approach:

• Install next-pwa and configure it in next.config.mjs to generate a service worker, replacing or extending the existing public/sw.js
• Set up a Network-first runtime caching strategy for all /api/metrics/*, /api/streak, and /api/goals routes with a 24-hour max age — so the last successful response is always available offline
• Use Cache-first for static assets (fonts, icons, manifest) to ensure the shell loads instantly offline
• Add a small OfflineBanner.tsx component that listens to navigator.onLine / the online/offline window events and renders a dismissible "Offline — showing cached data" banner on the dashboard when connectivity is lost
• Wire up a Background Sync event in the service worker to trigger a data refresh automatically once the connection is restored

[github-actions]

Assigned to @Kishalll! You have 7 days to open a PR. No PR after 7 days = auto-unassigned so others can pick it up. Good luck!

[Kishalll]

@Priyanshu-byte-coder added a pr fixing this issue pls review

[Priyanshu-byte-coder]

Resolved by PR #1184 — PWA offline support with OfflineBanner merged into main.