当前位置: 首页 > article >正文

前端重新部署如何通知用户更新

标题解决方案

常用的webSocket解决方案
webSocket; 大致逻辑思考应该是前端在部署好后向服务器发送一个状态变更通知;服务器接收后主动向前端push;前端通过心跳检测,接收到相关更新时弹出提示,让用户确认更新;
缺点:

需要服务器配合开发;
部署好后主动向服务器发送变更通知,但是CI/CD部署是在远端,对于前端来说完全是黑盒子;当然可以尝试去研究docker相关文档应该是有解决方案; 当然也可以选择手段变更状态,在系统哪加个入口点击后向服务器发送通知;
整个看下来,成本不小;

纯前端方案
要思考其实我们要的服务器能不能换成项目最终部署的服务地址呢?在build代码时,主动向生产目录塞入一个js/json文件; 里面写入相关变量;再将本地的变量与轮询查询远端该文件中变量值进行比较,如果发生变化,表示有最新版本,即弹更新提示;
在这里插入图片描述

1.build时,用node生成一个文件如_version.js;里面写入window.version=${Date.now()};
2.将_version.js写入到最终打包生成的index.html中;

bash复制代码
在这里插入图片描述

  1. 本地可以在入口文件main.js中通过window.version读取本地的版本时间戳;然后定时器轮询获取远程的js文件中的version;将两者进行比较,如果不同,表示有更新

http://www.kler.cn/news/108475.html

相关文章:

  • 【微信小程序开发】学习小程序的网络请求和数据处理
  • vue项目package.json与package-lock.json作用及区别
  • vscode连接服务器一直retry
  • spring boot项目优雅停机
  • 网络协议--TCP的交互数据流
  • 剑指JUC原理-5.synchronized底层原理
  • Less的基本语法
  • 【Mysql】数据库三大范式
  • JAVA 链式编程和建造者模式的使用(lombok的使用)
  • 【教3妹学编程-java实战4】Map遍历删除元素的几种方法
  • etcd的mvcc源码剖析
  • 最新发布!阿里云卓越架构框架重磅升级
  • 漏洞复现--企望制造ERP系统 RCE
  • Webpack 基础以及常用插件使用方法
  • 新增选股结果树形列表,快速加载大牛股来分析——股票量化分析工具QTYX-V2.7.2...
  • mysql 增删改查基础命令
  • SpringMVC Day02 : 请求方式
  • 数组与链表算法-数组与多项式
  • 速卖通商品详情API接口获取aliexpress速卖通商品详情信息、销量、价格、商品规格信息参数调用示例说明
  • vue2 quill 视频上传 ,基于ruoyi vue,oss
  • 『阿里云盘 AList Kodi』家庭影院搭建指南
  • 本机spark 通idea连接Oracle的坑
  • Redis原理-IO模型和持久化
  • LeetCode 2656. K 个元素的最大和【数学】简单
  • 基于springboot实现休闲娱乐代理售票平台系统项目【项目源码+论文说明】
  • 数据库MySQL(五):多表查询
  • 【转信创】银河麒麟:系统安全机制
  • 【LeetCode每日一题合集】2023.10.23-2023.10.29(简单的一周)
  • SparkSQL综合案例-省份维度的销售情况统计分析
  • 【深度学习】Python使用指定gpu运行代码