feat: configure service worker and offline support (#34)
Some checks failed
Pull Request Checks / Validate PR (pull_request) Has been cancelled
Deploy to Coolify / Code Quality (pull_request) Has been cancelled
Deploy to Coolify / Run Tests (pull_request) Has been cancelled
Deploy to Coolify / Deploy to Development (pull_request) Has been cancelled
Deploy to Coolify / Deploy to Production (pull_request) Has been cancelled
Deploy to Coolify / Deploy to Test (pull_request) Has been cancelled

- 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
This commit is contained in:
Pantry Lead Agent
2026-02-25 00:07:44 +00:00
parent 7a01aecb34
commit b98b3bf222
5 changed files with 254 additions and 13 deletions

69
app/pages/offline.vue Normal file
View File

@@ -0,0 +1,69 @@
<template>
<div class="flex flex-col items-center justify-center min-h-screen p-8 text-center">
<UIcon name="i-heroicons-wifi-slash" class="w-24 h-24 text-gray-400 mb-6" />
<h1 class="text-3xl font-bold text-gray-900 mb-4">
You're Offline
</h1>
<p class="text-gray-600 mb-8 max-w-md">
No internet connection detected. Some features may be limited, but you can still:
</p>
<div class="space-y-3 mb-8 text-left max-w-md">
<div class="flex items-start gap-3">
<UIcon name="i-heroicons-check-circle" class="w-6 h-6 text-emerald-500 mt-0.5" />
<span class="text-gray-700">View cached inventory items</span>
</div>
<div class="flex items-start gap-3">
<UIcon name="i-heroicons-check-circle" class="w-6 h-6 text-emerald-500 mt-0.5" />
<span class="text-gray-700">Scan barcodes (will sync when online)</span>
</div>
<div class="flex items-start gap-3">
<UIcon name="i-heroicons-check-circle" class="w-6 h-6 text-emerald-500 mt-0.5" />
<span class="text-gray-700">Browse previously loaded data</span>
</div>
</div>
<UButton
color="emerald"
size="lg"
@click="retry"
:loading="retrying"
>
<template #leading>
<UIcon name="i-heroicons-arrow-path" />
</template>
Try Again
</UButton>
</div>
</template>
<script setup lang="ts">
const retrying = ref(false)
async function retry() {
retrying.value = true
try {
// Test if we're back online
const response = await fetch('/api/health', { method: 'HEAD' })
if (response.ok) {
// We're online! Go back
window.location.reload()
}
} catch (error) {
// Still offline
setTimeout(() => {
retrying.value = false
}, 1000)
}
}
// Auto-retry when online event fires
if (typeof window !== 'undefined') {
window.addEventListener('online', () => {
window.location.reload()
})
}
</script>