版本校验方案

主要场景：

主要应对微信内网页缓存严重问题（加时间戳的，需要手动刷新一次。未加时间戳的，大概需要刷新三次。）

版本更新后，客户端再次打开，默认调用缓存，需要手动刷新

应对部分活动项目，频繁发版导致的缓存不更新问题

应对在线项目可能存在的，需要紧急全网修改的问题。[真有]

目标

版本更新后，用户无需刷新，无感知，自动刷新缓存

方案策略

在 version.json 文件中，存储当前版本 { "version": '1.0.1' }

在 check.js 中保存当前版本 var version = '1.0.1'

在 html 头部加载 check.js

check.js 请求 version.json。request('xxxx/version.json?date=' + Date.now())，version.json是静态资源，加时间戳避免使用缓存

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"
}

原生项目的话，上面两个文件就可以了

使用构建方案

以 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

说明

微信内会对未加版本号的文件强制缓存，reload 也无法更新，只能手动右上角刷新。
所以需要在safe/check.js?version=1.0.0后面加上版本号。
HTML文件内，可能还引用了其它有版本号链接，例如微信jsSDK。如果版本数字吻合的话，会被同步更改，这里要注意

版本校验方案

版本校验方案

使用构建方案

说明

推荐阅读更多精彩内容