Electron应用如何实现类似Discord的安装更新进度显示？

完全可以实现类似Discord的安装更新进度显示，借助Electron生态的更新工具（比如electron-updater）就能监听安装阶段的状态和进度，结合你已有的下载进度窗口快速适配。

• 核心实现思路
  利用electron-updater提供的事件监听机制，在更新下载完成后，捕获安装阶段的进度数据，通过IPC通信传递给渲染进程的窗口，更新UI展示。

• 关键代码示例
  主进程（处理更新逻辑）：

  const { autoUpdater } = require('electron-updater');
  const { ipcMain, BrowserWindow } = require('electron');
  
  // 假设你的进度窗口实例为updateWindow
  let updateWindow;
  
  // 监听安装进度事件
  autoUpdater.on('install-progress', (progressObj) => {
    // 向进度窗口发送安装进度百分比
    updateWindow.webContents.send('sync-install-progress', progressObj.percent);
  });
  
  // 下载完成后触发安装流程
  autoUpdater.on('update-downloaded', () => {
    // 通知窗口切换为安装状态
    updateWindow.webContents.send('update-ready');
    // 延迟执行安装，让用户看到状态切换
    setTimeout(() => {
      autoUpdater.quitAndInstall();
    }, 1200);
  });
  

  渲染进程（进度窗口UI更新）：

  const { ipcRenderer } = require('electron');
  
  // 监听安装进度更新
  ipcRenderer.on('sync-install-progress', (_, percent) => {
    document.querySelector('.progress-bar').style.width = `${Math.round(percent)}%`;
  });
  
  // 监听下载完成通知，切换状态文本
  ipcRenderer.on('update-ready', () => {
    document.querySelector('.status-text').textContent = '正在安装更新，请稍候...';
  });
  

• 平台适配注意事项

  • Windows：electron-updater会返回精确的安装百分比进度，可以直接用于进度条更新。
  • macOS：部分场景下安装由系统层面处理，无法获取精确百分比，此时可以替换为加载动画+“完成安装中”的文本提示。
  • Linux：根据不同包管理器的行为，可能需要类似macOS的处理方式，或者通过监听进程状态反馈进度。

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