参考官方文档auto-update
环境:
- node:16.13.0
- electron: 11.3.0
- electron-builder: 22.10.5
- electron-updater: 4.3.9
electron应用自动更新具体实现流程图
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) => {})
发现可更新版本-弹层询问渲染进程是否需要“立即更新”
(2)下载监听-下载进度数据(0-100%)
autoUpdater.on('download-progress', (progressObj) => {})
通知渲染进程,下载进度条界面UI展示
(3)更新包下载完成时触发
autoUpdater.on('update-downloaded', () => {})
通知渲染进程下载完成-弹层询问是否立刻重启并安装
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');
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')
}
7.注意问题
(1)想让用户可以手动下载更新应用程序
只需禁用自动下载:autoUpdater.autoDownload = false
(2)electron-updater有bug,在本地调试时会取electron的版本,所以需要手动app的版本
if (process.env.NODE_ENV === 'development') {
autoUpdater.currentVersion = require('../../../config').appVersion
}