Angular中如何通过缓存与更新方法缓存API响应，实现刷新优先展示缓存数据？

你在ngsw-config.json里写的配置有两个关键错位：

• 选的freshness策略是网络优先逻辑：每次请求都会优先从服务器拉数据，拿不到才读缓存，用户打开页面还是要等半天加载base64图片，根本起不到秒开的作用
• 设的maxAge: "0u"代表缓存没有有效期，完全不符合你要的“定期更新缓存”的逻辑

你需要实现的“打开页面直接读缓存秒展示、后台静默拉取新数据、新数据下次访问生效”的效果，刚好对应Angular Service Worker内置的Stale-While-Revalidate能力，也就是performance缓存策略，不需要手写复杂的Service Worker拦截代码，直接修改配置即可，具体配置如下：

"dataGroups": [
  {
    "name": "client-business-data",
    "urls": [
      "/api/negozi",
      "/api/negozi/images"
    ],
    "cacheConfig": {
      "strategy": "performance",
      "maxSize": 100,
      "maxAge": "1d",
      "timeout": "5s"
    }
  }
]

配置参数说明 #

• strategy: "performance"：这是实现需求的核心开关，Angular Service Worker已经把目标逻辑完整封装好了，运行逻辑完全匹配你的要求：
  1. 用户发起请求时，Service Worker直接从本地缓存读取已有数据返回，页面立刻渲染客户端列表和logo，不需要等待网络响应
  2. 同时Service Worker在后台静默向服务器发起请求拉取最新的接口数据
  3. 后台拉取到的新数据会自动覆盖更新本地缓存，这部分更新不会推送给当前已经打开的页面，只会在用户下次打开/刷新页面时被读取，完全符合“新数据下次访问生效”的要求
• urls：需要把你代码里调用的两个接口（客户端列表接口、base64图片接口）都加入匹配规则，避免漏缓存。你之前写的/api/*虽然范围广，但建议写得更精准，避免把其他不需要缓存的接口也纳入缓存逻辑
• maxSize: 100：设置缓存最多存储100个响应条目，避免缓存无限膨胀占用本地存储空间
• maxAge: "1d"：设置缓存条目最长保留1天，超过有效期的旧缓存会被自动清理
• timeout: "5s"：当本地没有对应缓存时，最多等待5秒网络响应，超时则走默认的错误处理逻辑

你现在写的ngOnInit的业务逻辑不需要大改，只要避开几个容易踩的坑：

• 确认两个接口的实际请求路径和dataGroups里写的匹配规则完全对上，避免因为路径带斜杠、参数前缀、域名差异导致Service Worker拦截不到请求
• 不要给这两个API请求手动添加Cache-Control: no-cache之类的请求头，否则会绕过Service Worker的缓存拦截逻辑
• 因为logo是base64格式存在接口响应里的，不需要单独把logo拿出来做静态资源缓存，只要接口被纳入缓存规则，所有base64内容都会和接口数据一起被缓存，不需要额外写图片处理逻辑

补充：之前使用的freshness策略适合对数据时效性要求极高、必须每次展示最新数据的场景，和你需要的“秒开优先、后台更新”的目标完全不匹配，不要用在这个场景下。

内容的提问来源于stack exchange，提问作者NiceToMytyuk