前端发布新版本后，如何自动清除用户浏览器页面缓存，有哪些方案？

[Neil66]

最近在项目上调整了前端调用 API 时 header 的内容，发布后发现由于用户本地缓存，导致 header 内容不对，进而请求 API 接口失败。 因为是内部项目，以往都是告诉用户清除一下缓存再使用，但是感觉不太优雅，而且浏览器还会缓存一些用户自定义的 table 样式，无脑的清除缓存也存在一些问题。 请各位大佬赐教！

[richangfan]

接口和 index.html 文件设置 max-age 之类的响应头，其他文件不需要

[dcsuibian]

改名字，html 不缓存。
举个例子，如果原来的 js 文件是 a.js ，新的 js 文件是 b.js 。
在 html 里原来的 link 指向 a.js ，现在就变成指向 b.js 。浏览器发现文件名不同就会再发出请求。a.js 的缓存仍然有效，但 a.js 已经不会再使用了。

[dcsuibian]

现代点的前端就是这么干的，webpack 就可以。
把需要的静态资源分割成块，每一块计算哈希值。文件变化后对应块的哈希值变了。同时帮你修改生成的 index.html 。
这样没变的块仍然可以走缓存（比如说依赖的类库啥的），变了的块就用新的。

[dcsuibian]

还有一种不改文件名的方式，是加入查询参数。
比如 a.js?ppp=xxxxxxxxx

[YNaN]

脚手架出入口的 hash 命名规则改下

[wanguorui123]

用 ETag 然后把 Cache 设置短点

[kekxv]

你们自己问题，没事瞎改拦截，还不兼容上一版本

[wu67]

现在的脚手架工具默认都是 build 的时候给文件加上 hash 了吧. 除非你那个用户就开着页面一直不刷新, 只在当前页面点点点, 这样 index.html 里面的 js 路径貌似不会变...

[arch9999]

```
<link rel="stylesheet" href="/static/css/vendor/tomorrow.css?v=3c006808236080a5d98ba4e64b8f323f" type="text/css">
<link rel="icon" sizes="192x192" href="/static/icon-192.png">
<link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon-180.png?v=91e795b8b5d9e2cbf2d886c3d4b7d63c">
```

按 F12 看看本页面。

[wangkun025]

Rails 框架用的是改名字吧。

[Pooc]

像 Webpack 、Vite 之类的打包，生成的 js 之类的静态文件默认会改哈希值文件名，只需要运维设置下 index.html 不缓存就可以了

[agagega]

Rails 的方案是：假如目标文件叫 vendor.js ，那最终输出的文件就是 vendor-xxxxx.js (一段 hash)，不用 query string 是因为某些地方做缓存的时候说不定也会把 query string 忽略掉

[LeegoYih]

请求静态文件加时间戳或签名就行，如：main.min.js?t=123456

[suyanhanx]

大公司里怎样开发和部署前端代码？ - 张云龙的回答 - 知乎
https://www.zhihu.com/question/20790576/answer/32602154

[mingdongshensen]

ServiceWorker + Notification APIs, 在主线程里根据推送来的消息内容自定义任何你想做的 dom 相关操作，比如这时候可以主动通过推送告诉用户网页更新版本了，让用户点击一个你提供的小按钮，触发网页重载

[mingdongshensen]

@dcsuibian 我感觉还需要一个推送功能，及时告诉用户，此时此刻你的 html 不是最新版本，你需要手动刷新页面或者你需要同意我帮你自动刷新一下页面