版权声明:solo https://blog.csdn.net/sansan_7957/article/details/83626045
需求场景
用户使用网站时如果有新版本发布会弹出询问是否更新到新版本。要求不依赖后台,纯前端实现。
项目背景
前端框架 iView,构建工具 webpack。
实现思路
webpack 可以配置编译时在 js 文件名里添加 hash,我们要做的就是对比当前 js 的 hash 与新版本的 hash 是否一致,不一致则提示用户更新版本。
添加个定时器每五分钟请求下网站首页地址,之后解析,之后对比。
代码
methods 中的代码:
async getHash() {
// 在 js 中请求首页地址不会更新页面
const response = await axios.get(`${window.location.protocol}//${window.location.host}/`)
// 返回的是字符串,需要转换为 html
let el = document.createElement('html')
el.innerHTML = response.data
// 拿到 hash
let new_hash_src = el.getElementsByTagName('script')[0].src.split('/')
let new_hash = new_hash_src[new_hash_src.length - 1].split('.')[1]
// iMessage 是个全局变量(默认值 false),用来帮助判断什么时候会弹出提示,不然定时器5s就弹一次了
if (new_hash != this.cur_hash && !this.iMessage) {
// 版本更新,弹出提示
this.iMessage = true
this.$Message.info({
render: h => {
return h('span', [
`当前版本已更新,请刷新后使用`,
h('a', {
on: {
click: function () {
window.location.reload()
}
}
}, '刷新页面')
])
},
duration: 0,
closable: true
});
}
}
mounted 中的代码:
// 当前版本的 hash
let cur_hash_src = document.getElementsByTagName('body')[0].getElementsByTagName('script')[0].src.split('/')
this.cur_hash = cur_hash_src[cur_hash_src.length - 1].split('.')[1]
// 定时器五分钟轮询一次,timerVersion 是全局变量,默认值为 null
this.timerVersion = setInterval(this.getHash, 300000)
另一种方案
还有一种解决办法就是把当前版本的版本号存在浏览器的 storage 里,后台发版的时候把新的版本号存在浏览器 cookie 里,然后在用定时器轮询对比。实现思路差不多,这种方法就需要后台同学的帮助了。
以上。