feat: implement PWA offline mode with IndexedDB queue and sync manager

package.json

@@ -30,14 +30,17 @@
     "react-joyride": "^3.1.0",
     "react-leaflet": "^5.0.0",
     "react-router-dom": "^7.14.0",
-    "tailwindcss": "^4.2.2"
+    "tailwindcss": "^4.2.2",
+    "vite-plugin-pwa": "^1.3.0",
+    "workbox-window": "^7.4.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.4",
     "@types/leaflet": "^1.9.21",
     "@types/node": "^25.9.1",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
+    "@vite-pwa/assets-generator": "^1.0.2",
     "@vitejs/plugin-react": "^6.0.1",
     "concurrently": "^9.2.1",
     "cross-env": "^10.1.0",

src/main.tsx

@@ -4,11 +4,14 @@ import posthog from 'posthog-js'
 import { PostHogProvider } from 'posthog-js/react'
 import './index.css'
 import App from './App.tsx'
+import { initTheme } from './lib/theme';
+import { syncOfflineScans } from './utils/syncManager'
 import { initTheme } from './lib/theme'
 import "./i18n";
 
 // Initialize theme before rendering the app to prevent flicker
 initTheme();
+syncOfflineScans()
 
 // PostHog is only initialized when the key is present.
 // Contributors running locally without the key will have it silently disabled.

src/utils/offlineQueue.ts

@@ -0,0 +1,44 @@
+const DB_NAME = 'FreshScanDB'
+const STORE_NAME = 'scanQueue'
+
+export function openDB(): Promise<IDBDatabase> {
+  return new Promise((resolve, reject) => {
+    const req = indexedDB.open(DB_NAME, 1)
+    req.onupgradeneeded = (e: IDBVersionChangeEvent) => {
+      const db = (e.target as IDBOpenDBRequest).result
+      db.createObjectStore(STORE_NAME, { keyPath: 'id', autoIncrement: true })
+    }
+    req.onsuccess = () => resolve(req.result)
+    req.onerror = () => reject(req.error)
+  })
+}
+
+export async function queueScan(scanData: Record<string, unknown>) {
+  const db = await openDB()
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, 'readwrite')
+    tx.objectStore(STORE_NAME).add({ ...scanData, timestamp: Date.now() })
+    tx.oncomplete = resolve
+    tx.onerror = () => reject(tx.error)
+  })
+}
+
+export async function getPendingScans() {
+  const db = await openDB()
+  return new Promise<Record<string, unknown>[]>((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, 'readonly')
+    const req = tx.objectStore(STORE_NAME).getAll()
+    req.onsuccess = () => resolve(req.result as Record<string, unknown>[])
+    req.onerror = () => reject(req.error)
+  })
+}
+
+export async function removeScan(id: number) {
+  const db = await openDB()
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, 'readwrite')
+    tx.objectStore(STORE_NAME).delete(id)
+    tx.oncomplete = resolve
+    tx.onerror = () => reject(tx.error)
+  })
+}

src/utils/syncManager.ts

@@ -0,0 +1,40 @@
+import { getPendingScans, removeScan } from './offlineQueue'
+
+// 1. Define a clean interface for a Scan item to resolve type issues
+interface ScanItem {
+  id: number;
+  [key: string]: unknown; // Allows any other dynamic fields
+}
+
+async function uploadScan(scan: ScanItem) {
+  const response = await fetch('/api/scans', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(scan),
+  })
+  if (!response.ok) throw new Error('Upload failed')
+  return response.json()
+}
+
+export async function syncOfflineScans() {
+  if (!navigator.onLine) return
+
+  // Cast the pending scans array to our ScanItem interface
+  const pending = (await getPendingScans()) as ScanItem[]
+
+  for (const scan of pending) {
+    try {
+      await uploadScan(scan)
+      await removeScan(scan.id)
+      console.log(`✅ Synced scan ID: ${scan.id}`)
+    } catch (err) {
+      console.error(`❌ Failed to sync scan ${scan.id}:`, err)
+    }
+  }
+}
+
+// Auto sync when internet comes back
+window.addEventListener('online', () => {
+  console.log('🌐 Back online – syncing offline scans...')
+  syncOfflineScans()
+})

vite.config.ts

@@ -1,3 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import { VitePWA } from 'vite-plugin-pwa'
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import tailwindcss from '@tailwindcss/vite';
@@ -10,6 +14,45 @@ export default defineConfig({
     tailwindcss(),
     VitePWA({
       registerType: 'autoUpdate',
+      includeAssets: ['favicon.ico', 'apple-touch-icon.png'],
+      manifest: {
+        name: 'FreshScan AI',
+        short_name: 'FreshScan',
+        description: 'AI-powered fish freshness scanner',
+        theme_color: '#ffffff',
+        background_color: '#ffffff',
+        display: 'standalone',
+        icons: [
+          {
+            src: 'pwa-192x192.png',
+            sizes: '192x192',
+            type: 'image/png'
+          },
+          {
+            src: 'pwa-512x512.png',
+            sizes: '512x512',
+            type: 'image/png'
+          }
+        ]
+      },
+      workbox: {
+        globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],
+        runtimeCaching: [
+          {
+            urlPattern: /^https?:\/\/localhost:8000\/api\//,
+            handler: 'NetworkFirst',
+            options: {
+              cacheName: 'api-cache',
+              expiration: {
+                maxEntries: 50,
+                maxAgeSeconds: 60 * 60 * 24
+              }
+            }
+          }
+        ]
+      }
+    })
+  ],
       // Use the existing manifest.json in public/
       manifest: false,
       workbox: {
@@ -45,15 +88,12 @@ export default defineConfig({
   ],
 
   server: {
-    // In local dev, proxy /api/* to the FastAPI backend at :8000.
-    // This avoids CORS issues and means the frontend never needs to
-    // hard-code the backend port.
-    // In production, VITE_API_URL is set externally so this block is unused.
     proxy: {
       '/api': {
         target: 'http://localhost:8000',
         changeOrigin: true,
       },
     },
   },
+})
 });