时间戳

首页 > 解决方案 > Angular PWA - 为什么浏览器缓存不断增长？如何阻止它？

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

问题描述

我想知道有没有办法管理浏览器缓存并在 Angular PWA 应用程序中尽可能少地保留它。

IOS 设备中不断增长的浏览器缓存填补了网站数据中的缓存限制，因此应用程序停止工作！

服务工作者是否有特定的配置来实现这一点？

我目前的配置：

{
  "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"
    }
  }]
}

标签： javascriptnode.jsangularsingle-page-applicationprogressive-web-apps

解决方案

我认为您无法阻止缓存的增长，因为正如我现在所看到的，您正在缓存所有内容，包括静态资源和 api 缓存

你可以做的是告诉它不要缓存你的页面，通过发送适当的标题或使用这些元标记：

<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"
    }
  }]

推荐阅读