Web端版本更新提示--前端处理

Web端版本更新提示–前端处理

原理：webpack每次打包js hash值不同

import { MessageBox } from 'element-ui'
let lastScripts = [] // 最新一次js文件src名
const DURATION = 5 * 60 * 1000 //设置5分钟检查更新一次

//提取html中的script标签的src属性
async function extractNewScripts(htmlString) {
  const parser = new DOMParser()
  const htmlDoc = parser.parseFromString(htmlString, 'text/html')
  const scriptElements = htmlDoc.getElementsByTagName('script') // 解析script标签
  const scriptSrcs = Array.from(scriptElements).map(scriptElement => {
    // 检查script元素是否有src属性
    if (scriptElement.hasAttribute('src')) {
      // 获取并返回src属性值
      return scriptElement.getAttribute('src')
    } else {
      // 如果没有src属性，则返回null
      return null
    }
  })

  return scriptSrcs || []
}

//判断是否需要更新
async function needUpdate() {
  //获取当前页面的script标签src属性
  const newScripts = await extractNewScripts(
  	// 如 http://www.baidu.com 用于请求页面信息，分析js文件名
    await fetch('你的网站地址').then(resp => resp.text())
  )
  //如果是第一次加载，则不更新
  if (!lastScripts.length) {
    lastScripts = newScripts
    return false
  }
  //判断是否需要更新 长度不同-更新
  if (newScripts.length !== lastScripts.length) {
    lastScripts = newScripts
    return true
  }
  //比较两个数组是否相等 长度相同，内容不同-更新
  for (let i = 0; i < lastScripts.length; i++) {
    if (lastScripts[i] !== newScripts[i]) {
      lastScripts = newScripts
      return true
    }
  }
  return false
}

/* 自动刷新 */
export const autoRefresh = () => {
  setTimeout(async () => {
    const willUpdate = await needUpdate()
    if (willUpdate) {
      MessageBox.alert(
        '检测到系统功能已升级，点击“确定”自动刷新获取更新!',
        '提示'
      )
        .then(()=>{
            location.reload()
        })
        .catch(e => {
          console.log(e)
        })
    } else {
      autoRefresh() // 如果不需要更新数据，继续执行下一次判断
    }
  }, DURATION)
}

调用时机

根据业务需求不同可以再不同的时机调用，如切换路由时检测是否有更新(搭配路由守卫使用)、发送请求时检测是否更新、登录时检测是否更新。
如搭配路由守卫：

  	  	router.beforeEach((to, from, next) => {
  		  console.log("路由守卫")
  		  // if (process.env.NODE_ENV !== 'dev') { // 一些自定义的判定逻辑，如dev环境则不检测
  		    autoRefresh()
  		  // }
  		  next() // 一定要next, 不然无法跳转路由
  		})