devbox
神奇cpp
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：神奇cpp | 2024-08-14 06:04:44

赞

踩

前端更新刷新页面

前言

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

技术框架

vue、js、webpack

解决方案

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

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

效果

页面右下角提示更新：

代码实现 

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

  1. /*
  2.  * @Description: 自动更新
  3.  */
  4.  
  5. // const timeData = 60 * 1000 // 检查间隔时间
  6. const timeData = 20 * 1000 // 检查间隔时间
  7. let hidden = false // 页面是否隐藏
  8. let setTimeoutId
  9. let needTip = true // 默认开启提示
  10.  
  11. let oldScript = []
  12. let newScript  = []
  13.  
  14. const getHtml = async () => {
  15.   const html = await fetch('/').then(res => res.text()) //读取index html
  16.   return html
  17. }
  18.  
  19. // const scriptReg = /<script.*src=["'](?<src>[^"']+)/gm
  20.  
  21. const parserScript = (html) => {
  22.   const reg = new RegExp(/<script(?:\s+[^>]*)?>(.*?)<\/script\s*>/ig) //script正则
  23.   return html.match(reg) //匹配script标签
  24. }
  25.  
  26.  
  27. const init = async () =>{
  28.   const html = await getHtml()
  29.   // console.log("
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/神奇cpp/article/detail/978361
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。