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

标题解决方案

常用的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.mzph.cn/news/122870.shtml

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

相关文章

什么是Props?

Props是Vue框架中的一个特性,用于父组件向子组件传递数据。它允许父组件将数据传递给子组件,并在子组件中进行使用和显示。 Props的作用是实现父子组件之间的数据通信。通过Props,父组件可以向子组件传递数据,使得子组件能够接收…

设计一个高效算法,将顺序表L的所有元素逆置,要求算法的空间复杂度为O(1)

初始化及打印函数 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #define MaxSize 10//定义最大长度 int InitArr[10] { 1,2,3,4,5,6,7,8,9,10 };typedef struct {int data[MaxSize];//用静态的数据存放数据元素int length;//顺序表当前长度 }Sqlist;//顺序表的类…

java利用StringTokenizer分割字符串

介绍 利用java.util.StringTokenizer的方法&#xff0c;可以将一个字符串拆分为一系列的标记&#xff08;token&#xff09;。StringTokenizer是为了兼容性原因而保留的遗留类。在新的代码中&#xff0c;不建议使用StringTokenizer&#xff0c;而建议使用String类的split方法来…

Ubuntu自建git服务器

Ubuntu 安装 gitlab-ce sudo apt-get update sudo apt-get install gitlab-ce 安装成功 sudo apt-get install gitlab-ce 正在读取软件包列表... 完成 正在分析软件包的依赖关系树 正在读取状态信息... 完成 下列【新】软件包将被安装&#xff1a;gitlab-ce 升…

假如我有一台服务器

如果我有一台服务器&#xff0c;我会认真考虑如何充分利用它的潜力来实现自己的创意项目或支持社区。服务器是一个强大的工具&#xff0c;可以用于各种用途&#xff0c;下面我将分享一些潜在的想法&#xff1a; 1. 创意项目的托管&#xff1a; 首先&#xff0c;我会考虑托管自…

私有云:【5】安装VCenter Server

私有云&#xff1a;【5】安装VCenter Server 1、在本地物理机上安装VCenter Server到Esxi1.1、开始安装第一阶段1.2、开始安装第二阶段 2、配置VCenter2.1、分配许可2.2、添加主机2.3、创建数据存储NFS 1、在本地物理机上安装VCenter Server到Esxi 安装前在AD域服务器配置好VC…

HDU 1062:字符串反转

【题目来源】http://acm.hdu.edu.cn/showproblem.php?pid1062【题目描述】 Ignatius likes to write words in reverse way. Given a single line of text which is written by Ignatius, you should reverse all the words and then output them.【输入格式】 The input cont…

MAYA教程之建模基础命令介绍

基础命令 视图相关操作 旋转视图 : ALT 鼠标左键平移视图 : ALT 鼠标中键缩放视图 : 滚动鼠标滚轮 或者 ALT 鼠标右键切换视图 : 空格键回到模型 : F 视图状态 选择状态 : Q移动状态 : W旋转状态 : E缩放状态 : R 视图显示 正常显示 : 1正常圆滑同时显示 : 2圆滑显示 …

MySQL - 覆盖索引、索引下推

覆盖索引&#xff08;Covering Index&#xff09; &#xff1a; 覆盖索引是一种索引&#xff0c;包含了查询中需要的所有列&#xff0c;而不仅仅是索引列本身。这种索引可以通过减少磁盘I/O和提高查询性能来优化数据库查询。当一个查询可以完全通过覆盖索引满足时&#xff0c;数…

java 使用策略模式减少if

使用多态&#xff1a;通过使用面向对象的多态特性&#xff0c;可以将不同的逻辑封装到不同的类中&#xff0c;避免大量的 if 语句。使用继承和接口来定义通用的方法&#xff0c;并让具体的实现类实现这些方法。 使用设计模式&#xff1a;使用设计模式可以更好地组织和管理代码逻…

设计模式:责任链模式(C#、JAVA、JavaScript、C++、Python、Go、PHP)

上一篇《享元模式》 下一篇《解释器模式》 简介&#xff1a; 责任链模式&#xff0c;它是一种行为型设计模式&#xff0c;它将许多对象连接起来形成一条链&#xff0c;每个对象处理不同的请求&#xff0c…

word页脚设置,页脚显示第几页共有几页设置步骤

word页脚设置&#xff0c;页脚显示第几页共有几页设置步骤&#xff1a; 具体步骤&#xff1a; 步骤1&#xff1a; 步骤1.1选择页脚---空白页脚 步骤1.2&#xff0c;在"[在此处键入]"&#xff0c;直接输入你需要的格式&#xff0c;如 “第页/共页” 步骤1.3选择第“…

第四部分:JavaScript

一&#xff1a;jQuery 1.1&#xff1a;jQuery介绍 什么是jQuery&#xff1f; jQuery是JavaScript和查询&#xff08;Query&#xff09;&#xff0c;它是辅助JavaScript开发的js类库 jQuery的核心思想 核心思想是write less&#xff0c;do more&#xff0c;所以它实现了很多浏览…

jmeter BeanShell预处理程序:报错JSONObject not found in namespace

1、jmeter运行报错: ERROR o.a.j.u.BeanShellInterpreter: Error invoking bsh method: eval Sourced file: inline evaluation of: ". . . : Typed variable declaration : Class: JSONObject not found in namespace WARN o.a.j.m.BeanShellPreProcessor: Problem…

AI:40-基于深度学习的森林火灾识别

🚀 本文选自专栏:AI领域专栏 从基础到实践,深入了解算法、案例和最新趋势。无论你是初学者还是经验丰富的数据科学家,通过案例和项目实践,掌握核心概念和实用技能。每篇案例都包含代码实例,详细讲解供大家学习。 📌📌📌本专栏包含以下学习方向: 机器学习、深度学…

【Java】LinkedList 集合

LinkedList集合特点 LinkedList 底层基于双向链表实现增删 效率非常高&#xff0c;查询效率非常低。 LinkedList源码解读分析 LinkedList 是双向链表实现的 ListLinkedList 是非线程安全的&#xff08;线程是不安全的&#xff09;LinkedList 元素允许为null,允许重复元素Linked…

2023版 STM32实战12 IIC总线读写AT24C02

IIC简述 一个多主从的串行总线&#xff0c;又叫I2C&#xff0c;是由飞利浦公司发明的通讯总线 IIC特点 -1- 串行(逐bit传输) -2- 同步(共用时钟线) -3- 半双工(收发不同进行) -4- 总线上的任何设备都可以是主机 开发使用习惯和理解 -1- 通过地址寻址 -2- 数据线的…

Ubuntu20.04下安装MySQL8环境

Ubuntu20.04下安装MySQL8环境 1.下载MySQL客户端和服务器2.配置MySQL3.测试MySQL4.设置MySQL服务开机自启动5.修改root密码MySQL数据库基本使用启动MySQL数据库服务重启MySQL数据库服务停止MySQL数据库服务查看MySQL运行状态设置MySQL服务开机自启动停止MySQL服务开机自启动MyS…

[Linux]线程池

[Linux]线程池 文章目录 [Linux]线程池线程池的概念线程池的优点线程池的应用场景线程池的实现 线程池的概念 线程池是一种线程使用模式。线程池是一种特殊的生产消费模型&#xff0c;用户作为生产者&#xff0c;线程池作为消费者和缓冲区。 线程过多会带来调度开销&#xff0c…

系统架构设计师-第16章-嵌入式系统架构设计理论与实践-软考学习笔记

嵌入式系统( Embedded System) 是为了特定应用而专门构建的计算机系统&#xff0c;其架构是随着嵌入式系统的逐步应用而发展形成的。嵌入式软件架构的设计与嵌入式系统的体系架构是密不可分的。因此&#xff0c;本常首先介绍嵌入式系统硬件相关知识&#xff08;系统特征、硬件组…