如何使用工作箱在safari中永远防止后备图像的缓存

Question

我正在使用workbox（v4.1）生成ServiceWorker，如果无法获取所请求的图像，它将提供通用的后备图像

这适用于Google Chrome。问题是，如果无法获取图像，则会显示我的falback，Safari会缓存回退，并且不会在下次请求时重试再次获取图像。

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();
    }
});

如何确保回退未在Safari中缓存，并在重新加载页面时显示正确的图像？

我已经尝试在提供后备时将缓存标题修改为“无存储”，但我没有让它工作？有没有办法将图像（被回退替换）放在他们自己的缓存中，并且到期时间非常短？

任何帮助将非常感激:)

Answer 1

我建议配置您的Web服务器，以便为它为Cache-Control: no-cache发送的响应设置/Images/fallback.svg。 （这可能是您所服务的任何URL的good idea，其URL中不包含has。）

这应该导致Safari重新验证回退响应，而不是在下次发出真实图像请求时使用它。