electron 热更新

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主要处理更新资源的下载和替换

     // 热更新相关js
     import { 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 文档 地址

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值