Add offline support (PWA)

[nicholaspsmith]

Summary

Implement Progressive Web App (PWA) features to enable offline studying and better mobile experience.

Motivation

• Study anywhere without internet connectivity
• Faster load times with service worker caching
• Install as native-like app on mobile devices
• Reduced data usage for mobile users

PWA Features to Implement

Phase 1: Basic PWA

• Web App Manifest (manifest.json)
• Service Worker for asset caching
• Installable on mobile devices
• App icons for all platforms

Phase 2: Offline Support

• Cache current study session data
• Queue rating submissions when offline
• Sync queued actions when online
• Show offline indicator in UI

Phase 3: Background Sync

• Sync flashcard reviews in background
• Pre-fetch upcoming study cards
• Background notifications for due cards

Technical Implementation

1. Manifest: Create public/manifest.json
2. Service Worker: Use next-pwa or Workbox
3. IndexedDB: Cache flashcard data locally
4. Background Sync: Use Background Sync API

Manifest Example

{
  "name": "MemoryLoop",
  "short_name": "MemoryLoop",
  "description": "Master any skill with AI-powered spaced repetition",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#3b82f6",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Offline Data Strategy

1. On login, pre-cache next 50 due flashcards
2. Store in IndexedDB with timestamps
3. Queue review submissions with offline-first pattern
4. Resolve conflicts by timestamp on sync

Dependencies

• next-pwa or @vite-pwa/next
• idb for IndexedDB wrapper
• Workbox for advanced caching strategies

Acceptance Criteria

• App installable on iOS and Android
• Study sessions work without internet
• Queued reviews sync when online
• Appropriate offline indicator shown
• No data loss during offline periods