zoukankan      html  css  js  c++  java
  • electron 热更新

    试用了下,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)
            }
        });
    }
    
    
  • 相关阅读:
    MySql常用命令
    多线程
    redhat7.7(centOS7)安装ORACLE 11g出坑教程及问题总结与解决
    使用 CGImageRef 出现的crash
    leetcode238. 除自身以外数组的乘积
    通过位运算实现求和
    leetcode求1+2+……+n
    leetcode101. 对称二叉树
    leetcode198. 打家劫舍
    leetcode394. 字符串解码
  • 原文地址:https://www.cnblogs.com/wupeng88/p/10593868.html
Copyright © 2011-2022 走看看