首页/文章/electron

Electron+Vue客户端一键生成多版本差分全资源增量更新包

2024-07-29

4174 字约 14 分钟

...

学习

Electron+Vue开发客户端时，一般安装包体积太大，如果使用常规的electron-updater来更新的话，每次升级都会重新下载整个安装包，一是浪费流量，最主要的是太耗时间。

因为我的客户端里不只是纯electron的资源，还有第三方的dll、exe等，所以使用网上使用比较多的差分【app.asar】的方式是行不通的，因为第三方的资源不会包含在app.asar中。

差分【app.asar】的更新方式可以参照以下我筛选的文章：

https://blog.csdn.net/sxww_zyt/article/details/131006833

http://hk.javashuo.com/article/p-skzcipva-vm.html

https://xuxin123.com/electron/increment-update1/

那么，如何将整个安装包差分后，提取成增量安装包呢？搜遍全网，没有完整的方案，所幸github上一位大佬开源的代码【electron-delta】给了我启发：

https://github.com/electron-delta/electron-sample-app

这是大佬提供的使用例，但只适用于oneClick方式打包（无法让用户自行指定安装路径），索性在此基础上，进行了改装，已实现：允许指定安装路径、强制/非强制更新设置，折腾历程甚是曲折，下面将一一进行讲解。

如上述提到的，由于electron-delta只提供了oneClick方式打包，如果想要指定安装路径方式安装，就需要对node_modules中的【@electron-delta】原代码进行修改，所以需要将以上工程【electron-sample-app】中的部分代码整合到自己工程中。

将【@electron-delta】添加到自己工程的src目录下，我已改名为【electron-delta】，相应使用的地方不要忘记同步改一下

【.electron-delta.js】添加到自己工程的src目录下

【vue.config.js】中的【builderOptions】中添加获取增量更新包的配置【afterAllArtifactBuild: '.electron-delta.js'】

此时，可通过自己工程的打包命令尝试打包，看合并代码后的工程是否存在问题。然后建议提交一版代码，为下一步大量修改代码做好准备。

修改【electron-delta】中的builder和updater模块代码，主要包括以下文件：

src/electron-delta/builder/src/create-all-deltas.js

src/electron-delta/builder/src/delta-installer-builder/index.js

src/electron-delta/builder/src/delta-installer-builder/nsis/installer.nsi

src/electron-delta/builder/src/index.js

src/electron-delta/updater/src/index.js

注：具体参照文末的代码例链接，由于此部分代码修改量比较大，可同原工程中的代码差分比较以明确修改范围

修改【src/background.js】代码

原autoUpdater逻辑改为使用deltaUpdater，如：

deltaUpdater.checkForUpdates();

deltaUpdater.downloadUpdate();

deltaUpdater.quitAndInstall();等，以及下图

修改【vue.config.js】配置

添加【scripts/checkEnv.nsh】，除了用于第三方exe是否退出的检查外，主要需要固定安装时注册表key：【com.yf-pc-chat-yfx.install-guid】，用于升级时读取原安装路径；
修改【package.json】配置

注：package.json及vue.config.js中固定卸载时注册表key：【guid: '
com.yf-pc-chat-yfx.uninstall-guid'】，用于更新控制面板中的显示版本和size信息

安装和卸载时为显示详情，npm安装的node_modules中的installSection.nsh原文件需要修改，并使用beforePack.js在打包前将修改后文件myInstallSection.nsh回写到node_modules【app-builder-lib\templates\nsis\】中，具体在vue.config.js中配置【beforePack: './scripts/beforePack.js'】。当然也可以直接手动修改node_modules中的代码，只是每次重新安装此模块都需要手改，太麻烦。
由于installer.nsi文件中包含中文，需要保存为utf-8 bom格式，但原语言文件为utf8格式，编辑会报错，另存文件【SimpChineseCustomized.nsh->SimpChinese.nsh、SimpChinese.nlf->SimpChineseCustomized.nlf】为utf-8 bom格式并引入installer.nsi，放入【C:\Users\Administrator\AppData\Roaming\electron-delta-bins\nsis-3.0.5.0\Contrib\Language files】中（此路径视本机安装使用的nsis而定），另存后的文件也存到了script文件夹中，以备后需，此处未使用beforePack.js进行引入；
installer.nsi中需要使用【C:\Users\Administrator\AppData\Roaming\electron-delta-bins\nsis-3.0.5.0\Plugins\x86-ansi】中的【nsProcess.dll、ShellExecAsUser.dll】等plugin，如果不存在，用以下两种方式获取：
从【C:\Users\Administrator\AppData\Roaming\electron-delta-bins\nsis-3.0.5.0\Plugins\x86-unicode】（此路径视本机安装使用的nsis而定）中复制，或者从【https://nsis.sourceforge.io/NsProcess_plugin】中下载；
【release-notes.md】用来存放所有版本的更新记录，因为是更新安装前可进行查看，此文件放到了public中，在vue.config.js的releaseInfo中指定

此文件中的版本信息会在此事件的info.releaseNotes中存放：

deltaUpdater.on('update-available', (info) => {…}，详情参照background.js和login.vue的交互逻辑

确认【.electron-delta.js】代码

执行工程的打包命令，生成exe安装文件，我的exe文件夹是dist_electron

上图标出的4个文件是全量更新时所必须的，其中full-win.json是为存放是否强制更新和最新版本信息新生成的，latest.yml原生工程中也会生成，但内容也做了补充，比如exe文件size和全量更新履历等，具体生成逻辑已包含在【electron-delta】代码中。

以上打包exe安装后，原exe文件需要保留在dist_electron中，因为后续使用其进行二进制差分生成增量更新包
假设代码已做修改，以下则为增量打包的配置过程
pakage.json中的version(最新版本)、forceupdate(是否强制更新)、latestReleaseInfo(最新版更新履历)及public中的release-notes.md(注意书写格式)需要同步修改
vue.config.js中的publish中，url需要修改为客户环境下载路径
exe文件夹【dist_electron】中执行cmd打开命令窗口，执行【npx serve -p 5000】命令，用于生成增量包时使用