electron-updater更新程式接入

阿新 • • 發佈：2022-01-18

electron更新程式接入需要注意每個外掛的版本，不然會遇到各種各樣的問題；

我使用各個外掛的版本：

"electron-builder": "^21.0.0",
 "electron-updater": "^3.0.0",
“node”: '^16.13.2',
"vue-cli-plugin-electron-builder": "^2.1.1"

這裡用了electron-updater中的autoUpdater API做的軟體更新程式；

官網地址：https://www.electron.build/auto-update

先說一下大致思路：

軟體更新，需要有一個存放新版本安裝包的服務；我採用的是用node的一個外掛（http-server）啟動本地服務；

先在pakage.json中修改version版本，修改一個比較高的版本打包後放到靜態服務內；用於在本地測試，檢查到有新的安裝包，網下執行更新程式；

接下來寫更新程式：

引入autoupdater模組：

import { autoUpdater } from 'electron-updater';

設定安裝包所在服務地址：

// 設定伺服器更新地址
    autoUpdater.setFeedURL({
      provider: 'generic',
      url: http:// 192.xxx.xxx:8080
    });

設定退出時是否自動更新

 // 退出時是否自動更新 預設為true 

    autoUpdater.autoInstallOnAppQuit = false;

設定是否自動更新，自動更新也就是下載好安裝包後自動觸發更新；根據自己的需求設定手否自動更新，這裡設定自動更新後，就不能再手動呼叫更新了

 // 是否自動更新 不設定electron-updater 預設為true  手動觸發更新要設定為false
    autoUpdater.autoDownload = false

寫一個檢測的方法；剛進入程式時呼叫一次；然後設定一個定時器，連續檢查

// 檢查更新
  inspect() {
    autoUpdater.checkForUpdates();
  }

設定定時器用到了node-schedule外掛

const schedule = require('node-schedule')
// 每隔30分鐘檢測以此 （用於正式環境）
    // schedule.scheduleJob('0 30 * * * *', () => this.inspect);
// 每隔5秒執行一次（用於本地測試）
    schedule.scheduleJob('*/5 * * * * *', this.inspect);

監聽autoupdater的幾個回到事件

// 失敗、錯誤收集
    autoUpdater.on('error', (e) => {
      // do some
    });
    // 在檢查更新是否已啟動時觸發。
    autoUpdater.on('checking-for-update', (e) => {
       // do some
    });
    // 檢測到更新可用
    autoUpdater.on('update-available', (e) => {
       // do some
    });
    // 已經是最新版
    autoUpdater.on('update-not-available', (e) => {
       // do some
    });
    // 更新下載進度事件
    autoUpdater.on('download-progress', (e) => {
      // do some
        有進度資訊
    });
    // 更新下載完成事件
    autoUpdater.on('update-downloaded', (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) => {
       // do some  會返回有版本等資訊
    });

觸發下載安裝包：

try {
      // 每次觸發下載更新包時，會在快取目錄裡存下安裝包和一個update-info.json；
      // 如果觸發了下載而沒安裝時，下次再次觸發下載，就會報錯，所以這裡在每次檢查時清空一下安裝包的快取目錄
      const updateCacheDirPath = path.join(autoUpdater.downloadedUpdateHelper.cacheDir);
      fs.emptyDir(updateCacheDirPath); // require('fs-extra')
      autoUpdater.downloadUpdate().then(() => {
        // 下載成功回撥
      }).catch(e => 
        // 下載失敗回撥
      )
    } catch(e) {
      // do some
    }

手動觸發重新啟動安裝軟體

try {
        autoUpdater.quitAndInstall()
      } catch(e) {
       // do some
      }

取消軟體下載

autoUpdater.updateCancelled()

有以上的api就可以做一個自動更新程式了

注意：最好不要再配置檔案裡配置軟體安裝包的服務地址，

// 新增版本資訊latest.yml，便於自動更新
        publish: [
          {
            provider: 'generic',
            url: '' // 更新包地址 不建議在這裡填寫  在主程序通過api填寫
          }
        ],

做的過程中走了不少彎路，主要electron-builder和electron-updater版本引起的

在本地遇到過：找不到dev-app-aupdater.yml、provider，主要是版本不一致，設定的軟體安裝包服務地址沒生效引起的

最後執行安裝時，本地環境是不能成功執行的，必須是打包環境才能安裝，如果在開發環境做到了安裝這一步，就可以打包測試了；

說下我做的大致流程：

檢測到有新版本更新，觸發下載；讀取到進度條；下載完成後，手動觸發安裝；