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
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:
69
app/pages/offline.vue
Normal file
69
app/pages/offline.vue
Normal 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>
|
||||
Reference in New Issue
Block a user