Electron實現(xiàn)自定義全量更新的詳細教程

更新時間：2025年08月25日 09:48:37 作者：zooooooooy

本文主要介紹如何手動實現(xiàn)客戶端應用的自動全量更新,通過改造electron-updater實現(xiàn)版本,系統(tǒng)等字段的動態(tài)判斷更新,實現(xiàn)后臺配置不同設(shè)備,版本,系統(tǒng)的版本更新,可自行在后臺配置定向更新,批量更新等,需要的朋友可以參考下

1. 前言

本文主要介紹如何手動實現(xiàn)客戶端應用的自動全量更新，通過改造electron-updater實現(xiàn)版本，系統(tǒng)等字段的動態(tài)判斷更新。

實現(xiàn)后臺配置不同設(shè)備，版本，系統(tǒng)的版本更新，可自行在后臺配置定向更新，批量更新等。

2. 框架

采用electron-egg框架來進行的自動更新，一部分工作框架自帶，只需要進行相應的自動更新修改即可。

3. 后臺

3.1. 接口

匹配latest.yml的get請求，這個目前是必須的，具體的實現(xiàn)由后端代碼自行處理。

/**
     * 適配Electron的更新，使用Get方式請求
     */
    @GetMapping("ee/latest.yml", produces = ["application/json"])
    open fun eeLatest(appLatestRequest: AppLatestRequest): Any? {

        val appUpdate = appUpdateService.eeLatest(appLatestRequest)

        if(appUpdate == null) {
            return AppUpdateResponse(false)
        } else {
            return AppUpdateResponse(true, appUpdate.version, appUpdate.downloadUrl, appUpdate.sha512)
        }

    }

/**
     * APP更新接口
     * 優(yōu)先匹配單設(shè)備，在匹配全量的更新記錄
     */
    fun check(appUpdateRequest: AppUpdateRequest): AppUpdate? {
        // 查找有沒有直接設(shè)備匹配的更新記錄，如果沒有就查找所有
        var appUpdates = appUpdateMapper.selectListByQuery(
            QueryWrapper.create()
                .ge(AppUpdate::version, appUpdateRequest.version)
                .eq(AppUpdate::deviceId, appUpdateRequest.deviceId)
        )

        if(appUpdates.isEmpty()) {
            appUpdates = appUpdateMapper.selectListByQuery(
                QueryWrapper.create()
                    .ge(AppUpdate::version, appUpdateRequest.version)
                    .eq(AppUpdate::deviceId, "all")
            )

            return appUpdates.filter {
                if(!it.checkRule.isNullOrEmpty()) {
                    // 模板表達式匹配
                    return@filter AviatorEvaluator.compile(it.checkRule, true).execute(
                        BeanUtil.beanToMap(appUpdateRequest)
                    ) as Boolean
                }

                return@filter true
            }.firstOrNull()

        } else {

            return appUpdates.filter {
                if(!it.checkRule.isNullOrEmpty()) {
                    // 模板表達式匹配
                    return@filter AviatorEvaluator.compile(it.checkRule, true).execute(
                        BeanUtil.beanToMap(appUpdateRequest)
                    ) as Boolean
                }

                return@filter true
            }.firstOrNull()

        }
    }

3.2. 規(guī)則

下發(fā)的規(guī)則字段匹配可能會非常多，經(jīng)常變動。這個時候如果通過簡單的字段來匹配的話，需要擴充很多字段，需要手動匹配邏輯（大于某個版本，小于某個版本）來進行處理。采用aviator表達式引擎來進行表達式計算，返回表達式是true或者false來決定是否適配這一條配置。

AviatorEvaluator.compile(it.checkRule, true).execute(
                        BeanUtil.beanToMap(appUpdateRequest)
                    )

通過配置的校驗規(guī)則進行判斷是否可以下發(fā)，參數(shù)來源于請求參數(shù)。

3.3. 返回JSON定義

class AppUpdateResponse(
                val canDownload: Boolean? = null,
                val version : String? = null,
                val path : String? = null,
                val sha512 : String? = null) {

}

必須有version，path，sha512字段匹配，canDownload是后臺增加用戶判斷是否需要下載的判斷。

3.4. 更新表定義

-- auto-generated definition
create table t_app_update
(
    id           int auto_increment
        primary key,
    version      varchar(16)       null comment '版本號',
    device_id    varchar(64)       null comment '設(shè)備id',
    download_url varchar(255)      null comment '下載地址',
    sha512       varchar(256)      null comment '加簽值',
    check_rule   varchar(255)      null comment '校驗規(guī)則',
    platform     varchar(20)       null comment '平臺  windows mac  linux',
    open_flag    tinyint default 1 null comment '開啟標記 1- 開啟  0 -關(guān)閉',
    tentant_code varchar(16)       null comment '商戶號',
    add_time     datetime          null,
    update_time  datetime          null
)
    engine = InnoDB
    charset = utf8mb4;

3.5. downloadUrl

download_url需要放置到外網(wǎng)一個可以訪問的地址，用于后續(xù)進行下載。本項目采用minio對外提供文件下載地址。

4. 前臺

4.1. 更新配置

核心是關(guān)閉自動更新，手動配置feedUrl，讓請求到后臺更新接口上，返回對應的json配置信息

4.1.1. 強制測試版本更新

// 強制測試版本更新
    autoUpdater.forceDevUpdateConfig = true;

4.1.2. 關(guān)閉自動更新

autoUpdater.autoDownload = false;

4.1.3. 設(shè)置FeedUrl

const version = electronApp.getVersion();
Log.info('[addon:autoUpdater] current version: ', version);

// 設(shè)置下載服務器地址
let server = cfg.options.url;
let lastChar = server.substring(server.length - 1);
server = lastChar === '/' ? server : server + "/" + "?version=" + version + "&platform=" + Os.platform();
Log.info('[addon:autoUpdater] server: ', server);
cfg.options.url = server;
try {
  autoUpdater.setFeedURL(cfg.options);
} catch (error) {
  Log.error('[addon:autoUpdater] setFeedURL error : ', error);
}

4.2. 更新監(jiān)聽

需要用到electron和web中的ipc通信，互相進行消息傳遞。

web	node	app.checkUpdate 自動或者手動觸發(fā)更新
node		checkUpdate 通過調(diào)用feedUrl，檢查是否需要更新
node	web	update-available 有可用更新，通過web彈窗提示
node		app.downloadUpdate 開始更新
node	web	download-progress 更新進度，同步提示給web進行進度條展示
node		update-downloaded 下載完成，直接觸發(fā)系統(tǒng)級別的安裝

4.2.1. 更新狀態(tài)值

const status = {
      error: -1,
      available: 1,
      noAvailable: 2,
      downloading: 3,
      downloaded: 4,
    }

4.3. 彈窗提示

需要監(jiān)聽是否有更新和更新進度兩塊，這兩個合二為一。

ipc.on('app.updater', (event, info) => {
  const infoN = JSON.parse(info)
  console.log('app.updater', infoN)
  // 彈窗提示用戶進行更新
  if (infoN.status == 1) {
    // 改為確認框
    ElMessageBox.confirm('發(fā)現(xiàn)新版本，是否立即更新？', '更新提示', {
      confirmButtonText: '更新',
      cancelButtonText: '稍后更新',
      type: 'warning'
    }).then((res) => {
      // 用戶點擊了更新按鈕
      console.log('用戶點擊了更新按鈕', res)
      if (res === 'confirm') {
        ipc.invoke('app.downloadUpdate')
        openProgressDialog()
      }
    }).catch(() => {
      // 用戶點擊了稍后更新按鈕

    });
  } else if(infoN.status == 3) {
    updateProgress(infoN.percentNumber)
  }
})


<el-dialog
  v-model="showDialog"
  title="下載進度"
  :show-close="false"
  :close-on-click-modal="false"
  :close-on-press-escape="false"
  width="30%"
>
  <el-progress
    :percentage="percentNumber"
    :stroke-width="18"
    :text-inside="true"
  />
</el-dialog>