I am using workbox (v4.1) to generate a ServiceWorker, which serves a generic fallback image, if the requested image can't be fetched

This works as intended for Google Chrome. The problem is, if an image couldn't be fetched, an my falback is shown instead, Safari caches the fallback and will not retry to fetch the image again on the next requests.

workbox.routing.registerRoute(
    /\.(?:png|jpg|jpeg|svg|gif|webp)$/,
    new workbox.strategies.StaleWhileRevalidate({
        cacheName: 'image-cache',
        plugins: [
            new workbox.expiration.Plugin({
                maxAgeSeconds: 7 * 24 * 60 * 60,
            })
        ],
    })
);

// Fallbacks
workbox.routing.setCatchHandler(({event}) => {
    switch (event.request.destination) {
        case 'image':
            fallbackImage = caches.match(workbox.precaching.getCacheKeyForURL('Images/fallback.svg'));
            return fallbackImage;
            break;

        case 'document':
            return  caches.match(workbox.precaching.getCacheKeyForURL('/Html/offline.html'));
            break;

        default:
            return Response.error();
    }
});

How can I make sure that the fallback isn't cached in Safari, and the correct image is shown when the page is reloaded ?

I've tried to modify the cache-header to "no-store" when the fallback is served, but I didn't get it to work ? Is there a way to put the images (that were replaced with the fallback) in their own cache with a very short expiration ?

Any help would be very appreciated :)

1 Answers

0
Jeff Posnick On

I would recommend configuring your web server to set Cache-Control: no-cache on the response it sends for /Images/fallback.svg. (That's probably a good idea for any URL that you serve that doesn't include a has in its URL.)

That should lead to Safari revalidating the fallback response instead of using it as-is the next time the real image request is made.