使用 Workbox 的动态缓存

Question

我正在使用工作箱路由进行动态缓存。我不想给出 fix 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 的一部分（例如，匹配一个普通的前缀或后缀）。

假设您的公共前缀是 /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，但对您来说有意义的值）更符合您的意图。

使用 Workbox 的动态缓存

Dynamic Caching using Workbox

service-worker

workbox