阅读 263

Electron 实现热更新(以及遇到的坑)

安装electron-updater

   npm install electron-updater
复制代码

在渲染进程中点击立即更新时发消息到主进程,这个立即更新是在渲染进程中写的一个更新的弹窗

  this.$ipcApi.send('download-client')   
复制代码

在主进程中,会检测到新版本自动安装

    
import {app, BrowserWindow, ipcMain} from 'electron'
import pkg from '../../../package.json'
// 注意这个autoUpdater不是electron中的autoUpdater
import io from './io'
import {autoUpdater} from "electron-updater"
 
let mainWindow
 //win是通过ipcmain传过来的当前的窗口,因为我是创建的update.js文件,所以需要把当前窗口信息传过来
function handleUpdate(win) {
    mainWindow = win
    const returnData = {
        error: {status: -1, msg: '检测更新查询异常'},
        checking: {status: 0, msg: '正在检查应用程序更新'},
        updateAva: {status: 1, msg: '检测到新版本,正在下载,请稍后'},
        updateNotAva: {status: -1, msg: '您现在使用的版本为最新版本,无需更新!'},
    };
    //告诉渲染进程是否接受到了消息
    mainWindow.webContents.send('downloadInfo', '点击立即更新是否触发')
    
    
    // 设置是否自动下载,默认是true,当点击检测到新版本时,会自动下载安装包,所以设置为false,默认为true,点击立即更新以后直接检测是否有新版本,然后进行安装
    // autoUpdater.autoDownload = false
    
    
    
    /*
        重点说明服务器的地址的内容,内容是打包以后生成的latest.yml,把这个文件放到服务器上,同时和你打包以后的安装包同级目录,这样latest.yml中的地址才能读取到
    */
    updataPath = '服务器的地址'
    autoUpdater.setFeedURL({
        provider: 'generic',
        url:updataPath,
        updaterCacheDirName:'tfstudent-updater'
    });


    //更新错误
    autoUpdater.on('error', function (error) {
        sendUpdateMessage(returnData.error)
    });

    //检查中
    autoUpdater.on('checking-for-update', function () {
        sendUpdateMessage(win, returnData.checking)
    });

    //发现新版本
    autoUpdater.on('update-available', function (info) {
        sendUpdateMessage(win, returnData.updateAva)
    });

    //当前版本为最新版本
    autoUpdater.on('update-not-available', function (info) {
        setTimeout(function () {
            sendUpdateMessage(returnData.updateNotAva)
        }, 1000);
    });

    // 更新下载进度事件
    autoUpdater.on('download-progress', function (progressObj) {
        mainWindow.webContents.send('autodownloadprogress', progressObj)
    });
    
    //下载完成后重新安装
    autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {
        mainWindow.webContents.send('isUpdateNow')
        autoUpdater.quitAndInstall();
    });
    //执行自动更新检查
    autoUpdater.checkForUpdates();
}
// 通过main进程发送事件给renderer进程,提示更新信息
function sendUpdateMessage(win, text) {
    mainWindow.webContents.send('messageupdate', text)
}

export default handleUpdate

复制代码

主进程的updata.js执行完成以后会直接进行打包安装,更换的地址就是打最新的压缩包放到服务器上latest.yml同等级的.exe的压缩包

latest.yml的内容

    version: 9.1.10
    files:
      - url: 打包的名称
        sha512: 版本检测的一个秘钥
        size: 309004610
        isAdminRightsRequired: true
    path: 打包的名称
    sha512: 版本检测的一个秘钥
    releaseDate: '2021-05-20T10:06:20.027Z'

复制代码

本地执行的一些报错信息

  • 这个错是因为utoUpdater.setFeedURL()里面的放的服务地址是错的,应该放打包以后在build文件夹里的latest.yml并且文件夹里有最新的.exe的压缩包,放latest.yml服务器上的地址时,把最后的latest.yml后缀给去掉,因为electron-update会把latest.yml拼接上

image.png

  • 这个错直接把打包以后的latest.ymlcopy到D:\tifang\student-desktop\dist\electron\dev-app-update.yml这个目录下,这个目录是没有dev-app-update.yml的,需要新建的一个dev-app-update.yml然后把latest.yml的内容放到dev-app-update.yml,然后再点击立即更新时就没问题了

image.png

文章分类
前端
文章标签