Electron开发客户端问题记录（三）

接上篇文章，此文主要介绍Electron自动更新相关的内容

Electron自动更新

Electron自动更新相对比较复杂，如果有问题欢迎大家评论区讨论。
1.首先引入electron-updater
这边要先引入electron-updater不能使用electron中的，否则会有莫名其妙的坑。

npm install electron-updater --save

2.了解一些electron-builder中提及的发布时，根据不同channel进行打包 相关链接
electron-builder中提及可以使用三种channel的进行发布

当然如果要使用不同的channel发布就需要相关配置
在package.json中添加如下代码
注意默认发布是latest的，如果是alpha，就添加-alpha后缀，beta就添加-beta后缀，这样打包后exe文件名也会带有后缀的。

"version": "x.x.x-beta",

在vue.config.js中添加代码，上篇文章提到过

builderOptions: {
    generateUpdatesFilesForAllChannels: true, //打包后区分不同channel 
}

然后可根据不同的channel，执行打包命令，生成不同的exe文件和yml文件。
注意beta和alpha只会生成beta.yml和alpha.yml，不会生成latest.yml

3.主进程中引入electron-updater

import { autoUpdater } from 'electron-updater';

4.在主进程中编写一些辅助代码

import {
  app,
  protocol,
  BrowserWindow,
  ipcMain,
} from 'electron';
let win: BrowserWindow | null;// 声明主窗口
let feedUrl = 'your publish url'; //需要跟vue.config.js配置publish url保持一致

5.自动更新相关函数方法

/**
 * 自动更新
 */
function autoUpdate() {
  // 通过main进程发送事件给renderer进程，提示更新信息
  function sendUpdateMessage(obj: any) {
    win.webContents.send('updateMessage', obj);
  }
  // 设置自动更新地址
  autoUpdater.setFeedURL({
    provider: 'generic',
    url: feedUrl,
  });

  // 当更新出现错误时触发
  autoUpdater.on('error', (err) => {
  	//记录日志，后续文章再说明，暂时忽略
    logger.error('autoUpdater error:' + JSON.stringify(err));
    sendUpdateMessage({ action: 'error', errorInfo: err });
  });

  // 当开始检查更新的时候触发
  autoUpdater.on('checking-for-update', () => {
    logger.info('检查是否需要更新');
    sendUpdateMessage({ action: 'checking' });
  });

  // 当发现一个可用更新的时候触发，更新下载包会自动开始
  autoUpdater.autoDownload = false;
  autoUpdater.on('update-available', (info) => {
    logger.info('updateAva：' + JSON.stringify(info));
    sendUpdateMessage({ action: 'updateAva', updateInfo: info });
  });

  // 当没有可用更新的时候触发
  autoUpdater.on('update-not-available', (info) => {
    logger.info('updateNotAva' + info);
    sendUpdateMessage({ action: 'updateNotAva', updateInfo: info });
  });

  // 更新下载进度事件
  autoUpdater.on('download-progress', (progressObj) => {
    win.webContents.send('downloadProgress', progressObj);
  });

  /**
   * event Event
   * releaseNotes String - 新版本更新公告
   * releaseName String - 新的版本号
   * releaseDate Date - 新版本发布的日期
   * updateUrl String - 更新地址
   */
  autoUpdater.on('update-downloaded', (event, info) => {
    // 下载太快可能无法触发downloadProgress事件，所以手动通知一下
    win.webContents.send('downloadProgress', { percent: 100 });
    // 可以手动选择是否立即退出并更新
    //ipcMain.on Electron自带的方法，主进程监听渲染进程触发的事件
    ipcMain.on('isUpdateNow', (e, arg) => {
      // some code here to handle event
      autoUpdater.quitAndInstall();
    });
  });
	
  ipcMain.on('checkForUpdate', () => {
    // 执行自动更新检查
    autoUpdater.checkForUpdates();
  });

  ipcMain.on('downloadUpdate', () => {
    // 下载
    autoUpdater.downloadUpdate();
  });
}

6.app ready后调用autoUpdate方法

// Electron自带的app方法
app.on('ready', async () => {
   // do something
   autoUpdate();
});

7.在App.vue中，编写自动更新相关代码

// 自动更新弹窗
<el-dialog
  class="update-dialog"
   title="更新提示"
   center
   :visible.sync="hasNewVersion"
   width="100vw"
   :show-close="false"
   :close-on-click-modal="false"
   :close-on-press-escape="false"
 >
   <div style="margin-bottom: 10px">{{ message }}</div>
   <el-progress :percentage="downloadPercent"></el-progress>
 </el-dialog>

const electron = require('electron');
//自动更新相关
handleAutoUpdate() {
	let _type = 'latest'
	//通过接口或者事件等，判断更新beta还是latest, res.type为接口返回的channel类型
	_type = res.type 
	//electron 自带的方法，渲染进程向主进程发送事件。
	electron.ipcRenderer.send('change-updateparams', _type)
	setTimeout(() => {
		electron.ipcRenderer.send('checkForUpdate')
		// 添加自动更新事件的监听
		electron.ipcRenderer.on('updateMessage', (event, obj) => {
		  logger.info('updateMessage' + JSON.stringify(obj))
		  if (obj.action === 'updateAva') {
		    this.hasNewVersion = true
		    //下载并自动更新
		    this.downloadAndUpdate()
		  } else if (obj.action === 'error') {
		    if (this.hasNewVersion) {
		      this.$msgbox({
		        title: '更新失败',
		        message: '更新失败，请联系管理员',
		        type: 'error',
		        duration: 5 * 1000,
		        confirmButtonText: '确定',
		      })
		      this.hasNewVersion = false
		    }
		  } 
		})
	}, 0)
}
//自动更新下载
downloadAndUpdate() {
  electron.ipcRenderer.send('downloadUpdate')
  electron.ipcRenderer.on('downloadProgress', (event, progressObj) => {
  this.downloadPercent = progressObj.percent.toFixed(0) || 0
    if (progressObj.percent === 100) {
      setTimeout(() => {
        // 立刻退出并更新
        this.message = '更新完成，正在重启...'
        electron.ipcRenderer.send('isUpdateNow')
      }, 2000)
    }
  })
}

8.之后需要在之前配置的publish url的目录中放入相关的exe文件和yml文件。
例如:relese包，就要放入不带后缀的exe应用程序和latest.yml；
beta包，就要放入带后缀-beta的exe应用程序和beta.yml；
9.启动客户端，触发自动更新