From 6f5b87136bec14d735a16e24314ca106e294b22f Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Fri, 31 Oct 2025 00:47:10 +0100
Subject: [PATCH] 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.
---
 src/hooks/useImageCache.ts        | 2 ++
 src/services/imageCacheService.ts | 3 ++-
 src/sw.ts                         | 8 +++++---
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/hooks/useImageCache.ts b/src/hooks/useImageCache.ts
index 6d93fe41..975ff7fb 100644
--- a/src/hooks/useImageCache.ts
+++ b/src/hooks/useImageCache.ts
@@ -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
 }
 
diff --git a/src/services/imageCacheService.ts b/src/services/imageCacheService.ts
index e35a9b4a..b68a38a7 100644
--- a/src/services/imageCacheService.ts
+++ b/src/services/imageCacheService.ts
@@ -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
diff --git a/src/sw.ts b/src/sw.ts
index 5bcf5f0c..9bc45176 100644
--- a/src/sw.ts
+++ b/src/sw.ts
@@ -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',