electron-updater实现electron应用程序更新

Posted 2021-01-27 leejay6567

使用electron开发桌面应用对于前端来说是比较新的领域。通常web端实现应用的更新比较简单，因为用户访问web端的网页都是通过浏览器访问，输入网址后，找到对应服务器的资源然后返回给用户，所以我们更新应用只需要替换服务器端的代码就可以。但是对于客户端，大多数资源都是在本地的，没有网络也是可以打开，只是和网络交互的接口没有数据而已。

所以桌面应用程序更新需要用户在应用开始时检测更新，用户决定是否更新替换当前应用。

electron-updater实现应用更新的步骤：

1、npm install electron-updater --save

这里不能使--save-dev因为该插件在程序运行时需要。

2、在electron程序入口文件main.js中加入如下配置

ipcMain.on(‘update‘, (e, arg)=>{
    updateHandle();
})

// 检测更新，在你想要检查更新的时候执行，renderer事件触发后的操作自行编写
function updateHandle(){
    let message={
      error:‘检查更新出错‘,
      checking:‘检查更新中……‘,
      updateAva:‘正在下载新版本……‘,
      updateNotAva:‘现在已是最新版本‘,
    };
    //如下应用程序的路径请自行替换成自己应用程序的路径
    let updateFeedUrl=‘http://<ip>:<port>/download/win/‘;
    if (process.platform == ‘darwin‘) {
        updateFeedUrl=‘http://<ip>:<port>/download/mac/‘;
    }

    autoUpdater.setFeedURL(updateFeedUrl);
    autoUpdater.on(‘error‘, function(error){
        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) {
        win.webContents.send(‘downloadProgress‘, progressObj)
    })
    autoUpdater.on(‘update-downloaded‘,  function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {
        sendUpdateMessage(‘isUpdataNow‘);
        ipcMain.on(‘updateNow‘, (e, arg) => {
            autoUpdater.quitAndInstall();
        })
    });
    
    //some code here to handle event
    autoUpdater.checkForUpdates();
}

// 通过main进程发送事件给renderer进程，提示更新信息
function sendUpdateMessage(text){
    win.webContents.send(‘message‘, text)
}

　　以上的流程是，渲染进程通知主进程进行更新检测 -> 主进程发起应用程序检测 -> 检测中 -> 下载应用 -> 替换应用  如果出问题都会走到error监听事件中

在渲染进程的需要检查更新的页面中，通知主进程进行更细的代码：

ipcRenderer.on("message", (event, text) => {
      if(text == ‘isUpdateNow‘){
             if(confirm(‘确认下载?‘)){
                  ipcRenderer.send(‘updateNow‘)
             }
      }
});
           
ipcRenderer.on("downloadProgress", (event, progressObj)=> {
       console.log(progressObj);
});
 ipcRenderer.send(‘update‘);

　　最后在打包时通过设置version参数自增，新版本号大于老版本号，如老版本号1.0.0，新版本2.0.0。这样就可以实现程序的自动更新