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

2022-05-26 19:08:18 +08:00
 kongkongye

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

7697 次点击
所在节点    前端开发
50 条回复
kongkongye
2022-05-26 19:09:57 +08:00
不知道大厂都是怎么解决这个问题的，像我们企业内部系统，可能一天发布几次前端更新，就很容易碰到这种情况。
ksc010
2022-05-26 19:11:31 +08:00
简单的方法就是 捕获异常 然后弹窗提示需要刷新重拾下
yunye
2022-05-26 19:11:44 +08:00
Vue 项目部署新版本后怎么提示用户刷新浏览器？
https://segmentfault.com/q/1010000039658752/

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

参考一下吧
westoy
2022-05-26 19:13:20 +08:00
我之前一个简单的类 CRM 是直接维护一个 websocket, 下发各种刷新 settings 、语言包的命令， 不过用的人少， 一般也就在线个几十个.......

你可以考虑 window.onerror 捕捉错误， 看情况 fetch 一个最新版本， 版本落后就强制 reload
kongkongye
2022-05-26 19:14:15 +08:00
@ksc010 我的意思就是这个，就是现实很少碰到过这种情况，想着一般都是一个网页用完就关，出问题就刷新，都不知大厂在这个问题上有没考虑过，不好参照
dcsuibian
2022-05-26 19:14:37 +08:00
更新版本的时候，把之前的 js 都删掉了？
emonc
2022-05-26 19:14:56 +08:00
🤔用路由守卫怎么样？
kongkongye
2022-05-26 19:15:08 +08:00
@westoy 不喜欢 ws ，感觉不稳定容易断，还占服务器资源
kongkongye
2022-05-26 19:18:36 +08:00
@westoy 也不喜欢强制 reload ，没提示话用户会觉得莫名奇妙页面刷新了
kongkongye
2022-05-26 19:19:25 +08:00
@westoy 或者比如用户在填表单，你给强制 reload 了。。。
ksc010
2022-05-26 19:19:48 +08:00
@kongkongye 这个方法 我感觉是最简单 前端加几行代码就搞定了
监听全局异常错误，然后也可以再判断下异常类型啥的，就因为很少遇到，我感觉稍微弄下就行
estk
2022-05-26 19:19:50 +08:00
旧的 js 我都一直保留，这样哪怕用户缓存了，至少还能访问旧版
kongkongye
2022-05-26 19:21:41 +08:00
@estk 清了节省空间，看着清净，毕竟不是访问量很大的项目，没考虑这
hmm1225
2022-05-26 19:58:36 +08:00
你 html 文件不缓存不就可以了
makelove
2022-05-26 21:45:33 +08:00
打包时生成版本号至应用 js ，应用里写个定时每隔 1 分钟调用后端接口发现当前版本不是最新就提示刷新
wenzichel
2022-05-26 22:23:06 +08:00
刚看描述不明白为什么会出现白屏，原来是把旧的静态资源删除了，这不应该啊。你的静态资源应该增量更新啊，每次发布的静态资源都带有 hash ，发布到 CDN 上。

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

但我还是建议您把静态资源发布到 CDN 上！
wenzichel
2022-05-26 22:26:00 +08:00
所以你的方案不应该放在如何让用户强制刷新页面，而是如何进行增量更新。

若 html 没有过期，依然访问的是旧资源，等 html 过期了，自然访问的就是新资源了。
bojackhorseman
2022-05-26 22:55:01 +08:00
@wenzichel 我目前也遇到这个问题，以前部署是直接把文件通过 sftp 上传上去的，现在每次部署都是打包后的产物打一个镜像推到 docker 仓库里，这样就没法增量更新了吧。
Vegetable
2022-05-26 23:04:30 +08:00
1. 不要立刻清除旧的资源
2. 提示用户有更新，请刷新页面

其实就是把网页当作客户端对待嘛，至于实现更新提醒，方法挺多的。随便说一个不一定行得通，本地记录页面初始化的时间，前端 1 分钟 head 一次 index.html ，判断 Last-Modified
arischow
2022-05-26 23:05:09 +08:00
静态资源不随着新版本发布而删除

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://tanronggui.xyz/t/855521

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX