Typescript中如何实现强制刷新页面并清除浏览器缓存？

核心逻辑 #

浏览器针对完全相同的URL会优先命中本地缓存，你之前用到的window.location.reload()、window.location.href = window.location.href均未改变请求URL，因此无法跳过缓存；已弃用的reload(true)原本可强制跳过缓存，但兼容性已经无法保障，无需再使用。

最优兼容实现方案：URL追加版本参数 #

你已经在逻辑中拿到了服务端返回的最新版本号versionFromHTTP，直接将该版本号作为查询参数拼接到页面URL中，浏览器会判定为新请求，自动跳过本地缓存拉取最新页面及关联静态资源，该方案兼容所有浏览器，无API弃用风险，无需使用复杂的POST请求方案。

改后代码如下：

showSnackbar(versionFromHTTP: string, appVersion: string): void {
   const httpList = versionFromHTTP.split('.');
   const appList = appVersion.split('.');
   // 刷新逻辑抽成公共方法，避免重复代码
   const forceRefresh = () => {
      // 如果你的项目用了Service Worker（PWA），先注销SW避免缓存旧资源，不需要可删掉下一行
      navigator.serviceWorker?.getRegistrations().then(regs => regs.forEach(reg => reg.unregister()));
      // 拼接版本参数到URL，自动处理原有query参数的情况
      const url = new URL(window.location.href);
      url.searchParams.set('app_version', versionFromHTTP);
      window.location.href = url.toString();
   };
   if ((httpList[0] === appList[0]) && (httpList[1] === appList[1])){
     let snack = this.snackBar.open('We\'ve made new updates! Please refresh your browser to get the latest updates.', 'Refresh now');
     snack.onAction().subscribe(forceRefresh);
   } else {
     let snack = this.snackBar.open('We\'ve made new updates - some features may not work correctly until you refresh your browser.', 'Refresh now');
     snack.onAction().subscribe(forceRefresh);
   }
}

额外优化建议 #

如果可以调整站点静态资源的响应头，给入口HTML文件配置如下响应头，进一步避免浏览器缓存入口文件：

Cache-Control: no-cache, no-store, must-revalidate

缓存清理验证方案 #

你可以在前端代码中定义全局的版本常量，比如window.APP_VERSION = '当前打包版本号'，刷新完成后读取该全局变量和服务端返回的versionFromHTTP做对比，如果一致则说明缓存清理更新成功，不一致可再次触发刷新或提示用户手动清理缓存。

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