Angular PWA浏览器缓存持续膨胀原因及抑制方案咨询

安全阿岳

2026-5-14

我太懂你这种头疼了——iOS上Safari的缓存限额真的苛刻到离谱，一旦缓存占满，Angular PWA直接就罢工了。针对你的需求，咱们可以通过调整Service Worker的配置+一些针对性策略来把缓存体积压下来，下面是具体的优化方案：

一、精细调整Asset Groups缓存规则

你的当前配置中，assetGroups的设置有不少优化空间，尤其是预取范围和资源匹配逻辑：

缩小App组的预取范围：
当前app组用prefetch模式缓存所有/*.css和/*.js，这会把所有懒加载模块的chunk文件都提前下载，直接增加初始缓存体积。建议只缓存核心入口文件，把懒加载chunk移到assets组按需加载：
```
{
  "name": "app",
  "installMode": "prefetch",
  "resources": {
    "files": [
      "/main*.css",
      "/main*.js",
      "/runtime*.js",
      "/polyfills*.js"
    ]
  }
}
```

优化Assets组的资源匹配与更新模式：
当前assets组的updateMode设为prefetch，会在SW更新时主动下载所有匹配资源，很容易导致缓存膨胀。建议把updateMode改成lazy，同时缩小资源匹配范围，排除不必要的大文件：

{
  "name": "assets",
  "installMode": "lazy",
  "updateMode": "lazy", // 改成lazy，仅当用户访问时才更新缓存
  "resources": {
    "files": [
      "/assets/**/*.svg",
      "/assets/**/*.webp", // 优先缓存体积更小的图片格式
      "/profiles/*.json", // 精确匹配，避免缓存整个目录下的所有文件
      "/*.(eot|cur|otf|ttf|woff|woff2|ani)"
    ],
    "excludes": [ // 排除大体积的图片资源
      "/assets/**/*.png",
      "/assets/**/*.gif"
    ]
  }
}

二、优化Data Groups的缓存策略

你的api组配置已经比较克制，但可以进一步精细化：

缩短缓存有效期并控制条目数：
如果API数据不需要保留7天这么久，把maxAge缩短到1d（1天），同时根据业务需求调整maxSize，比如设为3，避免缓存过多旧的API响应。另外可以开启ignoreSearch（业务允许的前提下），避免因为URL查询参数不同生成重复缓存：
```
{
  "name": "api",
  "version": 1,
  "urls": ["/api/**"],
  "cacheConfig": {
    "strategy": "freshness",
    "maxSize": 3,
    "maxAge": "1d",
    "timeout": "1s",
    "ignoreSearch": true // 忽略查询参数，避免重复缓存相同资源的不同参数版本
  }
}
```

三、启用自动+手动缓存清理机制

Angular Service Worker会在版本更新时自动清理旧缓存，但你可以增强清理能力：

利用版本号触发清理：每次发布新版本时，修改ngsw-config.json中assetGroups或dataGroups的version字段，SW会识别为新版本，自动删除旧的缓存条目。

手动清理缓存（可选）：在应用里加个“清理缓存”按钮，通过SwUpdate服务配合缓存API手动清理旧缓存：

import { SwUpdate } from '@angular/service-worker';
import { caches } from 'workbox-window';

constructor(private swUpdate: SwUpdate) {}

clearOldCache() {
  if (this.swUpdate.isEnabled) {
    caches.keys().then(cacheNames => {
      cacheNames.forEach(cacheName => {
        if (!cacheName.includes('v1')) { // 根据你的缓存版本标识判断
          caches.delete(cacheName);
        }
      });
    });
  }
}

四、iOS Safari专属优化

iOS的缓存限额比其他浏览器更严格，额外注意这几点：

别把超过1MB的静态资源放进assetGroups预取，尽量按需加载或用CDN流式加载；
用户上传的图片、动态生成的内容不要加入缓存规则，直接走网络请求；
定期用Safari开发者工具查看缓存占用，针对性调整规则。

最后，给你一份修改后的完整配置参考：

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

记得每次改完配置后重新构建部署，确保Service Worker更新生效，应该就能有效控制iOS上的缓存膨胀问题了。

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