Service Worker：如何使用 Workbox 缓存没有扩展的图像

Question

我是我的页面中的服务人员的新手，我有没有扩展名的图像 [*.jpg、*.png 等]，比如我从 API 获取的“www.domain.com/api/media/a2b93f21-1acf-4e5e-9b19-6d7c68aaadc2”。

以下代码可以正常工作，但不适用于此类图像

workbox.routing.registerRoute(
    // Cache image files.
    /\.(?:png|jpg|jpeg|svg|gif)$/,
    // Use the cache if it's available.
    new workbox.strategies.CacheFirst({
        // Use a custom cache name.
        cacheName: 'image-cache',
        plugins: [
            new workbox.expiration.Plugin({
                // Cache only 20 images.
                maxEntries: 20,
                // Cache for a maximum of a week.
                maxAgeSeconds: 7 * 24 * 60 * 60,
            })
        ],
    })
);

有什么建议吗？

Answer 1

带有工作箱，来自manual -

你可以使用RequestDestination枚举类型 确定策略的请求的目的地。例如，当 目标是数据

：

workbox.routing.registerRoute(
  // Custom `matchCallback` function
  ({event}) => event.request.destination === 'image',
  new workbox.strategies.CacheFirst({
    cacheName: 'image',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 20,
        maxAgeSeconds: 7 * 24 * 60 * 60, // 1 week
      }),
    ],
  })
);

在普通的服务工作者中，您可以查看request accept header

if (request.headers.get('Accept').indexOf('image') !== -1) { 
    ... stash in cache ...
}