服务工作者：如何使用Workbox缓存没有扩展名的图像

Question

我是新的服务工作者在我的页面我有没有扩展[* .jpg，* .png等]的图像像这样的“www.domain.com/api/media/a2b93f21-1acf-4e5e-9b19-6d7c68aaadc2”我从API获得它们。

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

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 ...
}