版本校驗方案
主要場景：
- 主要應(yīng)對微信內(nèi)網(wǎng)頁緩存嚴(yán)重問題（加時間戳的，需要手動刷新一次。未加時間戳的，大概需要刷新三次。）
- 版本更新后，客戶端再次打開，默認調(diào)用緩存，需要手動刷新
- 應(yīng)對部分活動項目，頻繁發(fā)版導(dǎo)致的緩存不更新問題
- 應(yīng)對在線項目可能存在的，需要緊急全網(wǎng)修改的問題。[真有]
目標(biāo)
- 版本更新后，用戶無需刷新，無感知，自動刷新緩存
方案策略
- 在 version.json 文件中，存儲當(dāng)前版本 { "version": '1.0.1' }
- 在 check.js 中保存當(dāng)前版本 var version = '1.0.1'
- 在 html 頭部加載 check.js
- check.js 請求 version.json。request('xxxx/version.json?date=' + Date.now())，version.json是靜態(tài)資源，加時間戳避免使用緩存
- check.js 請求到的 version 和 本地的不一致時，說明本地使用的是緩存，則刷新緩存 location.reload(true)
- 原生項目的話，最好也手動給改動的文件加上時間戳或者版本號
方案代碼
index.html, safe/version.json, safe/check.js 三處的版本號需保持一致
index.html
<head>
<script src="./static/safe/check.js?version=1.0.0" type="text/javascript"></script>
</head>
safe/check.js
;(function() {
var version = '1.0.0'
function request(option) {
if (String(option) !== '[object Object]') return undefined
var xhr = new XMLHttpRequest()
xhr.responseType = option.responseType || 'json'
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
if (option.success && typeof option.success === 'function') {
option.success(xhr.response)
}
} else {
if (option.error && typeof option.error === 'function') {
option.error()
}
}
}
}
xhr.open(option.method || 'GET', option.url, true)
xhr.send()
}
var jsLoaded = document.scripts;
var currentJs = jsLoaded[jsLoaded.length - 1].src;
var safeUrl = currentJs.substring(0, currentJs.lastIndexOf('/')) + '/version.json?date=' + Date.now()
request({
method: 'GET',
url: safeUrl,
success: function (res) {
if (res.version !== version) {
location.reload(true)
}
},
error: function () { }
})
})();
safe/version.json
{
"version": "1.0.0"
}
- 原生項目的話，上面兩個文件就可以了
使用構(gòu)建方案
以 vue + webpack 為例
package.json, index.html, safe/version.json, safe/check.js 四處的版本號需保持一致
npm install --save-dev version-bump-prompt
package.json
"version": "1.0.0",
"scripts": {
"tag": "bump --prompt --grep index.html static/safe/version.json static/safe/check.js"
}
運行npm run tag自動更新版本號，手動選擇版本模式
2017-12-04_140002.png
說明
- 微信內(nèi)會對
未加版本號的文件強制緩存，reload 也無法更新，只能手動右上角刷新。 - 所以需要在
safe/check.js?version=1.0.0后面加上版本號。 - HTML文件內(nèi)，可能還引用了其它有版本號鏈接，例如 微信jsSDK。如果版本數(shù)字吻合的話，會被同步更改，這里要注意
