Angular中如何通过JS实现清空缓存并强制刷新，确保文件返回200而非304状态码

首先明确问题根因：window.location.reload(true)对应的硬刷新逻辑在新版浏览器中已经不保证完全跳过协商缓存，只要服务端返回304响应，浏览器还是会复用本地缓存的资源，所以才会出现调用后仍有304的情况。

下面是可落地的实现方案，按优先级排序：

1. 打包阶段加资源哈希（首选方案，生产环境最稳定） #

这个方案从根本上避免缓存命中问题，Angular原生支持：
打包时添加--output-hashing=all参数，命令如下：

ng build --prod --output-hashing=all

开启后所有打包生成的.js、.css、图片等静态资源文件名都会带上唯一的哈希串，版本更新后资源哈希会同步变化，资源路径完全不同，不可能命中旧缓存，所有新资源请求必然返回200状态码。

2. 运行时自动检测版本+强制清缓存刷新 #

如果你的场景需要用户在前端主动触发无缓存刷新，可以按以下逻辑实现：

• 每次打包发布时，在项目src/assets目录下新增version.json文件，写入当前版本号/打包时间戳，示例内容：

{"version": "1.0.2", "buildTime": 1695678234000}

• 在Angular应用初始化阶段（通过APP_INITIALIZER注入），请求最新的版本文件，请求时加随机参数避免缓存：

fetch('/assets/version.json?dt=' + Date.now())
  .then(res => res.json())
  .then(latestVer => {
    const localVer = localStorage.getItem('app_version');
    if (localVer && localVer !== latestVer.version) {
      // 清除所有前端存储缓存
      localStorage.clear();
      sessionStorage.clear();
      // 如果开启了PWA，先注销旧的Service Worker
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.getRegistrations().then(regs => {
          regs.forEach(reg => reg.unregister());
        });
      }
      // 页面跳转加版本参数，避免页面本身命中缓存
      window.location.href = `${window.location.origin}${window.location.pathname}?v=${latestVer.version}${window.location.hash}`;
      return;
    }
    localStorage.setItem('app_version', latestVer.version);
  })

注意事项 #

• 不要依赖window.location.reload(true)实现强制更新，不同浏览器的硬刷新逻辑实现不一致，无法保证所有资源都跳过缓存
• 如果你的应用开启了Angular Service Worker做PWA缓存，必须单独处理SW的更新逻辑，否则SW会优先返回自身缓存的资源，刷新也无法拿到新文件

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