service-worker - 使用 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 路由工作原理的背景资料 in the documentation .

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

假设您的通用前缀是 /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，但任何对你有意义的值)更符合你的意图。