feat: configure service worker and offline support (#34)

- Enhance Workbox configuration with comprehensive caching strategies
- Add separate caching for Supabase REST API, Storage, and Auth
- Configure Open Food Facts API caching (30-day cache)
- Add offline fallback page with retry functionality
- Create useOnlineStatus composable for network monitoring
- Add OfflineBanner component for user feedback
- Configure skipWaiting and clientsClaim for instant updates
- Cache Google Fonts and product images

Caching strategies:
- Network-first: Supabase REST API (fresh data priority)
- Network-only: Auth endpoints (never cache sensitive auth)
- Cache-first: Images, fonts, product data (performance)
- Offline fallback: /offline page for failed navigations

Closes #34

app/nuxt.config.ts

@@ -77,37 +77,101 @@ export default defineNuxtConfig({
       ]
     },
     workbox: {
-      navigateFallback: '/',
-      globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
+      navigateFallback: '/offline',
+      navigateFallbackDenylist: [/^\/api\//],
+      globPatterns: ['**/*.{js,css,html,png,svg,ico,woff,woff2}'],
       cleanupOutdatedCaches: true,
+      skipWaiting: true,
+      clientsClaim: true,
       runtimeCaching: [
+        // Supabase API - Network first with fallback
         {
-          urlPattern: /^https:\/\/api\.supabase\.co\/.*/i,
+          urlPattern: /^https:\/\/.*\.supabase\.co\/rest\/.*/i,
           handler: 'NetworkFirst',
           options: {
-            cacheName: 'supabase-api',
+            cacheName: 'supabase-rest-api',
+            networkTimeoutSeconds: 10,
             expiration: {
-              maxEntries: 100,
-              maxAgeSeconds: 60 * 60 * 24 // 24 hours
+              maxEntries: 50,
+              maxAgeSeconds: 60 * 60 // 1 hour
             },
             cacheableResponse: {
               statuses: [0, 200]
             }
           }
         },
+        // Supabase Auth - Network only (don't cache auth)
         {
-          urlPattern: /^https:\/\/.*\.supabase\.co\/.*/i,
-          handler: 'NetworkFirst',
+          urlPattern: /^https:\/\/.*\.supabase\.co\/auth\/.*/i,
+          handler: 'NetworkOnly'
+        },
+        // Supabase Storage - Cache first for images
+        {
+          urlPattern: /^https:\/\/.*\.supabase\.co\/storage\/.*/i,
+          handler: 'CacheFirst',
           options: {
-            cacheName: 'supabase-data',
+            cacheName: 'supabase-storage',
             expiration: {
               maxEntries: 100,
-              maxAgeSeconds: 60 * 60 * 24 // 24 hours
+              maxAgeSeconds: 60 * 60 * 24 * 7 // 1 week
             },
             cacheableResponse: {
               statuses: [0, 200]
             }
           }
+        },
+        // Open Food Facts API - Cache first with network fallback
+        {
+          urlPattern: /^https:\/\/world\.openfoodfacts\.org\/.*/i,
+          handler: 'CacheFirst',
+          options: {
+            cacheName: 'openfoodfacts-api',
+            expiration: {
+              maxEntries: 200,
+              maxAgeSeconds: 60 * 60 * 24 * 30 // 30 days
+            },
+            cacheableResponse: {
+              statuses: [0, 200]
+            }
+          }
+        },
+        // External images - Cache first
+        {
+          urlPattern: /^https:\/\/images\.openfoodfacts\.org\/.*/i,
+          handler: 'CacheFirst',
+          options: {
+            cacheName: 'product-images',
+            expiration: {
+              maxEntries: 100,
+              maxAgeSeconds: 60 * 60 * 24 * 30 // 30 days
+            },
+            cacheableResponse: {
+              statuses: [0, 200]
+            }
+          }
+        },
+        // Google Fonts - Cache first
+        {
+          urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
+          handler: 'CacheFirst',
+          options: {
+            cacheName: 'google-fonts-stylesheets',
+            expiration: {
+              maxEntries: 20,
+              maxAgeSeconds: 60 * 60 * 24 * 365 // 1 year
+            }
+          }
+        },
+        {
+          urlPattern: /^https:\/\/fonts\.gstatic\.com\/.*/i,
+          handler: 'CacheFirst',
+          options: {
+            cacheName: 'google-fonts-webfonts',
+            expiration: {
+              maxEntries: 30,
+              maxAgeSeconds: 60 * 60 * 24 * 365 // 1 year
+            }
+          }
         }
       ]
     },