前端版本部署后, 用户如果还是一直停在老的页面没有刷新, 用户在操作时可能会报错, 因为可能请求了老的js文件或者请求了不存在的接口. 那么如何在版本更新后通知用户刷新呢, 总结了下, 大概有下面的一些方法:
1、后端接口来维护前端发布version，设置成功后在请求header中加入版本号. 前端得到版本号后保存在本地, 每次请求带上version header. 后端统一识别请求头版本号与当前是否一致进行校验, 如果版本号不一致, 直接重定向刷新或者后端返回一个状态码, 前端拦截这个状态码, 然后处理刷新。
2、版本如果更新了的话, 入口文件index.html里的js或css文件hash一定会发生变化. 因此轮询请求index.html, 对比文件hash的变化就能得知是否更新了.
setInterval(() => {
fetch('www.baidu.com')
.then(res => res.text())
.then(res => {
console.log(res)
// 对比文件hash, 如果发生了变化, 提醒用户刷新页面
})
}, 10000)
缺点:
- 轮询造成服务器有压力
- 轮询的间隙如果版本更新了, 用户此时操作还是会有问题
- 移动设备还会对用户设备和电量产生影响
3、监听资源文件加载失败时候再去刷新: 在版本更新后, 改动过的文件hash会发生变化, 用户触发新文件请求会404
window.addEventListener('error',(event)=>
if (event.target.localName ==='script' || event.target.localName ==='link'){
notice('请刷新页面获取更新')
event.preventDefault()
}true)
4、如果用户正在操作,不想刷新页面怎么办?
可以考虑渐进式更新的方案, 保留最新版本及上一个版本；打包后的静态资源放到不同的服务器文件夹内就可以了; 用户不刷新就使用旧版本，刷新后更新，这个配合运维去实现；这个还没有具体去实现过, 有待观察.
总结:
以上几种方案, 感觉第一种和第三种方案是比较好的, 对服务器压力比较小, 实现起来也比较方便.
