1、现有electron项目基础上安装electron-updater

  // 我的版本为 ^4.3.5
  npm install electron-updater

2、监听和触发更新钩子

主进程

// @/__main/updater.js
import { autoUpdater } from 'electron-updater'
import { ipcMain } from 'electron'
import Events from '@/ipcEvents' // Events 为ipc通信的事件名称，可自定义

ipcMain.on(Events.checkUpdate, () => {
  // 开始检查更新
  autoUpdater.checkForUpdates()
})

ipcMain.on(Events.downLoadUpdate, () => {
  // 开始下载更新
  autoUpdater.downloadUpdate()
})

export function listenUpdater(mainWindow, feedUrl) {
  autoUpdater.autoDownload = false  // 手动指定下载
  autoUpdater.setFeedURL(feedUrl)   // 更新包的地址，如 https://xxx.com/app/

  autoUpdater.on('error', function(error) {
    mainWindow.webContents.send(Events.checkUpdateError, JSON.stringify(error))
  })

  // 检查更新中
  autoUpdater.on('checking-for-update', function() {
    mainWindow.webContents.send(Events.checkingUpdate)
  })

  // 检测到有新版本更新
  autoUpdater.on('update-available', function(info) {
    mainWindow.webContents.send(Events.updateAvailable, info)
  })

  // 暂无新版本可更新
  autoUpdater.on('update-not-available', function(info) {
    mainWindow.webContents.send(Events.updateNotAvailable, info)
  })

  // 更新下载进度事件
  autoUpdater.on('download-progress', function(progressObj) {
    mainWindow.webContents.send(Events.updateDownloading, progressObj)
  })

  // 下载完成,退出且重新安装
  autoUpdater.on('update-downloaded', function() {
    mainWindow.webContents.send(Events.updateDownloaded)
    autoUpdater.quitAndInstall()
  })
}

// electron入口,一般为main.js、background.js等
import { listenUpdater } from '@/__main/updater'
import { UPDATE_URL } from '@/common/config'

function createWindow() {
  const win = new BrowserWindow({...})
  // 监听应用更新
  listenUpdater(win, UPDATE_URL) // UPDATE_URL为更新包的地址，如 https://xxx.com/app/
}

渲染进程(视图)

const electron = window.require('electron')
import Events from '@/ipcEvents'

function checkUpdate() {
  // 开始检查更新
  electron.ipcRenderer.send(Events.checkUpdate)
}

function download() {
  // 开始下载
  electron.ipcRenderer.send(Events.downLoadUpdate)
}

function updateListener() {
  // 监听主进程下载动作
  
  electron.ipcRenderer.on(Events.updateAvailable, () => {
    // 有新版本,提示用户开始更新
    download()
  })
  
  electron.ipcRenderer.on(Events.updateDownloading, (event, data) => {
    // 下载中,提示用户下载进度，下载完成后会自动退出并重新安装
    // ...
  })
}

checkUpdate()

配置

在package.json 指定 version,以及build的publish属性 用于生成 latest.yml文件(通过对比此文件中版本信息来决定是否有新版本更新)

// package.json
{
  "version": "0.0.1",
  "build": {
    "provider": "generic",
    "url": "https://xxx.com/app/" // 更新服务器地址
  }
}

本地开发环境注意事项

注意，在本地开发环境下，如需测试更新，需在 /dist_electron文件下配置 dev-app-update.yml文件且有updaterCacheDirName字段，否则会报错

// /dist_electron/dev-app-update.yml
updaterCacheDirName: ''

配置完成后就可在本地测试自动更新功能了