HTML5 WebApp开发(十)在线差异化升级

从4月份公司确定使用H5开发app，主要考虑了两点：
1.一套代码可以生成安卓和iOS 两个平台的app；
2.在线升级（差异化升级和整包升级）。
到现在公司的两款app也基本做完了，期间还做了很多新需求进去了。总体感觉使用H5做app，做界面比原生简单、快，但是用户体验上没法和原生相比，特别是这种电商类的app，一般项目都比较大、页面跳转复杂、业务逻辑多，使用上和原生相比没有任何优势（忽略上面的两点）；加上五一之后，苹果生审核政策变了，主要是审核加速了，以前需要两周左右的时间现在一周内就可以搞定（一次是4月29号提交的，1天通过；一次是6月15号提交的，一天通过；还有一次是7月5号提交的，花了两三天也通过了）。而且苹果的政策是严禁应用内升级的。以前做了版本号显示的，点击可以跳转到苹果商店升级都被拒绝了，后来干脆把这个功能干掉了，因为苹果现在应用升级它都会推送给用户，不需要我们再在app里面做检查更新操作了，但是对于企业包来说，可以忽略这些。安卓的各大市场上线时间也是很快的，基本可以不考虑。
再来看看上面两点：感觉就是第一点有优势，因为可以节约成本，而且我们把app的代码组做些修改就可以是做成微信版本的。
个人观点：对于小型app或是app里面的部分模块可以使用H5开发，对于大型的app，不建议使用H5做，因为节约的这点成本，对于产品因为良好的用户体验而获取的用户来说，这个成本不算什么，一般的公司也很难把H5的app的体验做到和原生相差无几。
我们使用的是MUI框架，编译器是HBuild。
这篇博客主要介绍的应用差异化升级。

整包升级

整包升级，先看看官方的文档《整包(apk/ipa)升级》。官方的介绍也是比较详细的，由于本人没有做过整包升级，所以这里不做描述。但是有一点需要注意的：

差异化升级

先看官方文档
《App资源在线升级更新》
《App资源在线差量升级更新》
这两篇文章里面已经详细的介绍了差异化升级的流程和制作wgt升级包的步骤和注意事项。
在官方的代码的基础上我做了一点小的修改。
首先新建一个update.js的文件，里面的代码如下：

var wgtVer=null;
function plusReady(){
    // 获取本地应用资源版本号
    plus.runtime.getProperty(plus.runtime.appid,function(inf){
        wgtVer=inf.version;
        console.log("当前应用版本："+wgtVer);
    });
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready',plusReady,false);
}

// 检测更新
// 实际项目中需要更换为自己服务器的地址
var checkUrl="http://demo.dcloud.net.cn/test/update/check.php";
function checkUpdate(){
    plus.nativeUI.showWaiting("检测更新...");
    var xhr=new XMLHttpRequest();
    xhr.onreadystatechange=function(){
        switch(xhr.readyState){
            case 4:
            plus.nativeUI.closeWaiting();
            if(xhr.status==200){
                console.log("检测更新成功："+xhr.responseText);
                var newVer=xhr.responseText;
                if(wgtVer&&newVer&&(wgtVer!=newVer)){
                    downWgt();  // 下载升级包
                }else{
                    plus.nativeUI.alert("无新版本可更新！");
                }
            }else{
                console.log("检测更新失败！");
                plus.nativeUI.alert("检测更新失败！");
            }
            break;
            default:
            break;
        }
    }
    xhr.open('GET',checkUrl);
    xhr.send();
}
// 下载wgt文件
// 实际项目中需要更换为自己服务器的地址
var wgtUrl="http://demo.dcloud.net.cn/test/update/H5EF3C469.wgt";
function downWgt(){
    plus.nativeUI.showWaiting("下载wgt文件...");
    plus.downloader.createDownload( wgtUrl, {filename:"_doc/update/"}, function(d,status){
        if ( status == 200 ) { 
            console.log("下载wgt成功："+d.filename);
            plus.nativeUI.confirm("升级包下载完成，是否需要升级",function(e){
                    var sure = (e.index == 0) ? "Yes" : "No";
                    if (sure == 'Yes') {
                        installWgt(d.filename); // 安装wgt包
                    }
            })
        } else {
            console.log("下载wgt失败！");
            plus.nativeUI.alert("下载wgt失败！");
        }
        plus.nativeUI.closeWaiting();
    }).start();
}
// 更新应用资源
function installWgt(path){
    plus.nativeUI.showWaiting("安装wgt文件...");
    plus.runtime.install(path,{},function(){
        plus.nativeUI.closeWaiting();
        console.log("安装wgt文件成功！");
        plus.nativeUI.alert("应用资源更新完成!\n点击确定按钮重启完成升级",function(){
            plus.runtime.restart();
        });
    },function(e){
        plus.nativeUI.closeWaiting();
        console.log("安装wgt文件失败["+e.code+"]："+e.message);
        plus.nativeUI.alert("安装wgt文件失败["+e.code+"]："+e.message);
    });
}
/* * 差异化升级流程： * 1.启动app后在plusReady里面首先获取app版本 * 2.检查服务器版本 * 3.服务器版本大于本地app版本下载升级包，提示安装和升级 * 4.服务器版本小于等于本地版本时，不做任何操作 * 5.重启即可玩升级 */

怎么使用呢？
我们只需要在一个.html文件里面引用这个js文件：

<script type="text/javascript" src="../js/update.js" ></script>

然后在mui.plusReady()方法里面调用checkUpdate()这个方法即可。

改进点

1. 升级的js文件里面不要使用Loading框，版本检测或是下载就让它静默操作就可以，值需要在是否安装升级包的时候给一个提示框即可；
2. 根据之前原生app被拒绝的经历来和用户体验的角度来说，我们可以在近app的时候定时一定时间后再调用checkUpdate()这个方法，如果能做一个软开关最好，上架审核期间先关闭这个功能，审核通过以后再打开这个功能。

总结

H5的app也做了两个，加之之前做原生的经验，总体来说使用H5开发app比原生简单一些、开发速度快，但是用户体验差。公司做产品也是在产品质量、开发周期、成本等因素中选取一个平衡点。
代码下载地址：请点击我！