mirror of
https://github.com/dergigi/boris.git
synced 2026-02-23 07:54:59 +01:00
fix: preload images when loading articles from cache
When loading articles from localStorage cache, images aren't automatically cached by the Service Worker because they're not fetched until the <img> tag renders. If the user goes offline before that, images won't be available. Now we: 1. Added preloadImage() function to explicitly fetch images via Image() and fetch() 2. Preload images when loading from localStorage cache 3. Preload images when receiving first event from relays This ensures images are cached by Service Worker before going offline, making them available on refresh when offline.
This commit is contained in:
@@ -28,3 +28,24 @@ export function useCacheImageOnLoad(
|
||||
void imageUrl
|
||||
}
|
||||
|
||||
/**
|
||||
* Preload an image URL to ensure it's cached by the Service Worker
|
||||
* This is useful when loading content from cache - we want to ensure
|
||||
* images are cached before going offline
|
||||
*/
|
||||
export function preloadImage(imageUrl: string | undefined): void {
|
||||
if (!imageUrl) return
|
||||
|
||||
// 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.src = imageUrl
|
||||
|
||||
// Also try using fetch to explicitly trigger Service Worker
|
||||
// This ensures the image is cached even if <img> tag hasn't rendered yet
|
||||
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
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user