前端重新部署后如何让用户刷新页面？

[kongkongye]

目前碰到的情况是前端重新构建部署后，js 之类文件名都变了，前端点击另一个页面就白屏（控制台报错 js 文件找不到），而很多用户比较小白就会反馈页面出问题了而不是刷新页面。
所以想着重新部署后应该通知到用户应该刷新前端页面，目前能想到的方式是所有请求都自动加上前端当前版本，通过工具重新构建后通知后端修改前端最新版本号，然后前端页面请求时就能返回信息让前端提示页面需要刷新，不知有没更好的办法？

[kongkongye]

不知道大厂都是怎么解决这个问题的，像我们企业内部系统，可能一天发布几次前端更新，就很容易碰到这种情况。

[ksc010]

简单的方法就是 捕获异常 然后弹窗提示需要刷新重拾下

[yunye]

Vue 项目部署新版本后怎么提示用户刷新浏览器？
https://segmentfault.com/q/1010000039658752/

service-worker 服务端单方面强制刷新客户端(浏览器)缓存
https://www.0z.gs/webDevelopment/1375.html

参考一下吧

[westoy]

我之前一个简单的类 CRM 是直接维护一个 websocket, 下发各种刷新 settings 、语言包的命令， 不过用的人少， 一般也就在线个几十个.......

你可以考虑 window.onerror 捕捉错误， 看情况 fetch 一个最新版本， 版本落后就强制 reload

[kongkongye]

@ksc010 我的意思就是这个，就是现实很少碰到过这种情况，想着一般都是一个网页用完就关，出问题就刷新，都不知大厂在这个问题上有没考虑过，不好参照

[dcsuibian]

更新版本的时候，把之前的 js 都删掉了？

[emonc]

🤔用路由守卫怎么样？

[kongkongye]

@westoy 不喜欢 ws ，感觉不稳定容易断，还占服务器资源

[kongkongye]

@westoy 也不喜欢强制 reload ，没提示话用户会觉得莫名奇妙页面刷新了

[kongkongye]

@westoy 或者比如用户在填表单，你给强制 reload 了。。。

[ksc010]

@kongkongye 这个方法 我感觉是最简单 前端加几行代码就搞定了
监听全局异常错误，然后也可以再判断下异常类型啥的，就因为很少遇到，我感觉稍微弄下就行

[estk]

旧的 js 我都一直保留，这样哪怕用户缓存了，至少还能访问旧版

[kongkongye]

@estk 清了节省空间，看着清净，毕竟不是访问量很大的项目，没考虑这

[hmm1225]

你 html 文件不缓存不就可以了

[makelove]

打包时生成版本号至应用 js ，应用里写个定时每隔 1 分钟调用后端接口发现当前版本不是最新就提示刷新

[wenzichel]

刚看描述不明白为什么会出现白屏，原来是把旧的静态资源删除了，这不应该啊。你的静态资源应该增量更新啊，每次发布的静态资源都带有 hash ，发布到 CDN 上。

如果实在是想节省空间，那就单独跑脚本，比如每隔一星期定期进行清理，相同名字的静态资源，只保留最近 30 天的，若只剩下 1 个，就不再删除。

但我还是建议您把静态资源发布到 CDN 上！

[wenzichel]

所以你的方案不应该放在如何让用户强制刷新页面，而是如何进行增量更新。

若 html 没有过期，依然访问的是旧资源，等 html 过期了，自然访问的就是新资源了。

[bojackhorseman]

@wenzichel 我目前也遇到这个问题，以前部署是直接把文件通过 sftp 上传上去的，现在每次部署都是打包后的产物打一个镜像推到 docker 仓库里，这样就没法增量更新了吧。

[Vegetable]

1. 不要立刻清除旧的资源
2. 提示用户有更新，请刷新页面

其实就是把网页当作客户端对待嘛，至于实现更新提醒，方法挺多的。随便说一个不一定行得通，本地记录页面初始化的时间，前端 1 分钟 head 一次 index.html ，判断 Last-Modified

[arischow]

静态资源不随着新版本发布而删除