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 文档 地址

        评论消息可能没有及时看到可+q:1299211400 交流

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐