b98b3bf222
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
70 lines
1.9 KiB
Vue
70 lines
1.9 KiB
Vue
<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>
|