electron-builder+electron-updater实现自动更新

# electron-builder+electron-updater实现自动更新

1 安装electron-updater插件  

npm install electron-updater --save

 

2 在electron-builder的配置文件electron-builder.yml文件里，添加publish配置，为了打包时生成latest.yml

  - electron-builder.yml:     

    appId: 101213
    productName: test测试 # 项目名 这也是生成的exe文件的前缀名
    directories: # 输出文件夹
      output: dist_electron
      buildResources: build,
      app: dist_electron/bundled
    publish:
      provider: "generic"
      url: "xxxx" # 更新时的服务器地址
    win:
      icon: './public/logo.png'
    mac:
      icon: './public/logo.png'
    linux:
      icon: './public/logo.png'
    nsis:
      oneClick: false # 是否一键安装
      createDesktopShortcut: "always" # 是否添加桌面快捷方式
      createStartMenuShortcut: true # 创建开始菜单快捷方式
      allowToChangeInstallationDirectory: true # 允许修改安装目录
      runAfterFinish: true # 安装完成后是否勾选立即执行
    extraResources: # 包含的待打包文件 打包后存放在\dist_electron\win-unpacked\resources\public
      - 'public/favicon.ico'

 

  3、配置主进程文件，引入electron-updater,添加自动更新检测和时间监听

  backgroun.js:   

 const { autoUpdater } = require('autoUpdater')

    let uploadUrl = `http://xxxxx`; // 服务器更新包位置

    // 检测更新，在想要执行检查的时候调用
    function updateHandle(){
      let message = {
        error: { status: -1, msg: '检查更新查询异常'},
        checking: { status: 0, msg: '正在检查更新'},
        updateAva: { status: 1, msg: '检测到新版本，正在下载，请稍后...'},
        updateNotAva: { status: 2, msg: '你现在使用的版本为最新版，不用更新！'}
      }
      let versionInfo = '';
      autoUpdater.setFeedUrl(uploadUrl)
      // 检测更新查询异常
      autoUpdater.on('error',function(){
        sendUpdateMessage(message.error)
      })
      // 开始检查更新
      autoUpdater.on('checking-for-update',function(){
        sendUpdateMessage(message.checking)
      })
      // 当发现可用的更新包，更新包会自动下载
      autoUpdater.on('update-available',function(){
        sendUpdateMessage(message.updateAva)
      })
      // 当发现当前版本为最新版时
      autoUpdater.on('update-not-available',function(){
        sendUpdateMessage(message.updateNotAva)
      })
      // 更新下载进度事件
      autoUpdater.on('download-progress', function(progressObj){
        mainwindow.webContents.send('downloadProgress', progressObj)
      })
      // 更新包下载成功时触发
      autoUpdater.on('update-download', function(event,releaseNotes,releaseName,releaseDate,updateUrl,quitAndUpdate){
        // 收到renderer进程确认更新
        ipcMain.on('updateNow',(e,arg){
          console.log('开始更新');
          autoUpdater.quitAndInstall(); // 包下载完成后，重启当前的应用并且安装更新
        })
        mainWindow.webContents.send('isUpdateNow', versionInfo)
      })
      // 收到renderer进程的检查通知后，执行自动更新检查
      ipcMain.on('checkForUpdate',()=>{
        // autoUpdater.checkForUpdates()
        let checkInfo = autoUpdater.checkForUpdates()
        checkInfo.then(function(data){
          versionInfo = data.versionInfo; // 获取更新包版本等信息
        })
      })
    }
    // 通过main进程发送事件给renderer进程，提示更新信息
    function sendUpdateMessage(text){
      mainWindow.webContents.send('message', text)
    }

 

    - 在窗口创建完成后，在主进程createWindow中调用updateHandle     

function createWindow(){
      ...
      mainWindow = new BrowserWindow({...})
      // 启动检测更新  
      updateHandle()
    }

 

  4 在视图层中触发自动更新    

created () {
      // 自动检测更新
      ipcRenderer.send('checkForUpdate')
    }
    // 监听自动更新事件
    mounted () {
      ipcRenderer.on('message',(event,text)=>{
        this.tipsText = text
      })
      ipcRenderer.on('downloadProgress',(event,progressObj)=>{
        console.log(progressObj); // 下载进度
      })
      ipcRenderer.on('isUpdateNow',(event, versionInfo)=>{
        this.$confirm(
          "检测到新版本" + versionInfo.version + ",是否立即升级？",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        ).then(()=>{
          // 确认更新
          ipcRenderer.send('updateNow')
        })
      })
    }
    // 为避免多次切换页面造成监听的滥用，切换页面前必须移除监听事件：
    beforeDestroy(){
      ipcRenderer.removeAllListeners("message,downloadProgress,isUpdateNow");
    }