16 Electron 应用自动更新方案：electron-updater 完整指南

系列文章目录

1、环境与项目初始化（Electron）
2、主进程与渲染进程（Electron）
3、预加载与安全模型（Electron）
4、窗口与生命周期（Electron）
5、IPC 通信（Electron）
6、菜单、快捷键、托盘（Electron）
7、文件系统相关api以及基础的文件操作
 8、文件系统使用场景（Electron）
9、打包与发布（electron-builder）
10、代码签名详解（Electron）
12、electron专题（electron-builder）
13、Electron 专题（entitlements 配置）
14、Electron 专题（macOS 代码签名）
15、Electron专题：使用 electron-store 进行本地数据存储

1. 概述

electron-updater 是 Electron 社区广泛采用的自动更新解决方案，通常与 electron-builder 配合使用。该库封装了跨平台的更新逻辑（支持 macOS、Windows、Linux），并通过事件回调机制让主进程能够在不同更新阶段向用户提供反馈或自动执行安装操作。

核心特性：

提供完整的更新流程 API（autoUpdater），包括检查更新、下载更新、提示安装等功能
支持多种发布方式：GitHub Releases、通用静态服务器、自建更新服务等
与 electron-builder 的 publish 配置无缝集成，自动生成更新元数据（如 latest.yml、RELEASES 等文件）

适用场景：需要自动分发新版本并降低用户升级成本的桌面应用程序。

2. 工作原理

检查更新 ：应用在启动或用户触发时调用 checkForUpdates() 或 checkForUpdatesAndNotify()
版本比对 ：electron-updater 向发布服务器请求元数据文件（如 latest.yml），与本地版本进行比对
下载更新：如果发现远程版本更高，则开始下载更新包（支持差分更新或完整包下载，取决于发布配置）
安装准备 ：下载完成后触发 update-downloaded 事件，可在适当时机调用 autoUpdater.quitAndInstall() 完成安装（支持立即重启或下次启动时安装）

3. 平台与打包器支持

Windows：NSIS、Squirrel（Squirrel 正逐步被 NSIS 等其他方案替代）
macOS：dmg、zip、mas（上架 Mac App Store 需要特殊处理）
Linux：AppImage、deb 等格式（支持程度取决于目标格式）

推荐组合：使用 electron-builder 构建安装包并生成更新元数据，electron-updater 负责运行时的更新检查和下载安装。

4. 完整配置流程

4.1 环境准备与安装

确保项目已安装必要的依赖：

bash 复制代码

# 在项目根目录执行
npm install --save-dev electron-builder
npm install --save electron-updater

4.2 配置更新服务器

在 package.json 中配置更新服务器的地址：

json 复制代码

{
  "build": {
    "publish": [{
      "provider": "generic",
      "url": "http://your-update-server.com/updates"  // 替换为实际的更新服务器地址
    }]
  }
}

在 electron-updater 中，publish 配置是连接应用与更新服务器的桥梁，其核心意义体现在：

指定更新文件的存储位置（URL），使 electron-updater 能精确获取元数据文件（如 latest.yml）和安装包。
替代 Electron 原生 autoUpdater 的碎片化实现，提供跨平台统一的更新接口（支持 Windows/macOS/Linux）

4.3 主进程更新逻辑实现

在 Electron 的主进程文件（如 main.js）中实现更新检测与处理逻辑：

javascript 复制代码

const { autoUpdater } = require('electron-updater');

// 在窗口创建后调用更新检测
function createWindow() {
  mainWindow = new BrowserWindow({ /* 窗口配置 */ });
  setupAutoUpdater(); // 初始化自动更新
}

function setupAutoUpdater() {
  // 自动检查更新并通知用户
  autoUpdater.checkForUpdatesAndNotify();
  
  // 监听更新可用事件
  autoUpdater.on('update-available', () => {
    mainWindow.webContents.send('update-status', '检测到新版本，正在下载...');
  });
  
  // 监听更新下载完成事件
  autoUpdater.on('update-downloaded', () => {
    mainWindow.webContents.send('update-status', '更新下载完成，准备安装');
    // 退出应用并安装更新
    autoUpdater.quitAndInstall();
  });
}

这段代码在应用窗口创建后自动启动更新检查，并通过事件机制向渲染进程发送更新状态信息。

4.4 渲染进程通信集成

如需在渲染进程中触发更新或显示更新状态，需要设置 IPC 通信：

主进程添加事件监听：

javascript 复制代码

// main.js
const { ipcMain } = require('electron');

// 监听渲染进程的更新请求
ipcMain.on('trigger-update', (event) => {
  setupAutoUpdater(); // 调用更新函数
});

渲染进程发送事件：

javascript 复制代码

// 在 Vue 组件或普通 HTML 页面中
const { ipcRenderer } = require('electron');

// 为更新按钮添加点击事件
document.getElementById('update-button').addEventListener('click', () => {
  ipcRenderer.send('trigger-update');
});

4.5 应用构建与分发

使用 electron-builder 打包应用并发布到更新服务器：

bash 复制代码

# 构建应用并自动发布
electron-builder build --publish always

构建完成后，将生成的文件（包括 latest.yml 等元数据文件和可执行文件）上传到配置的更新服务器。

当执行命令：electron-builder build -p always

1、自动生成版本元数据文件：

latest.yml → 通用版本描述
latest-mac.yml → macOS 专用
.blockmap → 增量更新支持文件

2、文件内容示例（latest.yml）

javascript 复制代码

version: 2.1.0
files:
  - url: YourApp-Setup-2.1.0.exe
    size: 58451392
    sha512: xZYfE...  # 文件哈希值
path: YourApp-Setup-2.1.0.exe
sha512: xZYfE...
releaseDate: '2024-06-15T12:00:00.000Z'

3、需要手动/CICD，上传到文件服务器：（示例：https://your-server.com/updates/）

javascript 复制代码

https://your-server.com/updates/
├── latest.yml              # 核心元数据
├── latest-mac.yml
├── YourApp-Setup-2.1.0.exe # 安装包
└── YourApp-2.1.0.dmg

4.6 更新功能测试

测试自动更新功能时，可按照以下步骤：

运行旧版本应用
确保应用能正确检测到服务器上的新版本
验证下载和安装流程是否正常

调试技巧：在开发阶段，可通过 autoUpdater.logger = console 启用详细日志输出，便于排查问题。

通过以上步骤，您可以为 Electron 应用实现完整的自动更新功能，为用户提供无缝的升级体验。

关于本专栏

本专栏的所有内容和代码，github地址：https://github.com/techLaoLi/electron-tutorial

关于作者，前大厂技术专家，现大前端技术负责人，公众号：老李说技术。欢迎大家的关注。