Electron electron-updater 实现自动更新

预览图

实现

基于electron-vite项目vue3 ts版本

main/update.ts

import { autoUpdater } from 'electron-updater'
import { BrowserWindow, ipcMain } from 'electron'

let mainWindow: BrowserWindow
// 封装更新相关的进程通信方法
const sendUpdateMessage = (opt: { cmd: string; data: any }) => {
  console.log('🚢 ~ 主进程检测更新 ~ opt.cmd:', opt.cmd)
  mainWindow.webContents.send(opt.cmd, opt.data)
}
export const checkUpdate = (win: BrowserWindow) => {
  mainWindow = win
  // 是否自动下载更新
  autoUpdater.autoDownload = false
  // 开启开发环境调试，后边会有说明
  autoUpdater.forceDevUpdateConfig = true

  // 监听升级失败事件
  autoUpdater.on('error', (error) => {
    console.log('🚢 ~ 主进程检测更新 ~ 监听升级失败事件:', error)
    sendUpdateMessage({
      cmd: 'update-error',
      data: error
    })
  })

  // 监听发现可用更新事件
  autoUpdater.on('update-available', (message) => {
    console.log('🚢 ~ 主进程检测更新 ~ 监听发现可用更新事件:', message)
    sendUpdateMessage({
      cmd: 'update-available',
      data: message
    })
  })

  // 监听没有可用更新事件
  autoUpdater.on('update-not-available', (message) => {
    console.log('🚢 ~ 主进程检测更新 ~ 监听没有可用更新事件:', message)
    sendUpdateMessage({
      cmd: 'update-not-available',
      data: message
    })
  })

  // 更新下载进度事件
  autoUpdater.on('download-progress', (progressObj) => {
    console.log('🚢 ~ 主进程检测更新 ~ 更新下载进度事件:', progressObj)
    sendUpdateMessage({
      cmd: 'download-progress',
      data: progressObj
    })
  })

  // 监听下载完成事件
  autoUpdater.on('update-downloaded', (releaseObj) => {
    console.log('🚢 ~ 主进程检测更新 ~ 监听下载完成事件:', releaseObj)
    sendUpdateMessage({
      cmd: 'update-downloaded',
      data: releaseObj
    })
    // 退出并安装更新包
    autoUpdater.quitAndInstall()
  })

  // 接收渲染进程消息，开始检查更新
  ipcMain.on('check-update', (event) => {
    // 执行自动更新检查
    console.log('检查更新')
    autoUpdater.checkForUpdates()
  })

  // 触发更新
  ipcMain.on('update-app', (event) => {
    console.log('触发更新')
    autoUpdater.downloadUpdate()
  })
}

程序主界面

    <el-dialog
      v-model="centerDialogVisible"
      title="更新中"
      width="500"
      :showClose="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      center
      align-center
    >
      <div style="text-align: center">{{ `下载进度 ${progress}` }}</div>
    </el-dialog>

onMounted(async () => {
  init()
})

const centerDialogVisible = ref(false)

// 百分比进度
const progress = ref('')
const ipc = window.electron.ipcRenderer
const init = () => {
  // 检查更新
  ipc.send('check-update')

  ipc.on('update-available', (event: any, msg: any) => {
    // 有更新
    console.log('🚢 ~ 渲染进程检测更新 ~ 有更新:', msg)
    confrimUpdate()
    centerDialogVisible.value = true
  })
  ipc.on('update-not-available', (event: any, msg: any) => {
    // 没有更新
    console.log('🚢 ~ 渲染进程检测更新 ~ 没有更新:', msg)
  })
  ipc.on('download-progress', (event: any, msg: any) => {
    // 下载更新进度
    progress.value = `${Math.ceil(msg.percent)}%`
  })
  ipc.on('update-downloaded', (event: any, msg: any) => {
    // 更新下载完成
    console.log('🚢 ~ 渲染进程检测更新 ~ 更新下载完成:', msg)
  })
  ipc.on('update-error', (event: any, msg: any) => {
    // 更新失败

    console.log('update-error')
    console.log('更新失败', msg)
  })
}
// 确定更新
const confrimUpdate = () => {
  ipc.send('update-app')
}

开发环境中测试

1. 打包一个大于当前版本的包

2. 新建一个文件夹 mockServer 把打包好的安装包与 latest.yml 放到文件夹里面

3. 使用 vscode 插件 Live Server 启动这个文件夹

4. dev-app-update.yml 配置更新地址

5. 再把版本号改回去运行即可

最好是把放到同事的电脑上，放在本机下载速度太快看不到下载进度

参考：

我的 Electron 客户端也可以全量/增量更新了

juejin.cn/post/741631…

electron-updater使用整理

juejin.cn/post/732697…