Electron自动更新

尹成诺

如果有一天皱纹终将爬上额头，那就不让它在心中留下痕迹

不同于 web 应用，直接在操作系统运行的 app 通常都需要有一套检查更新机制。在 app 打开后检查是否有新版本，下载完成后提醒用户安装，用户点击安装后进行安装。而我们使用的 electron-builder 配合使用 electron-updataer 甚至可以实现本次下载下次打开后更新的用户无感效果。

更新流程

electron-builder 构建结束后会生成一个 latest.yml 包含了打包后应用的版本等信息
将 latest.yml 及生成的安装包放在一个静态资源服务器上（如 http://a.b.c/publish）
项目启动后操作 electron-updataer 检查更新

latest.yml

version: 1.0.0 # 版本号
files:
  - url: 安装包_1.0.0.exe
    sha512: hew57+54SEAEpiQAhOZS8QJ83ArGsSACz2lKYh6dXGzeQjWMuh6hwkgACEDKFbEIGnwyKXMMDMTwOztZVqRtbg==
    size: 66301347
path: 安装包_1.0.0.exe # 安装包下载路径 改为 http 开头的链接路径也可以 
sha512: hew57+54SEAEpiQAhOZS8QJ83ArGsSACz2lKYh6dXGzeQjWMuh6hwkgACEDKFbEIGnwyKXMMDMTwOztZVqRtbg==
releaseDate: '2022-01-05T11:25:10.152Z'

示例代码

import IPC from './IPC'
import { BrowserWindow, ipcMain } from 'electron'
import { NsisUpdater, UpdateInfo } from 'electron-updater'
export default (window: BrowserWindow): void => {
  // 实例化 autoUpdater
  const autoUpdater = new NsisUpdater({
    provider: 'generic',
    url: 'https://7463-tcb-wvejp0kobnwg4yva44474-1164c4-1302828448.tcb.qcloud.la/electron'
  // 开始检查更新
  autoUpdater.on('checking-for-update', () => {
    window.webContents.send(IPC.UPDATA_CHECKING, {
      message: '开始检查更新'
  // 检查更新出错
  autoUpdater.on('error', () => {
    window.webContents.send(IPC.UPDATA_ERROR, {
      message: '检查更新出错'
  // 检查到新版本
  autoUpdater.on('update-available', (info: UpdateInfo) => {
    window.webContents.send(IPC.UPDATA_AVAILABLE, {
      message: `检查到新版本 v ${info.version}，开始下载`
  // 已经是新版本
  autoUpdater.on('update-not-available', (info: UpdateInfo) => {
    window.webContents.send(IPC.UPDATA_NOT_AVAILABLE, {
      message: `当前版本已经是最新 v ${info.version}`
  // 更新下载中
  autoUpdater.on('download-progress', (info: { percent: string }) => {
    window.webContents.send(IPC.UPDATA_DOWNLOAD_PROGRESS, {
      percent: info.percent
  // 更新下载完毕
  autoUpdater.on('update-downloaded', () => {
    window.webContents.send(IPC.UPDATA_DOWNLOADED, {
      message: '新版本下载完毕'
  // 立即更新
  ipcMain.handle(IPC.UPDATA_QUITANDINSTALL, () => {
    autoUpdater.quitAndInstall()
  autoUpdater.checkForUpdatesAndNotify()