Electron-开发实践：几种更新方式

【前言】

Electron开发桌面APP后，

接着涉及一个问题就是如何更新后续的版本，

本文介绍几种更新的方式。

【Electron架构】

用Electron开发的桌面APP，

其实包含几个部分：

1. Electron本身的环境

2. 主进程，主进程中又分为Nodejs部分，和非Nodejs部分（例如c++）

3. 渲染进程，可以用各种前端技术生成

【文件结构】

以Mac的应用为例，文件结构分为几个部分，

1. 安装包dmg，理解为一个将应用app压缩后的产物

2. 应用包app

3. 业务代码resources文件夹

4. 业务核心代码app文件夹

5. app文件夹中又分为renderer文件夹，main文件夹，plugins文件夹

架构和文件夹结构对应关系如下

【更新频次及更新方式】

了解了electron架构以及安装后文件夹各部分的对应关系后，

再来看下各部分更新频次以及建议的更新方式

1. electron环境：一般指electron版本的变更，这个在业务开发后基本很少变更，如果变更都需要新发dmg，走全量更新

2. 主进程-非nodejs部分，指c++部分，例如dylib，node等文件变更，变更也较少，如果变更，也建议走全量更新

3. 主进程-nodejs部分，这部分指nodejs写的业务代码，一般变更比较多，可以走增量更新

4. 渲染进程，这部分指前端部分，一般变更最多，完全可以走增量更新

【更新包大小】

以之前一个业务的app为例，

对比几种更新方式对应的包大小：

1. 全量更新：dmg方式，包体积90M

2. 增量更新：主进程的nodejs部分以及渲染进程，包体积3.4M，是全量的3.4%

所以变更频次最高的部分“主进程nodejs部分&渲染进程”反而更新包体积最小

【打包方式】

而要实现增量更新，对应的打包方式也要稍作修改

默认打包

本文使用的打包更具： https://qiao-electron-cli.vincentqiao.com/#/

采用默认打包方式后，app文件夹中有main，renderer文件夹，如下

asar打包

将qiao-electron.config.js中的asar选项修改为true后，如下

发现整个app文件夹变为一个asar文件了，

其实这并不是理想效果，

因为将主进程-非nodejs部分也打包进去了，

而这部分包体积占比不小，更新频次不高，

增量更新打包

其实最理想的效果是这样：

1. app文件夹内，主进程-非nodejs部分还是文件夹形式，如上图plugins

2. app文件夹内，主进程-nodejs部分&渲染进程部分一起打包为一个asar文件，既可以保持体积小，又方便更新

【具体实现】

几种打包及更新方式如何实现呢，

这里推荐一个electron打包工具： https://qiao-electron-cli.vincentqiao.com/#/

文件结构

对应的文件结构如下

1. xx-renderer文件夹：存放渲染进程代码，将最终产物构建到xx-electron/dist/renderer下

2. xx-main文件夹：存放主进程nodejs代码，将最终产物构建到xx-electron/dist/main下

3. xx-electron文件夹：存放打包配置文件

默认打包

在xx-electron下新建配置文件：qiao-electron.config.js

默认打包的配置详见： https://qiao-electron-cli.vincentqiao.com/#/packmac  

执行命令后，会将mac应用包输出到xx-electron/out/xx-darwin-arm64文件夹下，

输出如下：

> icns-electron@0.0.4 packmac:arm64
> qelectron pm ./pack/darwin-arm64.config.js

can not find ./qiao-electron.mac-sign.js
pack electron application by qiao-electron-cli:
{
  arch: 'arm64',
  overwrite: true,
  asar: false,
  dir: 'dist',
  out: 'out',
  platform: 'darwin',
  name: 'icns',
  icon: 'pack/icon/icon.icns',
  appVersion: '0.0.4',
  appCopyright: 'Copyright © 2024 insistime.com版权所有'
}

Packaging app for platform darwin arm64 using electron v30.0.1
pack electron application success!

最终产物：

asar打包

与默认打包不同是将配置文件中的asar设置为了true，

最终产物中的app文件夹会变为asar文件，

mac签名和公证

详见另一篇文章： https://blog.insistime.com/electron-mac-sign

基于qiao-electron-cli的打包详见： https://qiao-electron-cli.vincentqiao.com/#/packmac

在xx-electron下新增了一个配置文件：qiao-electron.mac-sign.js

打包过程会新增了签名和公证的部分，时间会稍微久一点，

控制台输出和最终产物和上面两种形式类似。

增量更新打包

只需要将qiao-electron.config.js中的versionUpdate属性修改为true即可，

控制台输出如下：

> icns-electron@0.0.4 packmac:arm64
> qelectron pm ./pack/darwin-arm64.config.js

qiao-electron-cli / error / pack /  can not find ./qiao-electron.mac-sign.js
qiao-electron-cli / info / versionUpdate /  root /Users/vincent/Desktop/insistime/icns-monorepo/packages/icns-electron
qiao-electron-cli / info / versionUpdate /  version 0.0.4
qiao-electron-cli / info / versionUpdate /  postPath dist-post
qiao-electron-cli / info / versionUpdate /  cpSrc /Users/vincent/Desktop/insistime/icns-monorepo/packages/icns-electron/dist
qiao-electron-cli / info / versionUpdate /  cpDest /Users/vincent/Desktop/insistime/icns-monorepo/packages/icns-electron/dist-post/0.0.4
qiao-electron-cli / info / versionUpdate /  cpRes true
qiao-electron-cli / info / versionUpdate /  asarDest /Users/vincent/Desktop/insistime/icns-monorepo/packages/icns-electron/dist-post/0.0.4.asar
qiao-electron-cli / info / versionUpdate /  asarRes sucess
qiao-electron-cli / info / versionUpdate /  jsonSrc /Users/vincent/Desktop/insistime/icns-monorepo/packages/icns-electron/dist-post/0.0.4/package.json
qiao-electron-cli / info / versionUpdate /  jsonDest /Users/vincent/Desktop/insistime/icns-monorepo/packages/icns-electron/dist-post/package.json
qiao-electron-cli / info / versionUpdate /  jsonStr {
  "name": "icns",
  "private": true,
  "version": "0.0.4",
  "main": "main/index.js",
  "dependencies": {}
}

qiao-electron-cli / info / versionUpdate /  jsonRes true
qiao-electron-cli / info / versionUpdate /  rmRes true
qiao-electron-cli / info / versionUpdate /  mvRes true
qiao-electron-cli / info / pack.js /  pack electron application by qiao-electron-cli:
qiao-electron-cli / info / pack.js /  config {
  arch: 'arm64',
  overwrite: true,
  asar: false,
  versionUpdate: true,
  dir: 'dist',
  out: 'out',
  platform: 'darwin',
  name: 'icns',
  icon: 'pack/icon/icon.icns',
  appVersion: '0.0.4',
  appCopyright: 'Copyright © 2024 insistime.com版权所有',
  afterInitialize: [ [AsyncFunction (anonymous)] ]
}

Packaging app for platform darwin arm64 using electron v30.0.1
qiao-electron-cli / info / afterPack /  buildPath /var/folders/t7/pcqmy6kj07b97z_2h5g5_sjr0000gn/T/electron-packager/darwin-arm64/icns-darwin-arm64-Sy6Xw1/Electron.app/Contents/Resources/app
qiao-electron-cli / info / afterPack /  jsonSrc /var/folders/t7/pcqmy6kj07b97z_2h5g5_sjr0000gn/T/electron-packager/darwin-arm64/icns-darwin-arm64-Sy6Xw1/Electron.app/Contents/Resources/app/package.json
qiao-electron-cli / info / afterPack /  jsonStr {"name":"icns","private":true,"version":"0.0.4","main":"0.0.4/main/index.js","dependencies":{}}
qiao-electron-cli / info / afterPack /  jsonVersion 0.0.4
qiao-electron-cli / info / afterPack /  jsonAfterStr {"name":"icns","private":true,"version":"0.0.4","main":"0.0.4.asar/main/index.js","dependencies":{}}
qiao-electron-cli / info / afterPack /  jsonRes true
qiao-electron-cli / info / afterPack /  rmPath /var/folders/t7/pcqmy6kj07b97z_2h5g5_sjr0000gn/T/electron-packager/darwin-arm64/icns-darwin-arm64-Sy6Xw1/Electron.app/Contents/Resources/app/0.0.4
qiao-electron-cli / info / afterPack /  rmRes true
qiao-electron-cli / info / pack /  pack electron application success!

最终产物如下：

1. app文件夹下分为了一个asar文件和package.json文件

2. out/update下存放了这个asar的zip包，方便后续更新使用

【增量更新】

按上面的方式打好增量更新包后具体应该怎么实现呢，

封装了一个npm包， https://code.insistime.com/#/qiao-x-update

使用方式也比较简单：

updateApp(downloadUrl, appPath, appVersion);

【总结】

1. 介绍了electron应用架构和对应的文件结构

2. 介绍了对应文件的更新频次以及包大小

3. 推荐了精细化打包的方式

4. 介绍了使用qiao-electron-cli打包工具实现增量更新打包： https://qiao-electron-cli.vincentqiao.com/#/

5. 介绍了具体实现增量更新的包：https://code.insistime.com/#/qiao-x-update