Angular 5 Service Worker如何在数据更新/插入时刷新缓存？

嘿，这个问题我帮很多开发者解决过——Angular Service Worker默认的缓存策略确实更偏向静态资源优化，碰到动态API频繁更新的场景，就得针对性调整策略了。下面给你几个实用的方案：

这是Angular Service Worker最官方的解决方案，通过ngsw-config.json里的dataGroups字段，给API请求单独设置缓存策略，区别于静态资源。

比如你可以设置优先从网络获取最新数据（freshness策略），同时在网络失败时 fallback 到缓存，兼顾新鲜度和离线可用性：

{
  "index": "/index.html",
  "assetGroups": [
    // 你的静态资源缓存配置...
  ],
  "dataGroups": [
    {
      "name": "dynamic-api-cache",
      "urls": [
        "/api/**" // 匹配你的所有API端点，可根据需求细化
      ],
      "cacheConfig": {
        "strategy": "freshness", // 优先网络请求
        "maxSize": 100, // 缓存最多100条请求
        "maxAge": "1h", // 缓存条目1小时后过期
        "timeout": "5s" // 网络请求5秒无响应时，用缓存兜底
      }
    }
  ]
}

• freshness策略下，Service Worker会先发起网络请求，拿到新数据后更新缓存，再把新数据返回给应用；
• 如果你的部分API更新没那么频繁，也可以用performance策略，但搭配maxAge设置较短的过期时间，比如"maxAge": "5m"，这样5分钟内用缓存，之后重新请求网络。

如果你的应用有明确的“更新/插入”操作（比如用户提交表单、修改数据），可以在操作成功后，主动更新对应的缓存条目，确保下次请求直接拿到最新数据。

你可以封装一个简单的缓存操作服务：

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ApiCacheService {
  // 更新指定API的缓存
  async updateApiCache(url: string, newData: any) {
    // 打开对应的数据缓存组（要和dataGroups里的name一致）
    const cache = await caches.open('dynamic-api-cache');
    // 构造符合格式的Response对象
    const updatedResponse = new Response(JSON.stringify(newData), {
      headers: { 'Content-Type': 'application/json' }
    });
    // 更新缓存条目
    await cache.put(url, updatedResponse);
  }
}

然后在组件的提交逻辑里调用：

async onSubmit(data: any) {
  const response = await this.http.post('/api/items', data).toPromise();
  // 提交成功后，更新列表接口的缓存
  await this.apiCacheService.updateApiCache('/api/items', response.updatedList);
}

如果后端可以配合，你可以在API响应里设置Cache-Control头，强制Service Worker验证缓存新鲜度：

Cache-Control: no-cache, must-revalidate

这样每次请求时，Service Worker都会先向服务器验证缓存是否有效，若服务器返回304 Not Modified才用缓存，否则更新缓存并返回新数据。

另外，也可以给频繁更新的API请求添加时间戳参数，比如：

getLatestData() {
  const timestamp = Date.now();
  return this.http.get(`/api/latest-data?t=${timestamp}`);
}

但这个方法会降低缓存利用率，适合更新频率极高、完全不能用旧数据的场景。

一些注意事项 #

• 修改ngsw-config.json后，必须重新构建应用（ng build --prod），Service Worker才会加载新的配置；
• 测试时可以在Chrome DevTools的「Application > Service Workers」面板查看缓存条目，验证策略是否生效；
• 如果你的API需要认证，要确保dataGroups的配置包含认证请求头（比如在cacheConfig里添加"headers": ["Authorization"]），避免缓存时丢失身份信息。

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