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/components/OfflineBanner.vue

@@ -0,0 +1,58 @@
+<template>
+  <Transition
+    enter-active-class="transition ease-out duration-300"
+    enter-from-class="opacity-0 -translate-y-2"
+    enter-to-class="opacity-100 translate-y-0"
+    leave-active-class="transition ease-in duration-200"
+    leave-from-class="opacity-100 translate-y-0"
+    leave-to-class="opacity-0 -translate-y-2"
+  >
+    <div
+      v-if="!isOnline"
+      class="fixed top-0 left-0 right-0 z-50 bg-amber-500 text-white px-4 py-2 text-center shadow-lg"
+    >
+      <div class="flex items-center justify-center gap-2">
+        <UIcon name="i-heroicons-wifi-slash" class="w-5 h-5" />
+        <span class="font-medium">
+          You're currently offline. Changes will sync when connection is restored.
+        </span>
+      </div>
+    </div>
+  </Transition>
+  
+  <Transition
+    enter-active-class="transition ease-out duration-300"
+    enter-from-class="opacity-0 -translate-y-2"
+    enter-to-class="opacity-100 translate-y-0"
+    leave-active-class="transition ease-in duration-200"
+    leave-from-class="opacity-100 translate-y-0"
+    leave-to-class="opacity-0 -translate-y-2"
+  >
+    <div
+      v-if="isOnline && wasOffline && showReconnected"
+      class="fixed top-0 left-0 right-0 z-50 bg-emerald-500 text-white px-4 py-2 text-center shadow-lg"
+    >
+      <div class="flex items-center justify-center gap-2">
+        <UIcon name="i-heroicons-wifi" class="w-5 h-5" />
+        <span class="font-medium">
+          Back online! Syncing your changes...
+        </span>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+const { isOnline, wasOffline } = useOnlineStatus()
+const showReconnected = ref(false)
+
+// Show "back online" message for 3 seconds
+watch(isOnline, (online) => {
+  if (online && wasOffline.value) {
+    showReconnected.value = true
+    setTimeout(() => {
+      showReconnected.value = false
+    }, 3000)
+  }
+})
+</script>