前端项目部署自动检测更新后通知用户刷新页面（前端实现，技术框架vue、js、webpack）——方案二：轮询去判断服务端的index.html是否跟当前的index.html的脚本hash值一样

前言

当我们重新部署前端项目的时候，如果用户一直停留在页面上并未刷新使用，会存在功能使用差异性的问题，因此，当前端部署项目后，需要提醒用户有去重新加载页面。

技术框架

vue、js、webpack

解决方案

• 根据打完包之后生成的script src 的hash值去判断，每次打包都会生成唯一的hash值，只要轮询去判断不一样了，那一定是重新部署了
  
• 轮询（20s、自己设定时间）服务器的index.html 文件，将新的script数组与旧script数组比较数组内容是否一致（可以将新旧数组拼接后去重，若去重后的数组长度，与旧数组长度不一样，则说明重新部署了），若新旧数组不一致则通知用户刷新页面
• 通过监听visibilitychange事件，在页面隐藏时停止轮询，页面显示立马检测一次更新
• 检测到更新后，停止轮询

  

  （感兴趣的还可去看方案一：编译项目时动态生成一个记录版本号的文件，轮询请求该文件。前端项目部署自动检测更新后通知用户刷新页面（前端实现，技术框架vue、js、webpack）——方案一：编译项目时动态生成一个记录版本号的文件_新版本发布后,怎么用技术手段通知用户刷新页面?-CSDN博客）

  效果

  页面右下角提示更新：

  

  代码实现 

   Step1：在src目录下封装 auto-update.js

  /*
   * @Description: 自动更新
   */
  // const timeData = 60 * 1000 // 检查间隔时间
  const timeData = 20 * 1000 // 检查间隔时间
  let hidden = false // 页面是否隐藏
  let setTimeoutId
  let needTip = true // 默认开启提示
  let oldScript = []
  let newScript  = []
  const getHtml = async () => {
    const html = await fetch('/').then(res => res.text()) //读取index html
    return html
  }
  // const scriptReg = /