Electron.js实现带进度条的Auto Update功能相关问题咨询

进度条无法同步更新的核心原因是未正确监听更新下载事件、未完成主进程到渲染进程的进度数据传递，可按以下步骤排查修复：

1. 主进程配置事件监听 #

首先在主进程的自动更新逻辑中，开启下载进度监听，并通过IPC通道把进度数据发送给渲染进程：

// 主进程代码
const { autoUpdater } = require('electron-updater')
const { ipcMain, BrowserWindow } = require('electron')

let mainWindow = new BrowserWindow({
  // 你的窗口配置
})

// 自动更新基础配置
autoUpdater.autoDownload = true // 自动下载更新，设为false时需手动调用downloadUpdate()触发下载
autoUpdater.allowPrerelease = false // 按业务需求调整是否允许预览版更新

// 监听下载进度事件
autoUpdater.on('download-progress', (progressObj) => {
  // 发送消息前校验窗口状态，避免报错
  if (mainWindow && !mainWindow.isDestroyed()) {
    mainWindow.webContents.send('update-progress', {
      percent: progressObj.percent, // 进度百分比，范围0-100
      transferred: progressObj.transferred, // 已下载字节数
      total: progressObj.total // 安装包总字节数
    })
  }
})

// 可选：监听下载完成事件
autoUpdater.on('update-downloaded', () => {
  if (mainWindow && !mainWindow.isDestroyed()) {
    mainWindow.webContents.send('update-downloaded')
  }
})

2. 渲染进程同步更新UI #

在渲染进程中监听主进程发送的IPC消息，拿到进度数据后直接更新进度条UI即可：

// 渲染进程代码，原生JS/框架场景都适用
const { ipcRenderer } = require('electron')

// 监听更新进度
ipcRenderer.on('update-progress', (event, progressData) => {
  // 示例：更新进度条样式
  const progressBar = document.getElementById('update-progress-bar')
  progressBar.style.width = `${progressData.percent}%`
  // 示例：更新进度文本
  document.getElementById('progress-tip').innerText = `更新中：${Math.round(progressData.percent)}%`
})

// 可选：监听下载完成事件，提示用户重启
ipcRenderer.on('update-downloaded', () => {
  if(confirm('更新包已下载完成，是否立即重启应用？')) {
    autoUpdater.quitAndInstall()
  }
})

常见问题排查 #

• 确认你使用的是electron-builder配套的electron-updater包，Electron原生自带的autoUpdater没有download-progress事件，无法获取下载进度
• 如果设置了autoUpdater.autoDownload = false，需要在update-available事件触发后手动调用autoUpdater.downloadUpdate()才会启动下载，触发进度回调

内容的提问来源于stack exchange，提问作者Narottam Basnet