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

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，它可以检查传入的请求和 return "truthy" 或 false 值，具体取决于您是否希望路由触发。

Workbox 文档中有一个 recipe 用于根据 request.destination 值设置路由，对于在您的页面上用作图像的子资源，该值将是 'image'。如果你想限制你的路线，你可以将它与检查 matchCallback 中的 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
      }),
    ],
  })
);

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

Workbox routing for images in subfolders

javascript

regex

workbox