如何有条件地缓存工作箱中的 API答案

【问题标题】：How to conditionally cache bust an API in workbox如何有条件地缓存工作箱中的 API
【发布时间】：2020-10-31 01:25:21
【问题描述】：

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

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

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

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

我尝试过的事情

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

【问题讨论】：

标签： service-worker workbox workbox-webpack-plugin

【解决方案1】：

只是为了确保我理解：

您的 API 调用在其 URL 中包含 feature-flags，并且您希望所有这些调用在名为 api 的缓存中以缓存优先的方式提供服务，最长生命周期为 30 秒。
如果浏览器在任何时候对包含updateFlags 的 URL 发出请求，这应该充当一种“终止开关”，自动清除 api 缓存的内容，确保下一个 @ 987654326@ 请求总是会针对网络。

假设这是一个准确的摘要，您可以在配置中添加一个新的 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);
  },
}]

【讨论】：

它删除了缓存，但不知何故它仍然使用缓存的值。
如果它仍在提供缓存的值，那么它来自fetch(request)。这意味着您在 HTTP 响应中设置的 Cache-Control 标头允许响应来自浏览器缓存。您需要更改这些标头以禁用 HTTP 缓存。
我认为这不是问题，因为我有一个新的本地快速版本，它不进行 http 缓存。我又尝试了一件事。在cache.delete('api') 之后，我手动清除了indexedDB，它开始从服务器获取新鲜信息。我通过阅读deleteCacheAndMetadata 发现了这一点。在多次尝试调用该函数失败后，我继续清除索引数据库，它按预期工作。