Electron 應用自動更新方案：electron-updater 完整指南

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 環境準備與安裝

確保項目已安裝必要的依賴：

# 在項目根目錄執行
npm install --save-dev electron-builder
npm install --save electron-updater

4.2 配置更新服務器

在 package.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）中實現更新檢測與處理邏輯：

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 通信：

主進程添加事件監聽：

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

// 監聽渲染進程的更新請求
ipcMain.on('trigger-update', (event) => {
  setupAutoUpdater(); // 調用更新函數
});

渲染進程發送事件：

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

// 為更新按鈕添加點擊事件
document.getElementById('update-button').addEventListener('click', () => {
  ipcRenderer.send('trigger-update');
});

4.5 應用構建與分發

使用 electron-builder 打包應用并發布到更新服務器：

# 構建應用并自動發布
electron-builder build --publish always

構建完成后，將生成的文件（包括 latest.yml 等元數據文件和可執行文件）上傳到配置的更新服務器。

當執行命令：electron-builder build -p always

1、自動生成版本元數據文件：

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

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

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/）

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 應用實現完整的自動更新功能，為用戶提供無縫的升級體驗。

posted @ 2025-10-25 16:23 老李說技術閱讀(69) 評論(0) 收藏舉報

刷新頁面返回頂部