网页判断版本更新

一、需求解析

为什么我会想到这个技术呢，是因为我有一次发现，我司的用户在使用网页的时候，经常会出现一个页面放很久，下班也不关这个页面，这样就会导致页面的代码长时间处于不更新的状态。
在使用到一个功能出了bug，或者逻辑已经改变的情况报错了，过来问我们为什么会报错，我们花时间排查之后，发现是因为代码没更新。其实这种错误完全是可以避免的，我们要如何提醒用户：代码已经更新了，请更新版本呢?

二、需求思考过程

首先，要达到让用户知道版本更新，肯定需要弹出一个窗口，提示用户版本更新，请保存当前的工作内容，并点击更新按钮，进行更新操作。
我们如何去设置每次发版的代码版本呢？
代码版本发布后，我们又要如何检测到版本发生变化呢？

三、难题解决

设置每次发版的代码版本

因为我比较少写jquery 等其他技术的前端，在此就针对 vue react 等工程化的前端技术栈进行解析
每次我们在发布版本，都会走一个步骤，那就是 npm run build打包操作
我们需要在打包的时候给打包后的代码加上一个版本号，我目前能想到两个方式实现： 文件更新后的hash值 和 index.html 里面的 meta

简单说一下 hash值，打包的设置那里，我们可以设置每次打包后，文件的hash值变动，只有有一个hash值变了，那么我们就可以理解为版本更新了，但是这个我用的比较少，在此做一个截图举例即可

以下着重介绍通过判断 index.html 的 meta去判断版本更新的方式
我们可以写一个node脚本，在npm run build命令之后，执行这个node脚本，往我们打包后的dist文件夹里面的 index.html 文件插入一个 meta，里面是我们的版本号，脚本如下：

const fs = require('fs')

/**版本号，当前时间戳，保证唯一 */
const versionNo = new Date().getTime()
const htmlPath = './dist/index.html'

const insertVersionMeta = () => {
  let html = fs.readFileSync(htmlPath, 'utf-8')
  html = html.replace('<head>', `<head><meta name="version_no" content="${versionNo}" />`)
  fs.writeFileSync(htmlPath, html)
}

insertVersionMeta()

以上代码的逻辑就是，获取到打包后的dist/index.html 文件，通过fs.readFileSync去读取到里面的内容，然后往 head 里面插入一个 meta，说明当前网页的版本号，我这里用的是最简单的时间戳

如果想要达成我们想象中的 v1.0.0这种 x-y-z 的版本格式，可以运行这个脚本的时候，弹出像vue脚手架创建那种命令行输入的方式，如
1-请问您本次版本更新是：
a.小版本更新（自动更新z+1）
b.大需求更新（自动y+1）
c. 超大版本更新，颠覆页面等这种(自动 x+1)
d. 自己输入版本号

2-请简单描述一下本次版本更新的内容：

要达到这种效果，就得加入inquirer等命令行的开源技术，如果感兴趣，我也可以后续对这个脚本进行优化，加入这个效果。在此就先不展开

检测代码版本是否更新

检测是否更新，我们只需要获取远程服务器的index.html 文件，获取到里面我们设置好的 version_no ，与我们当前网页的 version_no 做对比，只要存在不同，那么就代表版本更新了。在此我采用一个轮询的方式进行编写，如果是已经引入webSocket项目，也可以采用socket的方式进行通知

// App.vue
data() {
	return {
	// 轮询查询新版本
      timer: null,
      pollingTime: 1000 * 60 * 30 // 半小时
	},
created() {
    this.getCurrentVersion()
    this.fetchNewVersion()
    this.timer = setInterval(() => {
      this.fetchNewVersion()
    }, this.pollingTime)
  },
methods: {
    // 获取当前版本号
    getCurrentVersion() {
      const metaList = document.querySelectorAll('meta')
      if (!metaList.length) return

      for (let i = 0; i < metaList.length; i++) {
        const item = metaList[i]
        if (item.name === 'version_no') {
          this.version = item.content
          break
        }
      }
    },

    // 获取远程服务器的版本号
    async fetchNewVersion() {
      // 在 js 中请求首页地址不会更新页面
      const timestamp = new Date().getTime()
      const response = await axios.get(`${window.location.origin}?time=${timestamp}`)
      // 返回的是字符串，需要转换为 html
      const el = document.createElement('html')
      el.innerHTML = response.data
      let newVersion = ''
      // 拿到版本号
      const metaList = el.querySelectorAll('meta')
      if (!metaList.length) return

      for (let i = 0; i < metaList.length; i++) {
        const item = metaList[i]
        if (item.name === 'version_no') {
          newVersion = item.content
          break
        }
      }
      if (newVersion && newVersion !== this.version) {
        this.$refs['NoticeNewVersion'].open()
      }
    },
}
}

弹窗版本更新通知

这一块就很简单了，我们只需要写一个版本更新的组件，让它弹出，版本号和版本说明，直接获取远程服务器的meta显示即可。

四、遇到的坑

我写好这个后，发现一个问题：每次弹出版本更新通知，过了一会儿后会再次弹出，但我并没有再次部署版本，而且这个问题不是必现的，有的人是好的，有的人会一直弹出

后面发现，原来是缓存的锅，刷新后，浏览器存在html的缓存304，导致一直获取到是老的版本号，那么每次轮询都会弹出版本更新。

如何解决呢：只需要在nginx里面，设置index.html不缓存即可

location / {
 expires 1h;
 root /home/html;
 index index.html index.htm;

 ## html不缓存 
 if ($request_filename ~* .*\.(htm|html)$) 
 {
     add_header Cache-Control "no-store";
 }
}