electron-updater Usage

1.安装插件

# electron-updater 6.1.4
yarn add electron-updater

2.代码源码

$ /electron/updater.ts

import { autoUpdater } from 'electron-updater'
import { app, BrowserWindow, ipcMain } from 'electron'

// be same /electron-builder.json - publish - url
const uploadUrl = 'http://192.168.101.112:8080/electrons/'

const message = {
  checking: '正在检查更新...',
  error: '检查更新出错',
  updateAva: '检测到新版本，正在下载...',
  updateNotAva: '当前版本为最新版本'
}

const transfer = (text: string, mainWin: BrowserWindow) => {
  mainWin.webContents.send('update', text)
}

export const createAutoUpdater = (
  mainWin: BrowserWindow,
  download: string = uploadUrl
) => {
  autoUpdater.setFeedURL({
    url: download,
    provider: 'generic'
  })

  // Cancel automatic download
  autoUpdater.autoDownload = false

  autoUpdater.on('error', () => {
    transfer(message.error, mainWin)
  })

  autoUpdater.on('checking-for-update', () => {
    transfer(message.checking, mainWin)
  })

  autoUpdater.on('update-available', () => {
    transfer(message.updateAva, mainWin)
  })

  autoUpdater.on('update-not-available', () => {
    transfer(message.updateNotAva, mainWin)
  })

  autoUpdater.on('download-progress', (progress) => {
    mainWin.webContents.send('download-progress', progress)
  })

  autoUpdater.on('update-downloaded', () => {
    ipcMain.on('start-update', () => {
      autoUpdater.quitAndInstall()
    })
    mainWin.webContents.send('update-downloaded')
  })

  ipcMain.on('download-update', () => {
    autoUpdater.downloadUpdate()
  })

  ipcMain.on('check-updates', () => {
    if (mainWin) autoUpdater.checkForUpdates()
  })

  // Consider updating the program immediately
  if (app.isPackaged) {
    autoUpdater.checkForUpdates()
  }
}

$ /electron/index.ts

import { createAutoUpdater } from './updater'
import { app, protocol, BrowserWindow, Menu, ipcMain } from 'electron'

async function createWindow () {
  process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = 'true'
  // Create the browser window.
  const win = new BrowserWindow({
    width: 1200,
    height: 720,
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env
        .ELECTRON_NODE_INTEGRATION as unknown as boolean,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
      enableRemoteModule: true,
      preload: path.join(__dirname, 'preload.js')
    }
  })

  require('@electron/remote/main').enable(win.webContents)
  Menu.setApplicationMenu(Menu.buildFromTemplate(createMenuOpts()))

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    if (!process.env.IS_TEST) win.webContents.openDevTools()
    // Load the url of the dev server if in development mode
    win.loadURL(composeURL(process.env.WEBPACK_DEV_SERVER_URL))
  } else {
    win.webContents.openDevTools()
    createProtocol('app')
    // Load the index.html when not in development
    win.loadURL(composeURL('app://./index.html'))
    // win.loadURL(`file://${__dirname}/index.html`)
  }

  win.on('ready-to-show', () => {
    createAutoUpdater(win)
  })

  ipcMain.on('update', (_, download) => {
    createAutoUpdater(win, download)
  })
}

$ /electron-builder.json

{
  "files": [
    "dist/**/*",
    "dist-electron/**/*"
  ],
  "directories": {
    "output": "release"
  },
  "publish": [
    {
      "provider": "generic",
      "url": "http://192.168.101.112:8080/electrons/"
    }
  ]
}

3.测试验证

1. 本文测试环境为本机，将 release目录下的 .exe、latest.yml 放在本机任意一个目录下
2. 通过 live-server 启动，以充当服务器进行测试验证