service-worker - 如何有条件地缓存工作箱中的 API

Question

关于我的目标的详细信息。

我将工作箱 webpack 插件配置为将 API 缓存 30 秒。我想在触发不同的 API 请求时有条件地强制缓存破坏它。

例如，下面的配置缓存功能标志。当页面向“updateTests”发送请求时，我试图缓存它。

工作箱配置以缓存功能标志 工作箱配置已更新以清除功能标志缓存清除使其工作

我尝试过的事情

• 手动删除 IndexedDB 会重新获取功能标志

Answer 1

只是为了确保我理解：

• 您的 API 调用feature-flags在其 URL 中包含 ，并且您希望所有这些调用都在名为 的缓存中以缓存优先的方式提供服务api，最长生命周期为 30 秒。

• 如果在任何时候浏览器对包含 的 URL 发出请求updateFlags，它应该充当一种“终止开关”，自动清除api缓存的内容，确保下一个feature-flags请求总是针对网络。

假设这是一个准确的摘要，您可以runtimeCaching在配置中添加一个新路由，该路由执行以下操作：

runtimeCaching: [{
  // existing route
}, {
  urlPattern: new RegExp('updateFlags'),
  handler: async ({request, event}) => {
    // Deleting the 'api' cache will ensure that the next API
    // request goes against the network.
    event.waitUntil(caches.delete('api'));

    // Assuming that you want the actual request for the URL
    // containing updateFlags to be made against the server:
    return fetch(request);
  },
}]