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

- 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:
Pantry Lead Agent
2026-02-25 00:07:44 +00:00
parent 7a01aecb34
commit b98b3bf222
5 changed files with 254 additions and 13 deletions

View 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)
}
}