devbox
凡人多烦事01
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

前端项目部署自动检测更新后通知用户刷新页面（前端实现，技术框架vue、js、webpack）——方案一：编译项目时动态生成一个记录版本号的文件_新版本发布后,怎么用技术手段通知用户刷新页面?

作者：凡人多烦事01 | 2024-03-07 10:22:55

赞

踩

新版本发布后,怎么用技术手段通知用户刷新页面?

前言

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

技术框架

vue、js、webpack

解决方案

  • 编译项目时动态生成一个记录版本号的文件
  • 轮询（20s、自己设定时间）这个文件，判断版本号，有新版本则通知用户刷新页面
  • 通过监听visibilitychange事件，在页面隐藏时停止轮询，页面显示立马检测一次更新
  • 检测到更新后，停止轮询

（感兴趣的可去看方案二：根据打完包之后生成的script src 的hash值去判断，每次打包都会生成唯一的hash值，只要轮询去判断不一样了，那一定是重新部署了。） 

效果

页面右下角提示更新：

代码实现 

 Step1：在 vue.config.js 实现动态创建版本号文件

  1. if (process.env.VUE_APP_ENV !== "production") {
  2. // 这里我设置的是只在非生产环境自动检测更新（生成version）；
  3. // 想要所有环境都自动检测更新，只要写if(process.env.VUE_APP_ENV !== "production")内的内容就好
  4.   const { writeFile, existsSync } = require('fs')
  5.   // 动态生成版本号
  6.   const createVersion = () => {
  7.     //检测目录是否存在
  8.     if (existsSync('./public')) {
  9.       writeFile(`./public/version.json`, `{"version":"${Date.now()}"}`, (err) => {
  10.         if (err) {
  11.           console.log('写入version.json失败')
  12.           console.log(err)
  13.         } else {
  14.           console.log('写入version.json成功')
  15.         }
  16.       })
  17.     } else {
  18.       setTimeout(createVersion, 1000)
  19.     }
  20.   }
  21.   setTimeout(createVersion, 10000)
  22. }

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

  1. /*
  2.  * @Description: 自动更新
  3.  */
  4.  
  5. let currentVersion // 当前版本
  6. let version // 新版本
  7. // const timeData = 60 * 1000 // 检查间隔时间
  8. const timeData = 20 * 1000 // 检查间隔时间
  9. let hidden = false // 页面是否隐藏
  10. let setTimeoutId
  11. let needTip = true // 默认开启提示
  12.  
  13. // 获取版本号
  14. const getVersion = async () => {
  15.   return fetch('/version.json?timestep=' + Date.now()).then((res) => res.json())
  16. }
  17.  
  18. // 检查更新
  19. const checkUpdate = async () => {
  20.   console.log('***************checkUpdate**************')
  21.   const currentVersion = sessionStorage.getItem("version")
  22.   version = (await getVersion()).version
  23.   // 本地没有 version，表示刚进入系统，直接塞值
  24.   if (!currentVersion) return sessionStorage.setItem("version", version)
  25.  
  26.   console.log("
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/205036
    推荐阅读
    相关标签

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