用于特定文件夹和子文件夹的已定义文件类型的正则表达式

Question

我正在使用工作箱来管理资产的缓存，效果很好。

缓存图像时，正则表达式出现1或2个问题：

我正在尝试将所有图像缓存在图像文件夹和图标子文件夹（下面的文件夹结构的图像）

我尝试了以下尝试来缓存图像：

workbox.routing.registerRoute(
  /images\/.(?:png|gif|jpg|jpeg|svg|ico|webp)$/,  //<-- Regexp
  workbox.strategies.cacheFirst({
   cacheName: 'images',
   plugins: [
    new workbox.expiration.Plugin({
      maxEntries: 100,
      maxAgeSeconds: 60 * 60 * 24 * 365
    }),
  ],
 }),
);

//I also tried a regexp on the entire images folder
workbox.routing.registerRoute(
  new RegExp('^/images/'),    //<-- Regexp
  workbox.strategies.cacheFirst({
    cacheName: 'images',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 100,
        maxAgeSeconds: 60 * 60 * 24 * 365
      }),
    ],
  }),
);

我包括上面的代码示例以提供我要实现的目标的上下文

任何帮助将不胜感激！

文件夹结构：

Answer 1

您可以通过几种不同的方法在Workbox中定义路由。虽然可以像执行操作一样将RegExp作为第一个参数传递给registerRoute()，但是可以传递matchCallback function，后者可以检查传入的请求并根据以下情况返回“真”或假值：是否要触发路线。

Workbox文档中有一个matchCallback，用于基于recipe值设置路由，对于在页面上用作图像的子资源，该路由将为request.destination。如果想限制路径，使其只与某个子文件夹中的图像匹配，则可以将其与'image'内部的url.pathname的检查结合起来。

所以，总的来说，看起来像是：

matchCallback