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:
47
app/composables/useOnlineStatus.ts
Normal file
47
app/composables/useOnlineStatus.ts
Normal file
@@ -0,0 +1,47 @@
|
||||
/**
|
||||
* 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)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user