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

news2024/9/24 4:36:13

标题解决方案

常用的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.coloradmin.cn/o/1143492.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

IT新人如何在职场弯道超车?强推荐考取当下最有价值的云计算认证证书!

疯狂的裁员!股价降低!在美国,一股寒冷的创业寒流正在席卷而来。不只是硅谷进入了冬天,国内的传统互联网寒潮也凛冽地来了。在传统 IT体系结构逐渐式微、产业规模不断缩小的情况下,许多 IT工程师都面临着下岗、跳槽等问…

UVa524 Prime Ring Problem(素数环)

1、题目 2、题意 输入正整数 n n n,把整数1,2,3,…,n 组成一个环,使得相邻两个整数之和均为素数。输出时从整数 1开始逆时针排列。同一个环应恰好输出一次。 n ≤ 16 n \le 16 n≤16。 3、分析 由模型不难得到:每个…

Python异步编程小解一

Python异步编程 什么是异步,为什么是异步? 异步,意指你不用等到某个条件达成再去做某事,比如:你不用等到一切都准备好了才开始跳槽🐕.那么在 多线程 存在的情况下,我们为什么还要把目光投向 异…

Kafka - 3.x 文件存储不完全指北

文章目录 Topic数据的存储机制演示基本信息使用kafka-run-class.sh查看index内容使用kafka-run-class.sh查看log内容 index文件和log文件详解日志存储参数配置文件清理策略综述清理策略1)delete策略2)compact日志策略 高效读写的原因 Topic数据的存储机制…

Glide原理

本文基于Carson整理 1.简介 相比其他几种图片加载框架,Glide性能最好。这得益于其高效的图片缓存策略 其还有多样化的媒体格式加载:如GIF、Video,对于商城首页需展示丰富样式、信息的页面需求来说,也是必不可少的。 2.加载原理…

【数智化人物展】洞隐科技联合创始人兼CEO董志刚:数智化转型的核心是应用新技术打造新型的文化、组织和商业模式...

董志刚 本文由洞隐科技联合创始人兼CEO董志刚投递并参与《2023中国企业数智化转型升级先锋人物》榜单/奖项评选。 数据智能产业创新服务媒体 ——聚焦数智 改变商业 在数字化日益渗透的今天,“释放数字价值,驱动智能转型”已逐渐成为企业转型与创新的关…

Vue插件的使用

一、插件的定义 (一)创建plugin.js文件 文件名可以自定义,但是行业内默认使用plugin作为文件名,该文件和main.js是平级的。 (二)编写对象中的install方法 install方法能够接收一个参数,就是…

【go】两数求和

文章目录 题目代码解法2 代码仓库 题目 给定一个整数数组 nums 和一个整数目标值 target,请你在该数组中找出 和为目标值 target 的那 两个 整数,并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是,数组中同一个元素在答案…

5款在线JavaScript加密混淆工具

5款常用、好用的在线JavaScript加密混淆工具,网址请从截图中查看。 1、jscrambler 2、JShaman 3、javascriptobfuscator 4、freejsobfuscator 5、jjencode

【PyQt】调整子控件的层级以调整绘制的先后顺序

简述 qt中貌似没有直接设置z序的函数,但对应的有其他调整z序的方法: QWidget.raise_():置顶 QWidget.lower():置底 QWidget.stackUnder(wid):置于指定控件之下 其中关键函数是QWidget.stackUnder(wid),利…

phpstorm2022.3.3和xdebug 3 调试代码记录

有鉴于之前使用log日志调试代码,或者var_dump()调试代码太慢了,系统出了问题排查效率低下。最终决定使用xdebug工具提高效率。总结如下: 1. xdebug版本要和phpstorm兼容, 这里使用xdeubug 3.1.6,phpstorm 2022.3.3 (破…

nvm的安装和使用

nvm用途 nvm是用来管理node版本的,安装成功之后可以去切换自己的node版本,就不需要通过安装卸载不同版本的node包 下载与安装 下载地址是https://github.com/coreybutler/nvm-windows/releases 下载nvm-setup.zip,然后安装就可以了 默认路径是C:\Users\wangjingtao\AppData\…

实现成绩发布的高效与便捷

老师们想不想告别繁琐的手动操作,简单省心的发布和查询考试成绩?今天分享的这个方法,可以让学生和家长自主查询成绩,是不是感觉超级方便呢?我来给各位老师讲解一下什么是成绩查询系统吧! 成绩查询系统 成绩…

Reflect 对象的创建目的

目录 前言 逻辑 代码示例 使用 Reflect 操作属性 使用 Reflect 检查属性是否存在 使用 Reflect 创建代理 用法 结论 参考资料 前言 Reflect是JavaScript中的一个内置对象,它提供了一组用于访问对象属性和执行对象方法的方法。Reflect的设计目的是为了在语…

IDEA部署SSM项目mysql数据库MAVEN项目部署教程

如果 SSM 项目是基于 Maven 构建的,则需要配置 maven 环境,否则跳过这一步 步骤一:配置 Maven 第一步:用 IDEA 打开项目,准备配置 maven 环境 ,当然如果本地没有提前配置好 maven,就用 IDEA 默…

多线程面试相关知识点

文章目录 (一) 进程线程和协程的区别创建线程的4种方式1. 继承Thread类2. 实现runnable接口3. 实现Callable接口4. 线程池创建 runnable 和 callable 有什么区别线程的 run()和 start()有什么区别?线程之间的状态变化notify()和 notifyAll()有什么区别?j…

C++之lambda匿名、using、typedef总【全】(二百四十九)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 人生格言: 人生…

如何选择最适合 Android 的 SD 卡恢复软件?

所需要的只是心不在焉地点击了错误的按钮、行为不当的应用程序、或者软件或硬件故障。就这样,您的照片消失了,您的笔记无处可寻,您的文件也消失了。 如何选择最适合 Android 的 SD 卡恢复软件 对别人最好的可能对你不起作用,这取…

【Unity小技巧】可靠的相机抖动及如何同时处理多个震动

每篇一句 围在城里的人想逃出来,站在城外的人想冲进去,婚姻也罢,事业也罢,人生的欲望大都如此。——钱钟书《围城》 前言 相机的抖动我相信大家都不陌生,网上其实已经有非常非常多的教程了,之前我也写过…

2.21每日一题(隐函数求导+变上限积分求导)

1、首先 t 0 时,x ? 或者 y ? 求出来 2、等式两边进行一阶求导,把一阶导函数(隐函数求导)求出来 3、等式两边再次求导,把二阶导函数(隐函数求导)求出来 注意:隐函数求导及变上…