electron 热更新

巧了我就是萌 提交于 2021-02-17 09:54:53

试用了下,electron 自带的热更新 并不是特别理想。

想自己处理下载更新文件。刚好看到了网上有一个比较好的处理方式。试了下效果还可以。

使用以下命令将此库包含在项目中:

npm install request

在脚本的顶部声明基本依赖项。

var request = require('request');
var fs = require('fs');

将GET数据流式传输到文件输出。 

function downloadFile(file_url , targetPath){
    // Save variable to know progress
    var received_bytes = 0;
    var total_bytes = 0;

    var req = request({
        method: 'GET',
        uri: file_url
    });

    var out = fs.createWriteStream(targetPath);
    req.pipe(out);

    req.on('response', function ( data ) {
        // Change the total bytes value to get progress later.
        total_bytes = parseInt(data.headers['content-length' ]);
    });

    req.on('data', function(chunk) {
        // Update the received bytes
        received_bytes += chunk.length;

        showProgress(received_bytes, total_bytes);
    });

    req.on('end', function() {
        alert("File succesfully downloaded");
    });
}

function showProgress(received,total){
    var percentage = (received * 100) / total;
    console.log(percentage + "% | " + received + " bytes out of " + total + " bytes.");
}  

使用方式:

downloadFile("http://www.planwallpaper.com/static/images/butterfly-wallpaper.jpeg", "./butterfly-wallpaper.jpeg");  

用promise实现的方式:

/**
 * Promise based download file method
 */
function downloadFile(configuration){
    return new Promise(function(resolve, reject){
        // Save variable to know progress
        var received_bytes = 0;
        var total_bytes = 0;

        var req = request({
            method: 'GET',
            uri: configuration.remoteFile
        });

        var out = fs.createWriteStream(configuration.localFile);
        req.pipe(out);

        req.on('response', function ( data ) {
            // Change the total bytes value to get progress later.
            total_bytes = parseInt(data.headers['content-length' ]);
        });

        // Get progress if callback exists
        if(configuration.hasOwnProperty("onProgress")){
            req.on('data', function(chunk) {
                // Update the received bytes
                received_bytes += chunk.length;

                configuration.onProgress(received_bytes, total_bytes);
            });
        }else{
            req.on('data', function(chunk) {
                // Update the received bytes
                received_bytes += chunk.length;
            });
        }

        req.on('end', function() {
            resolve();
        });
    });
}  

使用方式:

downloadFile({
    remoteFile: "http://www.planwallpaper.com/static/images/butterfly-wallpaper.jpeg",
    localFile: "/var/www/downloads/butterfly-wallpaper.jpeg",
    onProgress: function (received,total){
        var percentage = (received * 100) / total;
        console.log(percentage + "% | " + received + " bytes out of " + total + " bytes.");
    }
}).then(function(){
    alert("File succesfully downloaded");
});  

还有一步 是对zip 包进行解压 然后 替换本地文件,删除这个更新的压缩包  就完成了热更新。

我是再渲染线程 进行判断版本的:

判断是否需要强制更新,如果不强制更新的版本都用热更新 去下载 替换本地文件就可以了 

function UpdateApp() {
    $.ajax({
        type: "GET",
        url: baseDevUrl + CLIENTUPDATES + '?OS=' + getPlatformName(),
        headers: {
            Authorization: 'Bearer ' + getAccessToken(),
            Accept: "application/json; charset=utf-8",
        },
        success: function (res) {
            console.log(res.data[0])
            if (res.data[0]&&res.data[0].version != version) {
                console.log('进行强制更新');
                $(".myDialog-box").show();
                $(".myDialog-box").click((event)=>{
                    return event.preventDefault();
                })
                $(".headerEndDiv").addClass('disClick');
                $('#btn-dialogBox').dialogBox({
                    hasClose: true,
                    hasBtn: true,
                    confirmValue: '去更新',
                    confirm: function () {
                        console.log('this is callback function');
                        shell.openExternal(res.data[0].download_url);
                        ipcRenderer.send('window-close');
                    },
                    cancelValue: '取消',
                    cancel: function () {
                        toast("请更新到最新版本..");
                        return true;
                    },
                    title: res.data[0].title,
                    content: res.data[0].content
                });
            }
        },
        error: function (msg) {
            var rss = $(msg.responseText);
            console.log(rss)
        }
    });
}

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!