Workbox CacheFirst策略缓存Giphy GIF离线访问失败求助

这不是Workbox的Bug，问题根源在于跨域资源的缓存处理逻辑。Giphy的GIF属于跨域资源，当Service Worker尝试缓存它时，浏览器会返回一个「opaque响应」（这是浏览器对无CORS头的跨域资源的特殊处理方式），而Workbox默认不会将这种响应视为可缓存的有效资源——哪怕你在线时看起来缓存成功了，离线时也无法正确读取它。

修复方案 #

修改你的Workbox路由配置，添加workbox.cacheableResponse.Plugin插件，明确允许缓存状态码为0的opaque响应：

workbox.routing.registerRoute(
  /.*\.(?:png|jpg|jpeg|svg|webp|gif)/,
  new workbox.strategies.CacheFirst({
    cacheName: "images",
    plugins: [
      // 新增：允许缓存opaque响应（状态码0）和成功响应（状态码200）
      new workbox.cacheableResponse.Plugin({
        statuses: [0, 200]
      }),
      new workbox.expiration.Plugin({
        maxEntries: 60,
        maxAgeSeconds: 2592000,
        purgeOnQuotaError: false
      })
    ]
  }),
  'GET'
);

原理说明 #

• 对于没有配置CORS的跨域资源，浏览器会将其响应标记为opaque，状态码显示为0（而非常规的200）。
• Workbox的缓存策略默认只缓存状态码为200的响应，所以需要显式添加0到允许的状态列表中，让它认可这种opaque响应是可缓存的。
• 添加这个配置后，在线时Service Worker会正确缓存Giphy的GIF，离线时就能从images缓存中读取并返回资源了。

最后检查一下：确保你的Service Worker在HTTPS环境下运行（本地开发用localhost是例外），并且在线刷新页面后，能在Chrome DevTools的Application > Cache Storage中看到Giphy的GIF条目已经被缓存。

内容的提问来源于stack exchange，提问作者David Dal Busco