前端项目部署自动检测更新后通知用户刷新页面（前端实现，技术框架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 = /

.cn_notify {
  .content {
    padding: 20px 0;
  }
  .footer {
    display: flex;
    justify-content: center;
  }
}


.versionNotifyStyle {
  .el-notification__content {
    width: 280px !important;
  }
}

Step3：app.vue 使用组件CnNotify

 Step4：在 main.js 内使用

// 引入自动更新提醒
import autoUpdate from './auto-update'
// 非生产环境使用
process.env.VUE_APP_ENV !== 'production' && autoUpdate.start()