Workbox CacheFirst 总是从网络中获取（从缓存中完成后）

Question

我有一个 Web 应用程序想要缓存最近引用的图像以支持离线使用。图片预计不会改变，所以我已经为来自图片服务器的所有请求配置了我的 Workbox-based service worker to use the CacheFirst 策略：

//service-worker.js

self.skipWaiting();
clientsClaim();
cleanupOutdatedCaches();

registerRoute(
  ({ request }) => request.url.startsWith('https://example.com'),
  new CacheFirst({
    cacheName: 'images',
    plugins: [
      new CacheableResponsePlugin({ statuses: [200] }),
      new ExpirationPlugin({
        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 days
        maxEntries: 100,
      }),
    ],
  })
);

当我的应用程序运行时，我可以在 Chrome 开发人员工具的“网络”选项卡中看到服务工作者在初始加载后成功提供这些图像：

到目前为止一切顺利。但是，Network 选项卡中还有另一个请求表明 service worker 本身正在从网络中获取图像（此处由浏览器的磁盘缓存满足）：

我对CacheFirst的理解是，如果缓存满足请求，service worker根本不应该发起网络请求。是什么导致了这种行为？

Answer 1

调试时，我在 Chrome 开发人员工具中错过了来自 Workbox 的这条消息：

The request for '/service-worker.js' returned a response that does not meet the criteria for being cached.

这让我在 <img> 标签中找到了 , and some helpful information describing third-party requests, which allowed me to fix this in my environment using the crossorigin 属性：

<img :src="imagePath"
     crossorigin="anonymous"
/>

回想起来，原始图像根本没有被缓存的另一个线索（即使它们被 service worker 满足）是 Chrome 开发者工具中的缓存存储资源管理器只显示了工作箱预缓存（而不是我的“图像”缓存将保存这些缓存的图像）：

Workbox CacheFirst 总是从网络中获取（从缓存中完成后）

Workbox CacheFirst always fetching from network (after fulfilling from cache)

google-chrome-devtools

service-worker

workbox