Electron-Vite (三）软件自动更新

会豪
174 阅读4分钟

​

本章节主要讲解Electron应用在打包后，软件怎么进行自动更新

感兴趣的同学可以先看看我的前两个章节

Electron-Vite (一）快速构建桌面应用

Electron-Vite (二）自定义标题栏

首先讲一下我们的打包逻辑

  1. 在主进程中检测是否有新版本
  2. 如果没有新版本，则一切照旧，如果有新版本，则不要自动更新，先通知用户，让用户选择是否更新
  3. 用户选择了否，那我们停止更新逻辑
  4. 用户选择了是，那我们通知主进程开始进行更新

在Electron官网里面，讲解到了一个模块 autoUpdater

​

这个模块可以使应用程序自动更新，但只在打包环境有效

下面我们来讲解一下具体怎么使用

第一步：主进程编写更新逻辑

我们在主进程下面创建一个文件 update.ts

​

编写内容如下

import { autoUpdater } from 'electron-updater'
import { mainWindow } from '.'

export const softwareUpdate = (): void => {
  // 关闭自动下载
  autoUpdater.autoDownload = false
  // 检查是否有新版本
  autoUpdater.checkForUpdates()
  // 若有新版本，则先通知用户
  autoUpdater.on('update-available', (info) => {
    mainWindow.webContents.send('updateAvailable', info)
  })
}

然后将这个方法放入到index.ts里面

​

第二步：渲染进程通知用户

我们回到App.vue里面，内容改写如下

<template>
  <div>
    <button v-if="hasUpdate" @click="handleUpdate">是否更新</button>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

//是否有更新通知
const hasUpdate = ref(false)

onMounted(() => {
  window.electron.ipcRenderer.on('updateAvailable', () => {
    //若有通知，则表示有新版本
    hasUpdate.value = true
  })
})

const handleUpdate = (): void => {
  window.electron.ipcRenderer.send('startUpdate')
}
</script>

<style scoped></style>

第三步：主进程开始更新

我们回到主进程的monitorEvent.ts里面，增加一个监听方法

ipcMain.on('updateAvailable', (e) => {
    // 开始下载新版本
    autoUpdater.downloadUpdate()

    // 下载进度
    autoUpdater.on('download-progress', (progressObj) => {
      // 在这里可以向渲染进程发消息，说明当前的下载进度
    })

    // 下载完成后提示安装
    autoUpdater.on('update-downloaded', (info) => {
      autoUpdater.quitAndInstall()
    })

    // 错误处理
    autoUpdater.on('error', (err) => {
      console.log(err)
    })
  })

以上就是我们electron应用更新的整体逻辑了

那接下来我们看看在electron中，autoUpdater模块是怎么知道有新版本的

在 Electron 中，autoUpdater 模块本身并不主动 "发现" 新版本，它需要通过与开发者部署的更新服务器交互来检测新版本，核心流程基于 "客户端请求 - 服务器响应" 的模式。具体工作原理如下：

1. 依赖更新服务器和元数据文件

autoUpdater 的版本检测依赖于开发者提前在服务器上部署的更新元数据文件（包含最新版本信息）和更新包（如 .exe、.dmg 等安装包）。

不同平台的元数据文件格式不同：

  • Windows：通常使用 Squirrel 格式的 RELEASES 文件（文本格式，包含版本号、更新包哈希、下载地址等）。
  • macOS：使用 Sparkle 框架的 appcast.xml（XML 格式，包含版本信息、更新日志、签名等）。
  • Linux：需自定义更新逻辑（如通过 JSON 接口返回版本信息）。

2. 客户端配置更新源

开发者需要在 Electron 应用中，通过 autoUpdater.setFeedURL() 方法配置更新服务器的地址（即元数据文件的访问路径）。例如：

const { autoUpdater } = require('electron')

// 配置更新服务器地址（指向元数据文件，如 appcast.xml 或 RELEASES）
autoUpdater.setFeedURL({
  url: 'https://your-update-server.com/updates/', // 服务器基础路径
  // 其他参数（如协议、平台特定路径等）
})

3. 主动触发版本检查

autoUpdater 不会自动检查更新，需要开发者主动调用方法触发检查：

// 手动触发检查更新
autoUpdater.checkForUpdates()

调用后，autoUpdater 会向 setFeedURL 配置的地址发送请求，获取服务器上的元数据文件。

4. 版本对比逻辑

autoUpdater 拿到服务器返回的元数据后，会执行以下步骤：

  1. 解析元数据文件，提取最新版本号（如 1.2.0）。

  2. 获取当前应用的本地版本号（从 package.json 的 version 字段读取）。

  3. 按照语义化版本规则（SemVer）对比两个版本号：

    • 若服务器版本 > 本地版本 → 判定为 "有新版本"，触发 update-available 事件。
    • 若服务器版本 ≤ 本地版本 → 判定为 "无新版本"，触发 update-not-available 事件。

5. 后续流程（下载与安装）

如果检测到新版本，autoUpdater 会自动从元数据文件中提取更新包的下载地址，开始下载更新包，并通过 download-progress 事件反馈进度。下载完成后，触发 update-downloaded 事件，开发者可在此时提示用户重启应用完成更新。

​

avatar
文章
阅读
粉丝