如何在工作盒中有条件地缓存API

Question

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

我的工作箱webpack插件配置为缓存一个API的持续时间为30秒。当触发不同的API请求时，我希望强制缓存有条件地关闭它。

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

工作箱配置以缓存功能标志

更新后的工作区配置以清除功能标志

缓存清晰，使其工作

​

我试过的东西

删除feature-flags的

• 手动执行新的IndexedDB提取

Answer 1

只是为了确保我明白：

• 您有API调用，在它们的URL中包含feature-flags，并且您希望所有这些调用都得到缓存服务--首先从名为api的缓存中得到服务，最大生存期为30秒。

• 如果浏览器在任何时候对包含updateFlags的URL发出请求，应该充当一种“杀死开关”，自动清除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);
  },
}]