使用 Workbox 进行动态缓存

Question

我正在使用工作箱路由进行动态缓存。我不想给出修复 url，因为它会根据用户交互而改变。我怎样才能做到这一点？我像下面这样使用它，但它被固定在一个状态

let BASE_URL = location.protocol + "//" + location.host,
    API_URL = BASE_URL + '/ab/abc/api/'

我想缓存所有具有 /ab/abc/api/ 的 url

workbox.routing.registerRoute(API_URL, workbox.strategies.networkFirst({
  cacheName: 'abc',
  plugins: [
    new workbox.expiration.Plugin({
      maxEntries: 1
    }),
    new workbox.cacheableResponse.Plugin({
      statuses: [200]
    })
  ]

}));

Answer 1

in the documentation 提供了有关 Workbox 路由工作原理的更多背景信息。

不过，要回答您的具体问题，您可以创建一个基于正则表达式匹配的路由，并且该正则表达式只需要匹配传入 URL 的一部分（例如，匹配公共前缀或后缀）。

假设您的公共前缀是 /ab/abc/api/，并且您的实际 API 调用是针对该路径下存在的 URL（例如 /ab/abc/api/entries、/ab/abc/api/latest?t=1 等），您可以创建如下路由：

workbox.routing.registerRoute(
  new RegExp('/ab/abc/api'),
  workbox.strategies.networkFirst({
    cacheName: 'abc',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 50
      })
    ]
}));

我在那里更改的另一件事是maxEntries 用于缓存到期。每个与 RegExp 匹配的唯一 URL 都将获得自己的缓存条目，如果您将 maxEntries 设置为 1，那么您最终只会缓存最后使用的 URL，而所有其他条目在每次之后都过期。我假设将它设置为更高的值（我使用了 50，但对你来说任何有意义的值）更符合你的意图。