前端项目重新打包部署后如何通知用户更新

前端项目重新打包部署后如何通知用户更新

  • 前端项目重新打包部署后如何通知用户更新
  • 常用的webSocket解决方案
  • 纯前端方案
    • 路由拦截
    • 多线程
      • main.ts中 创建多线程
      • 多线程逻辑处理

前端项目重新打包部署后如何通知用户更新

前端项目重新打包部署后,由于用户没及时更新页面,导致配置存的还是旧逻辑值,引发了线上问题;所以进行版本更新的通知功能就很有必要上马了。

常用的webSocket解决方案

实现思路

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

缺点:

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

纯前端方案

效果
具体提示什么可以自定义,这里是简单的demo
在这里插入图片描述

实现思路
每次打包时,都生成一个时间戳,作为系统的伪版本,放到JSON文件中,通过对比文件的响应头Etag判断是否有更新。具体步骤如下:

  • 在public文件夹下加入version.json文件,里面存放两个字段:更新内容、更新时间戳
    前端打包的时候向version.json写入当前时间戳信息
  • 在入口文件main.js中引入检查版本更新的逻辑,有更新则提示更新。

在这里插入图片描述

具体实现起来有两种方案:路由拦截、多线程+定时器
在 vite.config.ts 文件中写入时间戳(或者格式化后的时间);

const { readFile, writeFile } = require('fs');
import moment from 'moment';function pathResolve(dir: string) {return resolve(__dirname, '.', dir);
}// 获取版本是否更新文件,这里的路径要配合nginx写  Date.new()避免浏览器缓存,强制获取最新的资源
readFile(resolve(__dirname, 'public/version.json'), (err: any, data: any) => {if (err) {console.log('读取失败');return;}const version = JSON.parse(data);version.lastTime = moment(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss');writeFile(resolve(__dirname, 'public/version.json'), JSON.stringify(version), (err: any) => {if (err) {console.log('写入失败');return;}});
});

路由拦截

// !路由拦截
import router from '/@/router';
let lastEtag: string | null = '';
let hasUpdate = false;
const checkUpdate = async () => {try {// 获取版本是否更新文件,这里的路径要配合nginx写  Date.new()避免浏览器缓存,强制获取最新的资源let response = await fetch(`/baiju/version.json?v=${Date.now()}`, { method: 'head' });let etag = response.headers.get('etag');if (!lastEtag) lastEtag = etag;if (lastEtag && lastEtag !== etag) {lastEtag = etag;hasUpdate = true;}} catch (error) {console.error('Error checking for updates:', error);}
};
// 其实利用浏览器的多线程更好一些,用路由拦截还必须触发路由才可以 worker+setInterval
// 路由拦截
router.beforeEach(async (to, from, next) => {// 路由跳转前next();try {await checkUpdate();if (hasUpdate) {// 提示页面也可以采用worker多线程去处理提示,这里只是演示alert('发现新版本,请刷新页面');window.location.reload();}} catch (err) {console.log(err);}
});

多线程

main.ts中 创建多线程

let worker = new Worker('./worker/checkUpdate.js');
worker.postMessage('checkUpdate');
worker.onmessage = function (event) {let data = event.data;console.log(data);if (data) {alert('发现新版本,请刷新页面');window.location.reload();}
};

多线程逻辑处理

self.onmessage = function (event) {let data = event.data;// console.log('Worker:', checkUpdate());// 30s更新一次let timer = setInterval(() => {checkUpdate().then((res) => {self.postMessage(res)if (res) {clearInterval(timer);self.close();}})}, 30 * 1000);// 先执行一次checkUpdate().then((res) => {self.postMessage(res)if (res) {clearInterval(timer);self.close();}})
};let lastEtag = '';
let hasUpdate = false;
const checkUpdate = async () => {return new Promise(async (resolve, reject) => {// 获取版本是否更新文件,这里的路径要配合nginx写let response = await fetch(`/version.json?v=${Date.now()}`, { method: 'head' });let etag = response.headers.get('etag');if (!lastEtag) lastEtag = etag;if (lastEtag && lastEtag !== etag) {lastEtag = etag;hasUpdate = true;}resolve(hasUpdate);});};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/52136.shtml

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

相关文章

什么是OpenTiny?

OpenTiny 是一套企业级的 Web 前端开发解决方案,提供跨端、跨框架的 UI 组件库和低代码引擎,帮助开发者高效构建 Web 应用 。企业运用开发中,可以利用 OpenTiny 的以下核心组件和优势: TinyVue 组件库:一个丰富的组件库…

python初级爬虫实战:我是怎么用python下载音乐的

今天分享的内容是如何使用python下载歌曲和歌词信息,文章涉及内容主要为了帮助大家学习python技能,请大家合规合理使用。 如果你正在学习Python爬虫,但是找不到方向的话可以试试我这一份学习方法和籽料呀!点击 领取(不…

汽车IVI中控OS Linux driver开发实操(二十四):I2C设备驱动的编写

概述: 在Linux驱动中I2C系统中主要包含以下几个成员: I2C adapter(即I2C适配器,用来控制各种I2C从设备,其驱动需要完成对适配器的完整描述,最主要的工作是需要完成i2c_algorithm结构体。这个结构体包含了此I2C控制器的数据传输具体实现,以及对外上报此设备所支持的功…

0.91寸OLED迷你音频频谱

一、简介 音频频谱在最小0.91寸OLED 屏幕上显示,小巧玲珑 二、应用场景 本模块为音频频谱显示模块,用来获取声音频谱并展示频谱,跟随音乐声音律动 三、产品概述 基于主控芯片设计的将声音采集分析频谱,显示到0.91寸OLED的功能…

我们如何将数据输入到神经网络中?

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。 下面我拿识别美女的例子来给大家介绍如何将美女的图片数据输入到神经网络中。 此例中,待输入的数据是一张图像。为了存储图像…

Java中String类的经典问题、错误认知以及归纳总结

在学习过程中对String类的理解反复刷新,以此文记之,做归纳总结,也适合新手避坑。 以实用性考虑,环境为Java 8 以及 之后版本。 String类相比其它类特殊的地方在于有一个字符串常量池(StringTable),里面存着字面量的引…

Hackademic.RTB1靶场实战【超详细】

靶机下载链接:https://download.vulnhub.com/hackademic/Hackademic.RTB1.zip 一、主机探测和端口扫描 nmap 192.168.121.0/24 ip:192.168.121.196 端口:22、80 二、访问80端口 发现target可点击 点击后跳转,页面提示目标是读取到 key.txt 文件 fin…

Enhancing Octree-Based Context Models for Point Cloud Geometry Compression 论文笔记

1. 论文基本信息 发布于: IEEE SPL 2024 2. 创新点 分析了基于 one-hot 编码的交叉熵损失函数为什么不能准确衡量标签与预测概率分布之间的差异。介绍了 ACNP 模块,该模块通过预测占用的子节点数量来增强上下文模型的表现。实验证明了ACNP模块在基于八…

【Java】 力扣 最大子数组和

目录 题目链接题目描述思路代码 题目链接 53.最大子数组和 题目描述 思路 动态规划解析: 状态定义: 设动态规划列表 dp ,dp[i] 代表以元素 nums[i] 为结尾的连续子数组最大和。 为何定义最大和 dp[i] 中必须包含元素 nums[i] :…

前端css动画缩放transform: scale()

transform: scale(2) scale等比例放大 大于1是放大 小于1是缩小 负值是倒着放大 scaleX scaleY 可以单独设置只在x轴y轴放大 改变中心点放大的位置 左上 left top 左下 left bottom 左中 left center 右上 …

Python之列表的基本使用

列表 一、什么是列表二、创建 Python 列表三、二维列表四、索引和切片五、运算符六、列表的函数(1)len(列表名)(2)min(列表名)(3)max(列表名)(4)s…

探索顶级PDF水印API:PDFBlocks(2024年更新)

引言 在一个敏感信息常常面临风险的时代,能够轻松高效地保护文档的能力至关重要。PDF水印已成为企业和个人寻求保护其知识产权、确保文件保密性的基本工具。 PDFBlocks 文字水印 API是什么? PDFBlocks API 提供了一个强大的解决方案,用于在…

如何使用博达网站群管理平台的树状导航

1 介绍 由于网站建设需要,需在首页的左边竖栏部分使用树状导航。我又过了一遍《网站群管理平台用户手册》,没发现如何在网站的首页设置树状导航组件。昨天,我之所以在创建树状导航上不知所措,是因为平台本身有一些误导&#xff0…

如何用Java SpringBoot+Vue搭建校内跑腿业务系统?实战教程解析

✍✍计算机毕业编程指导师 ⭐⭐个人介绍:自己非常喜欢研究技术问题!专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目:有源码或者技术上的问题欢迎在评论区一起讨论交流! ⚡⚡ Java、…

ASM实例的SPILE 存储在ASM的磁盘组上时,集群要如何去获取SPFILE并启动ASM实例?(1)

从11g R2 开始,ASM spfile 会自动存储在安装集群软件时创建的第一个磁盘组中,一般为OCR磁盘组。由于投票盘/OCR 存储在 ASM 上,因此需要在节点上启动 ASM。要启动 ASM,需要其 SPFILE 。但 SPFILE 仅位于 ASM 磁盘组上。集群是如何…

【html+css 绚丽Loading】 - 000009 五行逆流珠

前言:哈喽,大家好,今天给大家分享htmlcss 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏关注哦 &#x1f495…

[000-01-018].第3节:Linux环境下ElasticSearch环境搭建

我的后端学习笔记大纲 我的ElasticSearch学习大纲 1.Linux系统搭建ES环境: 1.1.单机版: a.安装ES-7.8版本 1.下载ES: 2.上传与解压:将下载的tar包上传到服务器software目录下,然后解压缩:tar -zxvf elasticsearch-7…

Excel求和方法之

一 SUM(),选择要相加的数,回车即可 二 上面的方法还不够快。用下面这个 就成功了 三 还有一种一样快的 选中之后,按下Alt键和键(即Alt)

深度学习------------------卷积神经网络(LeNet)

目录 LeNet网络手写的数字识别MNIST总结卷积神经网络(LeNet) 问题 LeNet网络 手写的数字识别 MNIST ①输入的是:3232的image ②放到一个55的卷积层里面(为什么是5?因为32-x128,∴x5)&#xff0c…

计算机毕业设计PySpark+Flask bilibili弹幕情感分析 B站视频数据可视化 B站爬虫 机器学习 深度学习 NLP自然语言处理 大数据毕业设计

### 开题报告:基于PySpark和Flask的B站弹幕情感分析系统 #### 一、研究背景 在网络视频平台的用户互动中,弹幕(Danmaku)作为一种实时评论的形式,已经成为观众表达观点和情感的重要方式。尤其是在B站(哔哩…