electron结合electron-updater实现版本升级

原创文章，转载请注明出处

1. 安装依赖：
   npm install electron-updater --save
2. 再package.json中build下添加如下代码

       "publish": [
             {
                 "provider": "generic",
                  "url": "https://xxxx/xxxx/"
             }
       ],
   

3. 在main.js中引入自动更新模块
   const { autoUpdater } = require('electron-updater');
4. 在main.js中写更新方法

       const feedUrl = `https://xxxx/electron/`; // 更新包位置
       // 检测更新，在你想要检查更新的时候执行，renderer事件触发后的操作自行编写
       function updateHandle() {
         let message = {
           error: '检查更新出错',
           checking: '正在检查更新……',
           updateAva: '检测到新版本，正在下载……',
           updateNotAva: '现在使用的就是最新版本，不用更新',
         };
         const os = require('os');
         autoUpdater.setFeedURL(feedUrl);
         autoUpdater.on('error', function (error) {
           console.log(error)
           sendUpdateMessage(message.error, 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, '')
         });
   
         // 更新弹框
         // remote.dialog.showMessageBox({
         //   type: 'info',
         //   title: '更新提示',
         //   message: '有新版本需要更新',
         //   buttons: ['ok', 'cancel']
         // }, (index) => {
         //   if (index == 0) {
         //     console.log('You click ok.');
         //   } else {
         //     console.log('You click cancel');
         //   }
         // })
   
         // 更新下载进度事件
         autoUpdater.on('download-progress', function (progressObj) {
           mainWindow.webContents.send('downloadProgress', progressObj)
         })
         autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {
   
           ipcMain.on('isUpdateNow', (e, arg) => {
             console.log(arguments);
             console.log("开始更新");
             //some code here to handle event
             autoUpdater.quitAndInstall();
           });
   
           mainWindow.webContents.send('isUpdateNow')
         });
   
         ipcMain.on("checkForUpdate", () => {
           //执行自动更新检查
           autoUpdater.checkForUpdates();
         })
       }
   
       // 通过main进程发送事件给renderer进程，提示更新信息
       function sendUpdateMessage(text, error) {
         mainWindow.webContents.send('message', text)
       }
   

5. 在渲染进程中添加更新提示

      <div class="update-dialog" id="updateDialog">
           <div class="update-content">
               <div class="update-title">
                   检测到有新版本，正在更新...
               </div>
               <div class="update-prograss">
                   <div id="prograss" class="update-pro-bg-color"></div>
               </div>
           </div>
       </div> 
   
       window.onload = function () {
           // alert('Hello World!');
           // document.getElementById('updateDialog').style.display = 'block'
           try {
               // electron更新
               ipcRenderer.send("checkForUpdate");
               // 监听主进程传回的消息
               ipcRenderer.on("message", (event, text, err) => {
                   console.log(event);
                   console.log(text)
                   console.log(err)
                   this.tips = text;
               });
               //注意：“downloadProgress”事件可能存在无法触发的问题，只需要限制一下下载网速就好了
               ipcRenderer.on("downloadProgress", (event, progressObj) => {
                   console.log('------')
                   console.log(event);
                   console.log(progressObj);
                   if (progressObj) {
                       if (Number(progressObj.percent) >= 100) {
                           document.getElementById('updateDialog').style.display = 'none'
                       } else {
                           document.getElementById('updateDialog').style.display = 'block'
                           document.getElementById('prograss').style.width = Number(progressObj.percent) * 5 + 'px'
                       }
                   } else {
                       document.getElementById('updateDialog').style.display = 'none'
                   }
                   this.downloadPercent = progressObj.percent || 0;
               });
               ipcRenderer.on("isUpdateNow", () => {
                   ipcRenderer.send("isUpdateNow");
               });
           } catch (error) {
               console.log(error)
           }
       };