Electron打包（二）——版本自动更新流程

参考官方文档auto-update

环境：

• node:16.13.0
• electron: 11.3.0
• electron-builder: 22.10.5
• electron-updater: 4.3.9

electron应用自动更新具体实现流程图

electron-updater自动更新过程.png

1.配置publish

（1）在package.json文件的build中配置自定义服务器：

"build": {
    "publish": [
      {
        "provider": "generic",
        "url": "http://your-domain.com/update"
      }
    ],
}

2.配置更新服务器

（1）如何让客户端知道需要更新？
把electron-builder打包生成的latest.yml、xxx.exe文件、xxx.exe.blockmap文件，放到服务端即可触发自动化检测。

（2）如何触发版本更新？
修改package.json内的version，当服务端的version高于客户端时，便会触发自动化更新。

3.添加插件依赖

安装：npm install electron-updater
引入：import { autoUpdater } from 'electron-updater'

步骤1：进入程序页面给主进程发信息请求版本检测，主进程electron-updater接受信息后处理版本检测。

（1）渲染进程

// 渲染进程：主动触发版本检测事件
this.$ipcApi.send("check-update");

（2）主进程

// 主进程：执行更新版本检查
ipcMain.handle('check-update', () => {
    // 询问服务器是否有更新
    autoUpdater.checkForUpdates().catch(err => {
        console.log('网络连接问题', err)
    })
})

4.autoUpdater操作：

步骤2：通过自定义通道和 autoUpdater 提供的通道监听时机check for update、download progress等，给渲染进城发消息，最终重启安装即可。

// 存在新版本时，默认自动下载更新
autoUpdater.autoDownload = false // 若想通过渲染进程手动触发，需要设置autoDownload为false
// 当更新发生错误的时候触发
autoUpdater.on('error', (err) => {})
// 当开始检查更新的时候触发
autoUpdater.on('checking-for-update', (event, arg) => {}) // 通知渲染进程，此时开始检测版本
// 发现可更新版本时触发
autoUpdater.on('update-available', (info) => {}) // 发现可更新版本-弹层询问渲染进程是否需要“立即更新”
// 没有可更新版本时触发
autoUpdater.on('update-not-available', (info) => {}) // 通知渲染进程，没有检测到新版本
// 发现可更新版本后-用户操作“立即更新”，此时触发开始下载更新
autoUpdater.downloadUpdate().then((path)=>{})
// 下载监听-下载进度数据(0-100%)
autoUpdater.on('download-progress', (progressObj) => {}) //通知渲染进程，下载进度条界面UI展示
// 更新包下载完成时触发
autoUpdater.on('update-downloaded', () => {}) // 用于通知渲染进程下载完成-弹层询问是否立刻重启并安装
// 执行 重启应用程序并下载后安装更新（只能在update-downloaded发出后调用）
autoUpdater.quitAndInstall()

关键步骤示例：

（1）发现可更新版本时触发
autoUpdater.on('update-available', (info) => {})
发现可更新版本-弹层询问渲染进程是否需要“立即更新”

发现新版本.jpg

（2）下载监听-下载进度数据(0-100%)
autoUpdater.on('download-progress', (progressObj) => {})
通知渲染进程，下载进度条界面UI展示

新版本下载中.jpg

（3）更新包下载完成时触发
autoUpdater.on('update-downloaded', () => {})
通知渲染进程下载完成-弹层询问是否立刻重启并安装

是否立即重启.jpg

5.electron-log日志调试

记录任务执行日志并保存到本地，将自动更新功能的检测、下载、更新等流程日志全部存储起来，方便进行排错。

日志存放位置：%USERPROFILE%\AppData\Roaming\{app name}\logs\{process type}.log

安装：npm install electron-log
使用：

const log = require('electron-log');
log.info('Hello, log');
log.warn('Some problem appears');

log日志本地调试.jpg

6.开发环境-本地调试检测新版本

目的：为了在不打包应用程序的情况下开发、测试更新流程的UI及交互。
（1）根目录创建dev-app-update.yml文件
配置版本检测地址：

provider: generic,
url: "http://your-domain.com/update"

（2）在版本更新检测的js文件中配置：

// 防止报错no such file or directory dev-app-update.yml
const isDevelopment = process.env.NODE_ENV === 'development'
if (isDevelopment) {
    autoUpdater.updateConfigPath = path.join(__dirname, '../../../dev-app-update.yml')
}

版本检测-本地调试.png

7.注意问题

（1）想让用户可以手动下载更新应用程序
只需禁用自动下载：autoUpdater.autoDownload = false

（2）electron-updater有bug，在本地调试时会取electron的版本，所以需要手动app的版本

if (process.env.NODE_ENV === 'development') {
    autoUpdater.currentVersion = require('../../../config').appVersion
}