mirror of
https://github.com/dergigi/boris.git
synced 2025-12-17 06:34:24 +01:00
fix: image caching issues
1. Fix cache name mismatch: imageCacheService now uses 'boris-images' to match the Service Worker cache name 2. Remove cross-origin restriction: Cache ALL images, not just cross-origin ones. This ensures article images from any source are cached by the Service Worker 3. Update comments to clarify Service Worker caching behavior Images should now be properly cached when loaded via <img> tags.
This commit is contained in:
@@ -10,6 +10,8 @@ export function useImageCache(
|
||||
imageUrl: string | undefined
|
||||
): string | undefined {
|
||||
// Service Worker handles everything - just return the URL as-is
|
||||
// The Service Worker will intercept fetch requests and cache them
|
||||
// Make sure images use standard <img src> tags for SW interception
|
||||
return imageUrl
|
||||
}
|
||||
|
||||
|
||||
@@ -5,7 +5,8 @@
|
||||
* Service Worker automatically caches images on fetch
|
||||
*/
|
||||
|
||||
const CACHE_NAME = 'boris-image-cache-v1'
|
||||
// Must match the cache name in src/sw.ts
|
||||
const CACHE_NAME = 'boris-images'
|
||||
|
||||
/**
|
||||
* Clear all cached images
|
||||
|
||||
@@ -23,13 +23,15 @@ sw.skipWaiting()
|
||||
clientsClaim()
|
||||
|
||||
|
||||
// Runtime cache: Cross-origin images
|
||||
// This preserves the existing image caching behavior
|
||||
// Runtime cache: All images (cross-origin and same-origin)
|
||||
// Cache both external images and any internal image assets
|
||||
registerRoute(
|
||||
({ request, url }) => {
|
||||
const isImage = request.destination === 'image' ||
|
||||
/\.(jpg|jpeg|png|gif|webp|svg)$/i.test(url.pathname)
|
||||
return isImage && url.origin !== sw.location.origin
|
||||
// Cache all images, not just cross-origin ones
|
||||
// This ensures article images from any source get cached
|
||||
return isImage
|
||||
},
|
||||
new StaleWhileRevalidate({
|
||||
cacheName: 'boris-images',
|
||||
|
||||
Reference in New Issue
Block a user