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
59 lines
1.8 KiB
Vue
59 lines
1.8 KiB
Vue
<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>
|