Electron实现在线更新与踩坑

前言

最近帮公司搞桌面应用,从NW.js和Electron中做选择,最后选择了Electron,没啥特别难的点,vue脚手架+vue-cli-plugin-electron-builder一把梭,记录一下在线更新踩的一些坑,顺便给自己做做总结,有未完善的地方见谅。

 

Electron实现在线更新与踩坑_第1张图片

简单介绍

Electron是什么?

一款开发跨平台桌面应用的框架。
Windows | Mac | Linux

为何使用它,有何优缺点?

优点

  • 快速打包vue/react应用
  • 跨平台

缺点

  • 体积大,占用内存多

在线更新的技术前提

本文讨论的方案,技术前提如下:
vue/cli脚手架 + vue-cli-plugin-electron-builder插件构建的Electron应用
(使用Electron框架,直接导入vue项目的,或使用vue-electron的,原理类似,不在本文讨论范围)

在线更新方案

使用electron-updater插件进行升级

Electron实现在线更新与踩坑_第2张图片

安装插件

 

npm install electron-updater --save

配置publish

vue.config.js文件,builder配置内添加publish,如下:

 

Electron实现在线更新与踩坑_第3张图片

配置publish项,是为了打包后生成latest.yml文件,该文件是用于判断版本升级的。是打包过程中生成的,为避免自动升级报错,生成后禁止修改文件内容,若文件有误,需要重新打包生成。
注意,这里有个坑,如果服务器更新地址经常变动,这里的url建议不填写,在主进程获取到url后,通过api重新设置。
latest.yml文件记录了版本号、更新包的路径、包大小、日期等。

Electron实现在线更新与踩坑_第4张图片

主进程代码

electron-updater插件的代码必须在主进程执行

 

import { autoUpdater } from 'electron-updater'
// 检测更新,在你想要检查更新的时候执行,renderer事件触发后的操作自行编写
function updateHandle (updateConfig) {
  let message = {
    error: 'update error',
    checking: 'updating...',
    updateAva: 'fetch new version and downloading...',
    updateNotAva: 'do not to update'
  }
  // 设置服务器更新地址
  autoUpdater.setFeedURL({
    provider: 'generic',
    url: updateConfig.download
  })
  autoUpdater.on('error', function () {
    sendUpdateMessage(message.error)
  })
  autoUpdater.on('checking-for-update', function () {
    sendUpdateMessage(message.checking)
  })
  // 版本检测结束,准备更新
  autoUpdater.on('update-available', function (info) {
    sendUpdateMessage(message.updateAva)
  })
  autoUpdater.on('update-not-available', function (info) {
    sendUpdateMessage(message.updateNotAva)
  })
  // 更新下载进度事件
  autoUpdater.on('download-progress', function (progressObj) {
    console.log('下载进度百分比>>>', progressObj.percent)
  })
  // 下载完成
  autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {
    // 退出且重新安装  
    autoUpdater.quitAndInstall()
  })
  ipcMain.on('checkForUpdate', () => {
    // 执行自动更新检查
    autoUpdater.checkForUpdates()
  })
  // 通过main进程发送事件给renderer进程,提示更新信息
  function sendUpdateMessage (text) {
mainWindow.webContents.send('message', text)
  }
}
export default updateHandle

渲染进程代码

 

// ####### 请保证updateHandle方法在主进程已经调用过一遍,事件监听都存在
// 检测更新
ipcRenderer.send('checkForUpdate')

读取进度条组件

主进程向渲染进程页面发送进度数据,展示当前更新进度

 



                    
                    

你可能感兴趣的:(electron)