Feature/issue 510 offline architecture

[Dami24-hub]

Pull Request Description

Overview

This pull request transitions the application from an online-only model to an offline-first architecture, resolving the network reliability issues outlined in issue #510. It introduces a service worker layer for static asset caching, an IndexedDB-backed local storage system for critical application state, and a robust background synchronization mechanism to handle data mutations while offline.

Associated Issue

Closes #510

Changes Implemented

1. Service Worker & Asset Caching

• Registered and configured a service worker lifecycle management system.
• Implemented caching strategies (Cache-First for static assets, Network-First for dynamic data with offline fallbacks).

2. Local Storage Layer

• Integrated an IndexedDB-based local storage engine to cache critical application state and data structures.
• Created a secure queue to store pending API mutations generated while the user is disconnected.

3. Background Synchronization & Conflict Resolution

• Developed an automatic synchronization mechanism that detects network restoration and replays queued requests sequentially.
• Implemented a timestamp-based conflict resolution strategy (Last-Write-Wins) to handle data discrepancies gracefully during re-sync.

4. UI Indicators & Network Detection

• Added global network event listeners to track online and offline states.
• Created reusable, accessible UI components (top banner and status toasts) to inform users of connectivity status and background synchronization progress.

5. Offline Analytics & Testing

• Implemented an offline analytics queue to capture user events and dispatch them once connectivity is restored.
• Added unit and integration tests simulating network dropped connections and successful reconciliation.

Verification and Testing Conducted

Manual Testing

• Verified the application successfully loads and remains interactive in Chrome DevTools under "Offline" emulation.
• Confirmed that data entries created while offline are successfully saved locally and sync automatically when network throttling is removed.
• Verified that UI banners correctly toggle between online, offline, and syncing states.

Automated Testing

• Executed integration tests verifying the queue processing logic.
• All existing and new test suites pass successfully.

Deployment Notes

• Ensure that HTTPS is enforced in the target environment, as service workers require a secure context to register.

Closes #510

[vercel]

@Dami24-hub is attempting to deploy a commit to the paul joseph's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@Dami24-hub Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits