如何解决使用Workbox开发的PWA中缓存图片离线无法显示问题？

嘿，刚接触PWA用Workbox的时候，我也踩过图片离线加载不出来的坑！明明缓存里有图片，就是显示不出来，大概率是这几个原因，咱们一个个排查解决：

1. 跨域图片的Opaque响应没被允许缓存 #

NewsAPI返回的图片都是第三方域名的，浏览器加载跨域图片默认是no-cors模式，这种请求返回的是「Opaque响应」（状态码为0），而Workbox默认不会缓存这类响应。

解决方法：给图片的缓存策略加上CacheableResponsePlugin，明确允许缓存状态码0和200的响应：

// 在你的service-worker.js里配置图片路由
workbox.routing.registerRoute(
  // 匹配所有图片请求
  ({ request }) => request.destination === 'image',
  new workbox.strategies.CacheFirst({
    cacheName: 'news-images',
    plugins: [
      // 允许缓存Opaque响应（状态码0）和成功响应（200）
      new workbox.cacheableResponse.CacheableResponsePlugin({
        statuses: [0, 200],
      }),
      // 可选：设置缓存过期策略，避免缓存过多图片
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 50, // 最多缓存50张图片
        maxAgeSeconds: 7 * 24 * 60 * 60, // 缓存7天
      }),
    ],
  })
);

2. 缓存路由的匹配规则没覆盖到图片URL #

检查你的Workbox路由是否正确匹配了NewsAPI返回的图片URL：

• 如果图片URL带查询参数（比如?width=800），Workbox的默认匹配逻辑会包含查询参数，只要你的匹配函数是request.destination === 'image'就没问题；
• 如果用了自定义正则匹配URL，要确保能覆盖到完整的图片地址（比如/^https?:\/\/.*\.(png|jpg|jpeg|gif|webp)$/）。

3. 验证缓存是否真的生效 #

打开浏览器DevTools的「Application」面板：

• 进入「Cache Storage」，找到你配置的news-images缓存；
• 查看里面是否有对应的图片URL，确认缓存条目存在；
• 切换到「Offline」模式，刷新页面，查看图片请求的状态：如果是200 (from service worker)，说明缓存命中；如果是404，说明路由匹配有问题，或者图片请求没被触发过。

4. 动态加载图片的缓存触发 #

如果你的新闻内容是通过JS动态渲染到页面的（比如你app.js里的渲染逻辑），要确保图片的src设置后，浏览器确实发起了请求——有时候如果图片URL重复，浏览器会复用缓存，但第一次加载时必须让请求走服务工作线程，这样Workbox才能缓存它。

举个正确的渲染示例：

function renderNews(newsData) {
  main.innerHTML = newsData.articles.map(article => `
    <div class="news-item">
      <h3>${article.title}</h3>
      ${article.urlToImage ? `<img src="${article.urlToImage}" alt="${article.title}">` : ''}
      <p>${article.description}</p>
    </div>
  `).join('');
}

只要第一次在线时图片加载过，Workbox就会缓存它，离线时就能正常显示了。

内容的提问来源于stack exchange，提问作者user8586858