Electron自动更新

最近研究Electron,涉及到了自动更新,网上教程也不少,但是好多都不可用了,经过了2天的摸索,终于搞定了菜单手动更新或者偷摸自动更新安装。因为我没有MAC,所以这篇文章只针对Windows系统,等我搞到了MAC,我再来一篇关于MAC的文章!

阅读之前,最好先看下官方的一些文档,我这里推荐以下几篇:

vue-cli-plugin-electron-builder:https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/recipes.html#auto-update

官方文档:https://www.electronjs.org/docs/api/auto-updater

electron-build:https://www.electron.build/auto-update

偷摸自动更新

安装依赖:

npm install electron-updater

设置更新服务器地址vue.config.js

module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        publish: [{
          "provider": "generic",
          "channel": "latest",
          "url": "http://xxxxxxxx/download/",
        }]
      }
    }
  }
}

自动更新background.js

...
+  import { autoUpdater } from "electron-updater"
...

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

这样,就完成了自动更新。

菜单手动更新

这里我把菜单和更新操作单独拆分成两段代码来维护,在src下新建文件夹electron,这里会包含menu.jsupdater.js

菜单文件menu.js,这里推荐看官方文档:https://www.electronjs.org/docs/api/menu-item

import { app, shell, Menu } from 'electron'
import {checkForUpdates} from './updater.js';
let template = [
  {
    label: '帮助',
    role: 'help',
    submenu: [
      {
        label: `版本` + app.getVersion(),
        id: 'version',
        click: (e) => {
          checkForUpdates(e)
        }
      },
      {
        label: '学习更多',
        id: 'about',
        click: () => {
          shell.openExternal('https://wangdaodao.com/')
        }
      }
    ]
  }
]

var list = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(list)

然后是更新代码updater.js

import { dialog } from 'electron'
import { autoUpdater } from 'electron-updater'
let updater
autoUpdater.autoDownload = false

autoUpdater.on('error', (error) => {
  dialog.showErrorBox('Error: ', error == null ? "unknown" : (error.stack || error).toString())
})

autoUpdater.on('update-available', (info) => {
  dialog.showMessageBox({
    type: 'info',
    title: '更新提示',
    message: '发现有新版本'+ info.version +',是否更新?',
    buttons: ['更新', '不了'],
    cancelId: 1,
  }).then(index => {
    if (index.response == 0) {
      autoUpdater.downloadUpdate();
    }
    else {
      updater.enabled = true
      updater = null
    }
  })
})

autoUpdater.on('update-not-available', () => {
  dialog.showMessageBox({
    title: '提示',
    message: '暂无更新'
  })
  updater.enabled = false
  updater = null
})

autoUpdater.on('update-downloaded', () => {
  dialog.showMessageBox({
    type: 'info',
    title: '安装更新',
    buttons: ['安装', '稍后安装'],
    message: '安装包已经下载完毕,是否现在安装?',
    cancelId: 1,
  }).then(index => {
    if (index.response == 0) {
      autoUpdater.quitAndInstall()
    }
  })
})

// export this to MenuItem click callback
export function checkForUpdates(menuItem, focusedWindow, event) {
  updater = menuItem
  updater.enabled = false
  autoUpdater.checkForUpdates()
}

菜单在background.js中引用,在createWindow()方法中直接require

require('./electron/menu.js')

监听下载进度,这里推荐看官方文档 https://www.electronjs.org/docs/api/browser-window

autoUpdater.on('download-progress', function (progressObj) {
  win.setProgressBar(progressObj.percent.toFixed(2) / 100);
  win.setTitle('已下载:' + progressObj.percent.toFixed(2) + '%')
});

Electron自动更新

Electron自动更新

Electron自动更新

基本上这样就完成了Electron更新了。

关于更新服务器

这里更新服务器只要把打包好的文件,上传到服务器上面,就可以了,对服务器没特殊要求。

Electron自动更新

对了,整体的代码我已经提交到GitHub上了,是一个Vue + Electron 纯净版本的,后续还会在里面增加一些功能,如果真的能帮助大家,希望能给一个星星。

Electron自动更新
vue-electron-template
Owner:wangdaodao
Updated:2021-07-21 11:03
Watch:5
Star:5
Fork:1

仅有一条评论

添加新评论