Javascript 子文件夹中图像的工作盒路由

我使用workbox来管理我的资产的缓存，这非常有效

缓存图像时，正则表达式有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
      }),
    ],
  }),
);

workbox.routing.registerRoute(
/images\/.（？：png | gif | jpg | jpeg | svg | ico | webp）$/，/有几种不同的方法可以在Workbox中定义路由。虽然您可以像现在这样将RegExp作为第一个参数传递到
registerRoute（）
，但您可以传递一个，它可以检查传入的请求并返回一个“truthy”或假值，具体取决于是否要触发路由

在工作盒中有一个用于根据
请求设置路由的文档。对于用作页面上图像的子资源，destination
值将是
'image'
。如果要限制路由，可以将其与
url.pathname
中的
复选框结合使用，以便它只匹配某个子文件夹中的图像

所以，综合起来，它看起来像：

workbox.routing.registerRoute(
  ({request, url}) => request.destination === 'image' &&
                      url.pathname.startsWith('/images'),
  workbox.strategies.cacheFirst({
    cacheName: 'images',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 100,
        maxAgeSeconds: 60 * 60 * 24 * 365
      }),
    ],
  })
);

不确定正则表达式的工作盒等：
images\/.*。（？：png | gif | jpg | jpg | svg | ico | webp）$
。请参见演示：。它只需要取一个
，并使其
*
用于“匹配任何次数”，然后是一个实际的