Angular 新鲜度策略也从缓存中获取数据

Question

在 Angular 文档中，service worker freshness 策略描述如下:

freshness optimizes for currency of data, preferentially fetching requested data from the network. Only if the network times out, according to timeout, does the request fall back to the cache. This is useful for resources that change frequently; for example, account balances.

我在我的解决方案中实现了这个策略:

// ngsw-config.json

"dataGroups": [{
    "name": "jokes-cache",
    "urls": [ "https://icanhazdadjoke.com/" ],
    "cacheConfig": {
      "strategy": "performance",
      "maxSize": 5,
      "maxAge": "1d"
    }
  },
  {
    "name": "stocks-cache",
    "urls": [ "https://api.worldtradingdata.com/api/v1/stock" ],
    "cacheConfig": {
      "strategy": "freshness",
      "maxSize": 10,
      "maxAge": "1d",
      "timeout": "5s"
    }
  }]

但是当我查看 DevTools 的 Network 选项卡时，我可以看到不仅触发了网络调用，而且还访问了本地缓存:

我希望只看到对“stock”端点的网络调用，而无法访问缓存(响应在 5 秒超时之前出现)。

Answer 1

屏幕截图看起来是正确的。第二个请求附近的齿轮图标并不意味着访问缓存 - 它只是意味着这个网络请求是从 service worker 执行的(在这种情况下这是预期的行为)。