参考文章:
- 手撸 Electron 自动更新,再繁琐也要搞懂它 - 掘金 (juejin.cn)
- Electron 自动更新,绕过 latest.yml 使用自定义接口 - 掘金 (juejin.cn)
- electron-updater实现热更新完整流程 - 掘金 (juejin.cn)
一、 配置
1. 安装electron-updater
npm install electron-updater
2. 配置electron-builder
修改electron-builder.json
,增加以下内容
"publish": [
{
"provider": "generic",
"url": "你的更新地址,可以是oss"
}
]
二、具体操作
1. 代码部分
在主进程文件夹创建update.ts
文件:
import { autoUpdater } from "electron-updater";
import { BrowserWindow, ipcMain, app } from 'electron'
import log from "electron-log" // 如果没有自己封装
import path from "path"
let mainWindow: BrowserWindow
// 封装更新相关的进程通信方法
const sendUpdateMessage = (opt: { cmd: string, data: any }) => {
mainWindow.webContents.send(opt.cmd, opt.data)
}
export const checkUpdate = (win: BrowserWindow) => {
mainWindow = win
// 关闭自动更新
autoUpdater.autoDownload = false
// 开启开发环境调试,后边会有说明
autoUpdater.forceDevUpdateConfig = true
// 日志记录设置
log.transports.file.level = "debug"
autoUpdater.logger = log
// 开发环境下的配置,详细参考后续说明
// 方法3:以下整个if都不需要
// if(!app.isPackaged){
// // 方法1: 项目根目录创建dev-update.yml
// autoUpdater.updateConfigPath = path.join(__dirname, "../dev-update.yml")
// // 方法2:
// autoUpdater.setFeedURL('http://127.0.0.1:5173/release')
// }
// 监听升级失败事件
autoUpdater.on("error", (error) => {
sendUpdateMessage({
cmd: 'update-error',
data: error
})
})
//监听发现可用更新事件
autoUpdater.on('update-available', (message) => {
sendUpdateMessage({
cmd: 'update-available',
data: message
})
})
//监听没有可用更新事件
autoUpdater.on('update-not-available', (message) => {
sendUpdateMessage({
cmd: 'update-not-available',
data: message
})
});
// 更新下载进度事件
autoUpdater.on('download-progress', (progressObj) => {
sendUpdateMessage({
cmd: 'download-progress',
data: progressObj
})
});
//监听下载完成事件
autoUpdater.on('update-downloaded',(releaseObj) => {
sendUpdateMessage({
cmd: 'update-downloaded',
data: releaseObj
})
//退出并安装更新包
autoUpdater.quitAndInstall()
});
//接收渲染进程消息,开始检查更新
ipcMain.on("check-update", (event) => {
//执行自动更新检查
console.log("检查更新")
autoUpdater.checkForUpdates()
})
// 触发更新
ipcMain.on("update-app",(event) => {
autoUpdater.downloadUpdate()
})
}
在main.ts
中配置如下:
...
import { checkUpdate } from './update'
...
const win = new BrowserWindow({
...
})
try {
checkUpdate(win)
} catch (error) {
logger.error(error)
}
我这里h5部分采用的vue,对应的使用如下:
<script lang="ts" setup>
// 百分比进度
const progress = ref("")
const init = () => {
// 这里对ipcRenderer进行了简单封装,参考ipc.ts
ipc.checkUpdate()
ipc.on("update-available",(event:any, msg:any)=>{
// 有更新
})
ipc.on("update-not-available",(event:any, msg:any)=>{
// 没有更新
})
ipc.on("download-progress",(event:any, msg:any)=>{
// 下载更新进度
progress.value = `${Math.ceil(msg.percent)}%`
})
ipc.on("update-downloaded",(event:any, msg:any)=>{
// 更新下载完成
})
ipc.on("update-error", (event:any, msg:any)=>{
// 更新失败
logger.log("update-error")
logger.log(msg)
})
}
const confrimUpdate = () => {
ipc.updateApp()
}
</script>
封装的ipc.ts
的部分内容:
/**
* 监听主进程通信
* @param title
* @param callback
*/
on(title: string, callback: Function){
ipcRenderer.on(title, callback)
}
// 软件更新相关
/**
* 检查更新
*/
checkUpdate = () => {
ipcRenderer.send('check-update')
}
/**
* 执行更新
*/
updateApp = () => {
ipcRenderer.send('update-app')
}
2. 打包
项目打包后会在指定的打包目录下(我这里是release文件夹)生成对应exe安装包和latest.yml文件,将这两个文件上传到最开始配置的url对应的路径内
三、关于开发环境下调试配置
一般情况下开发环境下直接调试会报错Skip checkForUpdates because application is not packed and dev update config is not forced
,包括参考文章在内的绝大部分文章关于这块的解决方案是将app.isPackaged
改为true
:
if (!app.isPackaged) {
Object.defineProperty(app, 'isPackaged', {
get: () => true,
});
}
这样确实可以做到开发环境中调试,但是可能会影响到其他地方的功能配置,可以在update.ts
中配置以下代码,并且不需要修改app.isPackaged
:
autoUpdater.forceDevUpdateConfig = true
以下为调试方法
方法1:
- 在根目录创建一个yml文件,名称自定义,这里我的是
dev-update.yml
,内容如下
provider: generic
updaterCacheDirName: dev-updater
url: "http://127.0.0.1:5173/release"
说明:updaterCacheDirName
定义下载目录,全路径是C:\Users\用户名\AppData\Local\dev-updater
,不配置则在C:\Users\用户名\AppData\Local
下自动创建文件夹,开发环境下为项目名
,生产环境下为项目名-updater
url
更新地址,指向latest.yml。不配置有时候会报错,最好配置上
- 上文
update.ts
文件中对应位置填写如下
autoUpdater.updateConfigPath = path.join(__dirname, "../dev-update.yml")
然后就可以正常调试了。
方法2:
复制latest.yml
到项目根目录,并改名为dev-app-update.yml
,
在update.ts
中使用以下处理:
// 设置检查更新的地址为本地打包生成的latest.yml所在文件夹
autoUpdater.setFeedURL('http://127.0.0.1:5173/release')
方法3:
项目根目录创建dev-app-update.yml
并填写以下内容,不需要使用autoUpdater.setFeedURL
也不需要配置autoUpdater.updateConfigPath
:文章来源:https://www.toymoban.com/news/detail-820769.html
provider: generic
updaterCacheDirName: dev-updater
url: "http://127.0.0.1:5173/release"
以上方法中也可以设置为http://127.0.0.1:5173
,即项目根目录,此时需要将latest.yml和打包生成的exe文件复制到根目录,这里如果不复制exe文件会报404错误文章来源地址https://www.toymoban.com/news/detail-820769.html
到了这里,关于electron-updater使用整理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!