diff --git a/src/hooks/useImageCache.ts b/src/hooks/useImageCache.ts
index f21e1d88..8d5329f7 100644
--- a/src/hooks/useImageCache.ts
+++ b/src/hooks/useImageCache.ts
@@ -12,34 +12,6 @@ export function useImageCache(
// 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
tags for SW interception
-
- // Debug: Log when image URL is provided
- if (imageUrl) {
- console.log('[image-cache] useImageCache hook called with URL:', imageUrl)
-
- // Check if Service Worker is available
- if ('serviceWorker' in navigator) {
- if (navigator.serviceWorker.controller) {
- console.log('[image-cache] ✅ Service Worker controller is active')
- } else {
- console.warn('[image-cache] ⚠️ Service Worker not controlling page - checking registration...')
- navigator.serviceWorker.getRegistration().then((reg) => {
- if (reg) {
- console.log('[image-cache] Service Worker registered but not controlling:', {
- active: !!reg.active,
- installing: !!reg.installing,
- waiting: !!reg.waiting
- })
- } else {
- console.warn('[image-cache] ❌ No Service Worker registration found')
- }
- })
- }
- } else {
- console.warn('[image-cache] ❌ Service Workers not supported in this browser')
- }
- }
-
return imageUrl
}
@@ -63,48 +35,24 @@ export function useCacheImageOnLoad(
*/
export function preloadImage(imageUrl: string | undefined): void {
if (!imageUrl) {
- console.log('[image-preload] Skipping - no image URL provided')
return
}
- console.log('[image-preload] Preloading image:', imageUrl)
-
- // Check if Service Worker is available
- if ('serviceWorker' in navigator && navigator.serviceWorker.controller) {
- console.log('[image-preload] ✅ Service Worker is active')
- } else {
- console.warn('[image-preload] ⚠️ Service Worker not active - images may not cache')
- }
-
// Create a link element with rel=prefetch or use Image object to trigger fetch
// Service Worker will intercept and cache the request
const img = new Image()
- img.onload = () => {
- console.log('[image-preload] ✅ Image loaded successfully:', imageUrl)
- }
-
img.onerror = (err) => {
- console.error('[image-preload] ❌ Image failed to load:', imageUrl, err)
+ console.error('[image-preload] Failed to load image:', imageUrl, err)
}
img.src = imageUrl
- console.log('[image-preload] Created Image() object with src:', imageUrl)
// Also try using fetch to explicitly trigger Service Worker
// This ensures the image is cached even if
tag hasn't rendered yet
- fetch(imageUrl, { mode: 'no-cors' })
- .then((response) => {
- console.log('[image-preload] ✅ Fetch successful for image:', imageUrl, {
- status: response.status,
- type: response.type,
- url: response.url
- })
- })
- .catch((err) => {
- console.warn('[image-preload] ⚠️ Fetch failed (may be CORS issue, Image() should still work):', imageUrl, err)
- // Ignore errors - image might not be CORS-enabled, but SW will still cache it
- // The Image() approach above will work for most cases
- })
+ fetch(imageUrl, { mode: 'no-cors' }).catch(() => {
+ // Ignore errors - image might not be CORS-enabled, but SW will still cache it
+ // The Image() approach above will work for most cases
+ })
}