Electron开发的应用利用github维护版本并自动升级

技术选型：

1、electron：21.3.3

2、electron-vite：1.0.17

3、vue：3.2.45

4、element-plus：2.2.32

背景：

我们写了软件，不可避免的需要进行更新升级，现在流行的是软件自动更新升级，就像我们的Windows一样，动不动就会提示我们需要升级并重启，那么这个怎么做呢？

对于使用electron开发的软件来说，自动升级非常简单，只需要安装对于的自动升级模块就能支持，关键的是升级包放在什么位置呢？互联网给我们提供了变量，尤其是GitHub，不仅仅是一个代码仓库，也可以管理版本包，我们就利用这个特性，来实现electron软件的自动更新升级

版本包发布

既然要GitHub管理版本包，那么首先就要把相关的版本包发布到GitHub上面去。

1、GitHub创建token：

网上有很多GitHub创建token的内容，这里就不再赘述了。

2、package.json修改

package.json的"scripts": {}新增如下内容：

"release": "npm run build && electron-builder --win --config --publish always",

3、electron-builder.yml修改

修改默认的publish配置：

publish:
  provider: github
  owner: 'NexNoSQL'
  repo: 'NexNoSQLClient'
  token: 'xxx' 
  releaseType: 'release' 

"owner": "***", //仓库所有者

"repo": "***", //仓库名称

"releaseType": "release"

"token": "***", //github的token

4、环境变量配置token：

另外也可以不在electron-builder.yml里面写死token的配置，把这个配置项配置到环境变量里面：配置项的key:GH_TOKEN

5、执行命令：npm run release

执行命令：npm run release 发布版本到GitHub

[====================] 100% 0.0s | NexNoSQL-Client-1.0.0-setup.exe to github

6、通过GitHub仓库的release就能查看到我们发布的版本

 

自动升级

有个版本包以后，当我们要发布2.0.0版本的时候，如果想要electron应用自动升级，只需要简单的一步即可：

1、src/main/index.js

在index.js里面引入autoUpdater，并在app.whenReady().then里面增加一行代码即可，这样就可以实现自动升级了，有新版本之后它就会自动下载，然后当我们关闭软件下次再打开的时候，就会自动升级了。

const {autoUpdater} = require("electron-updater");

app.whenReady().then(() => {
    autoUpdater.checkForUpdatesAndNotify();
}

2、更精细化操作

在步骤一完全是不可控的自动升级，还可以在src/main/index.js增加如下事件的响应，通过与渲染进程进行交互，由用户决定是否下载和是否更新：

function sendStatusToWindow(text) {
    console.log('text=' + text);
}
  
  autoUpdater.on('checking-for-update', () => {
    sendStatusToWindow('Checking for update...');
  })
  
  autoUpdater.on('update-available', (info) => {
    sendStatusToWindow('Update available.');
  })
  
  autoUpdater.on('update-not-available', (info) => {
    sendStatusToWindow('Update not available.');
  })
  
  autoUpdater.on('error', (err) => {
    sendStatusToWindow('Error in auto-updater. ' + err);
  })
  
  autoUpdater.on('download-progress', (progressObj) => {
    let log_message = "Download speed: " + progressObj.bytesPerSecond;
    log_message = log_message + ' - Downloaded ' + progressObj.percent + '%';
    log_message = log_message + ' (' + progressObj.transferred + "/" + progressObj.total + ')';
    sendStatusToWindow(log_message);
  })
  
  autoUpdater.on('update-downloaded', (info) => {
    sendStatusToWindow('Update downloaded');
  });

3、打个2.0.0的包，测试一下吧