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

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】中的部分代码整合到自己工程中。
1、将【@electron-delta】添加到自己工程的src目录下，我已改名为【electron-delta】，相应使用的地方不要忘记同步改一下

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

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

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

二、 修改代码

1、修改【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
注：具体参照文末的代码例链接，由于此部分代码修改量比较大，可同原工程中的代码差分比较以明确修改范围

2、修改【src/background.js】代码


原autoUpdater逻辑改为使用deltaUpdater，如：
deltaUpdater.checkForUpdates();
deltaUpdater.downloadUpdate();
deltaUpdater.quitAndInstall();等，以及下图

3、修改【vue.config.js】配置

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

5、修改【package.json】配置

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

6、安装和卸载时为显示详情，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中的代码，只是每次重新安装此模块都需要手改，太麻烦。

7、由于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进行引入；

8、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】中下载；

9、【release-notes.md】用来存放所有版本的更新记录，因为是更新安装前可进行查看，此文件放到了public中，在vue.config.js的releaseInfo中指定

此文件中的版本信息会在此事件的info.releaseNotes中存放：
deltaUpdater.on(‘update-available’, (info) => {…}，详情参照background.js和login.vue的交互逻辑

三、 增量更新打包

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

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

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

3、以上打包exe安装后，原exe文件需要保留在dist_electron中，因为后续使用其进行二进制差分生成增量更新包

4、假设代码已做修改，以下则为增量打包的配置过程

5、pakage.json中的version(最新版本)、forceupdate(是否强制更新)、latestReleaseInfo(最新版更新履历)及public中的release-notes.md(注意书写格式)需要同步修改

6、vue.config.js中的publish中，url需要修改为客户环境下载路径

7、exe文件夹【dist_electron】中执行cmd打开命令窗口，执行【npx serve -p 5000】命令，用于生成增量包时使用

8、修改【.electron-delta.js】代码并保存

上图假设上一版本为1.0.8，最新版本为1.0.9，可兼顾停留在1.0.7未升级过的人员。按以上所示，通过指定要兼顾的最大旧版本数，明确指定哪几版，并且确保在【dist_electron】文件夹中存在所指定的旧版exe文件

9、再次运行工程的打包命令，结束后，会在【dist_electron】文件夹中生成【最新版本号-win-deltas】的文件夹，内有增量更新包exe和delta-win.json文件

此时，增量更新包就打好了，当然外层的【dist_electron】中还保留着最新版的全量安装包，将以上增量包文件夹中的所有文件复制到【dist_electron】中

注意：增量时也需要使用latest.yml文件
将这些文件直接上传到vue.config.js的publish url中

客户端就能收到更新通知了（看名字x.x.x-to-y.y.y就能知道是从哪一版更新到最新版）。

10、写在最后
全量包和增量包都存在的情况下，会优先使用增量更新；
所谓的强制更新指的是在用户login页面，控制更新通知弹窗是否可关闭来实现的；
由于是对安装文件exe的整体二进制差分生成增量更新包，所以对【app.asar】以外的exe及dll等资源文件也可更新；
增量打包后，会在工程文件夹下生成【cache】文件夹，可手动删除即可；
代码例链接如下 ：
https://gitee.com/lykiao/electron-delta-update-sample.git
注意：此代码非全工程代码，无法执行，只是以上所有相关逻辑的摘录