使用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。与RegExp匹配的每个唯一URL都将获得自己的缓存条目，如果您将maxEntries设置为1，那么您将只缓存最后使用的URL，每次之后所有其他条目都过期。我假设把它设置为更高的东西(我用了50，但对你有意义的东西)更符合你的意愿。