electron 热更新

article/2025/8/26 15:54:38

1. electron自带的整体更新方式 (全量更新)
这种方式为electron官方的升级更新方式,主要是通过主进程中的autoUpdater模块进行检测升级更新的,此方式也是大家常见的大多数electron应用程序的更新方式。

检测到新版本后从服务器拉取 electron-builder生成的APP.zip文件,解压后,把*.app/*.exe 覆盖现有文件后重启(Mac端)/重新安装(PC端)。 这种更新的文件比较大,相当于删掉旧的,重新下载新APP后运行,对于小更新如文案,图片修改,并不友好

当用户打开app 时去校验是否时最新版本 如果不是 触发下载操作 下载完成后 关闭程序 启动安装 替换当前版本 (如果用户没有安装 下次打开应用时直接触发安装)

2. 在线热更新方式(只更新渲染进程相关,前端页面等资源,不更新主进程程序)
这种方式是只更新渲染前端相关资源,不会更新主进程相关的东西,所以下载更新的资源会很小,更新起来会很快,因为是在线热更新,更新完成后不用重新启动软件,只需刷新页面重新加载资源即可,所以,这种方式体验效果也比较好。

接下来说说热更新具体的实现

正常执行electron-builder进行打包,打包完成后将win-ia32-unpacked\resources\app.asar下的文件压缩成dist.zip文件,上传到服务器;客户端每次重启执行一次检测更新,比较本地与远程服务器的版本,如有最新版本,则下载zip包,通过Node fs模块写入本地,解压覆盖到本地resources下文件

  1. 在渲染进程引入ipcRenderer,监听从主进程传过来的更新事件,应用启动后在渲染进程调用接口比对服务器最新资源版本和本地资源版本是否一致,若不一致则向主进程触发资源热更新函数。
    ipcRenderer.send("window-update", "app"); // 用来触发热更新函数

  2. 在主进程模块下添加hotUpdate.js主要处理更新资源的下载和替换

     // 热更新相关jsimport { app } from 'electron';const admZip = require('adm-zip'); // 压缩解压插件const request = require('request');const fs = require('fs');const path = require('path');const baseUrl = path.resolve("./") + "/resources/app/"; //打包后 asar 解压后app 的地址 const fileUrl = 'http://192.168.2.36:3333/download/' // 服务端 包, package.json存放位置/*** 更新*/const downLoad = () => {return new Promise((resolve, reject) => {const stream = fs.createWriteStream(`${baseUrl}dist.zip`);const url = `${fileUrl}dist.zip`;request(url).pipe(stream).on('close', () => {const unzip = new admZip(`${baseUrl}dist.zip`); //下载压缩更新包unzip.extractAllTo(`${baseUrl}`, /*overwrite*/ true); //解压替换本地文件resolve()});})}/*** 检测更新*/export function hotUpdate () {return new Promise((resolve, reject) => {request({url: `${fileUrl}package.json`, //请求package.json,与本地对比版本号},(error, res, body) => {try {if (error || res.statusCode !== 200) {throw '更新版本号失败,请联系管理员';}const json = JSON.parse(body);const {version,description} = json;const localVersion = app.getVersion()downLoad().then(() => {fs.readFile(`${baseUrl}package.json`, function (err, data) {if (err) {return console.error(err);}let newData = JSON.parse(data);newData.version = version;fs.writeFile(`${baseUrl}package.json`, JSON.stringify(newData), function (err) {if (err) {return console.error(err);}// 重启app.relaunch({args: process.argv.slice(1)});app.exit(0);});});})} catch (err) {reject(err);}})})}

    代码示例 仅供参考

  3. 解决 windows 安装在c 盘 没有权限操作文件  配置 electron-builder

     "win": {"icon": "build/icons/icon.ico","requestedExecutionLevel": "highestAvailable"。// highestAvailable 已有最高权限},

    具体配置可查看nsis 文档 地址


http://chatgpt.dhexx.cn/article/YkFlhdWu.shtml

相关文章

uniApp实现热更新

热更新 热更新是开发中常见且常用的一种软件版本控制的方式,在uniapp进行使用热更新将软件实现更新操作 思路: 服务器中存储着最新版本号,前端进行查询可以在首次进入应用时进行请求版本号进行一个匹对如果版本号一致则不提示,反之则提示进行…

Android热更新详解

一 前言介绍 正好最近又看到热更新,对以前Android 热修复核心原理:ClassLoader类加载机制做了点补充。 从16年开始开始,热修复技术开始在安卓界流行,它以classloader类加载机制为核心,可以不发布新版本就修复线上 bu…

热更新原理

对于热更新的问题就是了解两个点的问题: 如何加载补丁包,也就是如何加载dex 文件的过程(dex是补丁包,更改的文件都在补丁包中)修复后的类如何替换掉旧的类 通过这篇文章给大家介绍下我理解的热更新的逻辑&#xff0c…

Cocos Creator 3.x 热更新

前言:游戏做热更新 是基本需求; 好在 cocos-creator 已经为我们做好了方案,相对于 U3D 的热更新方案来说,使用起来很简便!,不用关注很多细节 本文使用的是 cocos-creator 3.5.2 版本 官方文档 &#xff1…

热更新原理及实践注意

首先要说明几个概念,不要混用,热部署,热加载; 热部署:就是已经运行了项目,更改之后,不需要重新tomcat,但是会清空内存,重新打包,重新解压war包运行,可能好处是一个tomcat多个项目,不必因为tomcat停止而停止…

热更新你都知道哪些?

热更新系列目录 热更新你都知道哪些?热更新Sophix的爬坑之路腾讯热更新Tinker的故事阿里热更新Sophix的故事 Android热更新 前言1. 什么是热更新?2. 主流热更新方案3. 腾讯系热更新4. 阿里系热更新总结 博客创建时间:2020.05.16 博客更新时间…

热更新技术简易原理及技术推荐

为了照顾萌新童鞋,最开始还是对热更新的概念做一个通俗易懂的介绍。 热更新用通俗的讲就是软件不通过应用商店的软件版本更新审核,直接通过应用自行下载的软件数据更新的行为。在用户下载安装App之后,打开App时遇到的即时更新,是…

热更新及其原理

热更新:是app常用的更新方式,只需下载安装更新部分的代码 工作原理:动态下开发代码,使开发者在不发布新版本的情况下修复bug和发布功能,绕开苹果审核机制,避免长时间的审核以及多次被拒绝造成的成本。 优…

HTML/CSS实现小米官网搜索框效果

效果图: 需求分析: 1、输入框焦点事件 onfocus:成为焦点, 点击输入框的时候,出现闪烁光标,此时可以输入内容。 onblur :失去焦点, 点击页面空白区域,光标消失。此时不可以输入内容。 2、获取元素 3、注册事件 2.1…

html中的搜索代码,Web自动化(3):网页自动搜索功能

unsplash.jpg 写在前面 如果我们需要在期刊中搜索我们想要找的文章,那么我们如何才能达到这个目的。我们首先看一下,手动和自动对比图: 网页搜索.png 其实内容全部一样,我们只是用自动化程序,来代替我们手动操作。 1. 创建webdriver驱动对象,驱动打开网页 # 导入包 from …

java搜索代码_Java实现搜索功能代码详解

首先,我们要清楚搜索框中根据关键字进行条件搜索发送的是get请求,并且是向当前页面发送get请求 //示例代码 请求路径为当前页面路径 "/product" 当我们要实现多条件搜索功能时,可以将搜索条件封装为一个map集合,再根据m…

干货!最全优秀搜索框设计案例(含代码链接)

面对纷繁复杂的网页内容,用户通过查询关键词表达需求,期望在响应的查询结果中快速获取准确的信息和流畅的用户体验。用户与网络世界的万千联系都是从搜索开始的。搜索框之于用户就像是用户与应用或网站之间的对话窗口。小小的搜索框传递着用户与网站、应…

php网页制作中搜索框的代码,在网页里嵌入百度搜索框功能

今天发现某个网站是直接使用百度搜索作为自己网站的搜索功能的,感觉这个挺好玩的,不需要去研究复杂的搜索算法而又直接使用了百度搜索这个强大的搜索引擎为自己撑腰。无论对自己还是对用户来说都是相当不错的选择,下面作者将要和大家分享一下…

利用CSS写精美搜索框

利用html写搜索样式框 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>8款纯CSS3搜索框</title&g…

JavaScript实现智能搜索框

应用场景&#xff1a; 1. 搜索框在页面中占据的空间过小&#xff0c;希望无论浏览到什么位置&#xff0c;可以轻易地回到并聚焦搜索框。 2. 搜索框里面的文字大小过小&#xff0c;希望能够在上方开辟一块空间放大内容 解决思路&#xff1a; 1. 对整个页面添加键盘事件keyup…

html中搜索栏怎么写,html搜索框怎么做

很多:从记忆角度讲运用(谐音记忆法,联想法) 平常来说呢,可分为(死记硬背发,音标记忆法) 另外:自己创造 总结【谐音记忆法,死记硬背发,音标记忆法】 html/css如何写出如下搜索框效果&#xff0c;请给出代码 html制作一个搜索框&#xff0c;代码是什么&#xff1f; 打开Hbuilder编…

搜索导航HTML,CSS 带搜索导航栏的示例代码

本文为大家介绍如何使用 CSS 创建一个带搜索的导航栏。 以下实例均是响应式的。 可以先看下效果图: 创建一个搜索栏 主页 关于 联系我们 /* 在顶部导航栏中添加黑色背景颜色 */ .topnav {overflow: hidden; background-color: #e9e9e9; } /* 设置导航栏的链接样式 */ .topnav …

淘宝网搜索框源代码

搜索框代码&#xff1a; <script typetext/javascript> alimama_pidmm_11487878_0_0; alimama_typeg; alimama_tks{}; alimama_tks.style_i1; alimama_tks.lg_i1; alimama_tks.w_i350; alimama_tks.h_i69; alimama_tks.btn_i1; alimama_tks.txt_s; alimama_tks.hot_i1; a…

百度搜索框代码,实现回车点击,跳转到新页面,简单

参考网站&#xff1a;https://110.nanshiw.com/ 上图为实现效果 代码如下&#xff1a; <script> function butClick() {var val document.getElementById("search_key").value;if(val.length 0){alert(搜索为空&#xff0c;请输入内容);return false;}else…

智能搜索框html代码,js实现搜索框关键字智能匹配代码

只要使用搜索引擎的朋友应该都有这样的体会&#xff0c;就是当在搜索框输入关键字的时候&#xff0c;会出现自能匹配现象&#xff0c;这绝对是非常好的用户体验&#xff0c;下面就是一段类似的代码&#xff0c;当然这里只是掩饰&#xff0c;所以只能匹配的数据都是本地固定好的…