feat: add development Service Worker for testing image caching

With injectManifest strategy, the Service Worker needs to be built, so it's
not available in dev mode. To enable testing image caching in dev, we now:
1. Created public/sw-dev.js - a simplified SW that only handles image caching
2. Updated registration to use sw-dev.js in dev mode, sw.js in production
3. Dev SW uses simple cache-first strategy for images

This allows testing image caching in development without needing a build.
This commit is contained in:
Gigi
2025-10-31 01:10:20 +01:00
parent 851cecf18c
commit cfa6dc4400
3 changed files with 66 additions and 12 deletions

View File

@@ -39,34 +39,34 @@ if ('serviceWorker' in navigator) {
}
// Not registered yet, try to register
// In dev mode, check if SW file exists and has correct MIME type before registering
// In dev mode, use the dev Service Worker for testing
if (import.meta.env.DEV) {
const devSwPath = '/sw-dev.js'
console.log('[sw-registration] Dev mode - using development Service Worker:', devSwPath)
try {
const response = await fetch(swPath)
// Check if dev SW exists
const response = await fetch(devSwPath)
const contentType = response.headers.get('content-type') || ''
const isJavaScript = contentType.includes('javascript') || contentType.includes('application/javascript')
console.log('[sw-registration] Dev mode - checking SW file:', {
console.log('[sw-registration] Dev SW check:', {
status: response.status,
contentType,
isJavaScript,
isHTML: contentType.includes('text/html')
isJavaScript
})
if (response.ok && isJavaScript) {
console.log('[sw-registration] Service Worker file available in dev mode, proceeding with registration')
return await navigator.serviceWorker.register(swPath)
console.log('[sw-registration] Development Service Worker available, proceeding with registration')
return await navigator.serviceWorker.register(devSwPath, { scope: '/' })
} else {
console.warn('[sw-registration] ⚠️ Service Worker file not available in dev mode:', {
console.warn('[sw-registration] ⚠️ Development Service Worker not available:', {
status: response.status,
contentType
})
console.warn('[sw-registration] Image caching will not work in dev mode - test in production build')
return null
}
} catch (err) {
console.warn('[sw-registration] ⚠️ Could not check Service Worker file in dev mode:', err)
console.warn('[sw-registration] Image caching will not work in dev mode - test in production build')
console.warn('[sw-registration] ⚠️ Could not load development Service Worker:', err)
return null
}
} else {