使用 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

文档中提供了有关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缓存过期。每个与 匹配的唯一 URLRegExp都将获得自己的缓存条目，如果您设置maxEntries为 1，那么您最终只会缓存最后使用的 URL，而所有其他条目每次都会过期。我假设将其设置为更高的值（我使用了 50，但无论对您有意义）更符合您的意图。