Electron自动更新 - 王叨叨

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

好帅的苦咖啡 · 如何在Electron中将Blob转换为文件 ...· 2 天前 ·

害羞的冲锋衣 · OpenCV-Python图像轮廓—HI技术分享· 1 周前 ·

玩滑板的钥匙 · TypeError: ...· 3 周前 ·

有胆有识的炒面 · electron 获取窗口 - CSDN文库· 4 周前 ·

闯红灯的便当 · 初试 Electron 远程调试· 1 月前 ·

绅士的竹笋 · 拼多多如何摆脱“小玩意儿” - OFweek物联网· 1 月前 ·

文雅的小蝌蚪 · JIRA使用小结 | Shadow'S Site· 2 月前 ·

谈吐大方的烤土司 · Spring ...· 4 月前 ·

阳刚的路灯 · TypeScript：在TypeScript ...· 8 月前 ·

痴情的草稿本 · 纪念陈皓（左耳朵耗子） - 陈硕 - 博客园· 8 月前 ·

最近研究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.js 和 updater.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) + '%')
});

2021-02-04T08:40:32.png