javascript - Angular PWA - 为什么浏览器缓存不断增长？如何阻止它？

Question

我想知道是否有一种方法可以管理浏览器缓存并在 Angular PWA 应用程序中尽可能少地保留它。

IOS 设备中不断增长的浏览器缓存填满了网站数据中的缓存限制，应用程序因此停止运行!

Service Worker 是否有特定的配置来实现这一点？

我当前的配置:

{
  "index": "/",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/*.css",
        "/*.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**",
        "/profiles/**",
        "/*.(eot|svg|cur|webp|png|gif|otf|ttf|woff|woff2|ani)"
      ]
    }
  }],
  "dataGroups": [{
    "name": "api",
    "version": 1,
    "urls": ["/api/**"],
    "cacheConfig": {
      "strategy": "freshness",
      "maxSize": 1,
      "maxAge": "7d",
      "timeout": "1s"
    }
  }]
}

Answer 1

我不认为你可以阻止缓存的增长，因为正如我现在所见，你正在缓存所有内容，包括静态资源和 api 缓存

您可以做的是告诉它不要缓存您的页面，方法是发送适当的 header 或使用这些元标记:

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

更新删除这个，你应该是好的。这是为了 API 缓存

"dataGroups": [{
    "name": "api",
    "version": 1,
    "urls": ["/api/**"],
    "cacheConfig": {
      "strategy": "freshness",
      "maxSize": 1,
      "maxAge": "7d",
      "timeout": "1s"
    }
  }]