需求場景

使用者使用網站時如果有新版本釋出會彈出詢問是否更新到新版本。要求不依賴後臺，純前端實現。

專案背景

前端框架 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 裡，然後在用定時器輪詢對比。實現思路差不多，這種方法就需要後臺同學的幫助了。

以上。