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
48 lines
1.1 KiB
TypeScript
48 lines
1.1 KiB
TypeScript
/**
|
|
* Composable to track online/offline status
|
|
*
|
|
* Usage:
|
|
* const { isOnline, wasOffline } = useOnlineStatus()
|
|
*
|
|
* watch(isOnline, (online) => {
|
|
* if (online && wasOffline.value) {
|
|
* // User came back online, sync data
|
|
* }
|
|
* })
|
|
*/
|
|
export function useOnlineStatus() {
|
|
const isOnline = ref(true)
|
|
const wasOffline = ref(false)
|
|
|
|
if (process.client) {
|
|
// Initial state
|
|
isOnline.value = navigator.onLine
|
|
|
|
// Listen for online/offline events
|
|
const updateOnlineStatus = () => {
|
|
const online = navigator.onLine
|
|
|
|
if (!online && isOnline.value) {
|
|
// Just went offline
|
|
wasOffline.value = true
|
|
}
|
|
|
|
isOnline.value = online
|
|
}
|
|
|
|
window.addEventListener('online', updateOnlineStatus)
|
|
window.addEventListener('offline', updateOnlineStatus)
|
|
|
|
// Cleanup on unmount
|
|
onUnmounted(() => {
|
|
window.removeEventListener('online', updateOnlineStatus)
|
|
window.removeEventListener('offline', updateOnlineStatus)
|
|
})
|
|
}
|
|
|
|
return {
|
|
isOnline: readonly(isOnline),
|
|
wasOffline: readonly(wasOffline)
|
|
}
|
|
}
|