ionic热更新

简介

关于Cordova的热更新问题,国内的资料比较少,许多博客上都是胡乱的抄袭,准确性极低,无任何实用性,并且步骤不够完整,在此亲手测试了一下,并整理详细的步骤以供备忘和参考。

热更新的好处

通常ionic源码可包括(HTML,JavaScript,CSS文件和其他资源),
通过cordova热更新插件cordova-hot-code-push-plugin来是实现客户端的代码热更新
避免了之前更改代码重新打版再提交至应用商店审核的流程,实现后台动态更新代码
热更新原理图(扒来的。。。图不孬,有助理解)


内壳更新

基本的配置步骤

  • Python简单服务器本地搭建
    首先,我们自己搭建个本地的服务器Python,测试用。在此只做开发版的热更新测试,(本地的不做,容易混,也没什么用)
    Python服务器安装包云盘下载眼

    下载好后,我们用命令行操作:
    $ cd desktop

    在桌面创建文件夹,
    $ mkdir pythonServe
    $ cd pythonServer
    进入到所创建的的文件夹,执行:* 注意遵循大小写<9999 为端口号可自定义>
    $ python -m SimpleHTTPServer 9999

    效果如下即为搭建成功:


    用终端查看下自己的ip, 执行命令$ ifconfig即可获取,此 ip+端口号 就是你服务器地址,如果切换网络,要更新下面的服务器地址,切记哦!
    服务器到此搭建完毕告一段落...

  • ionic项目文件 配置:

    首先,创建工程:#创建de略过...
    $ cordova create bankapp com.example.bankapp bankapp
    $ ionic start bankapp tabs -a "bankapp" -i com.example.bankapp

    关键de配置
    1、安装 cordova-hot-code-push-cli,执行命令
    $ npm install -g cordova-hot-code-push-cli
    作用:使用该命令行生成检测配置文件,通常是在 www 目录下动态生成 chcp.jsonchcp.manifest 生成两个文件,插件源码地址:https://github.com/nordnet/cordova-hot-code-push

    2、进入项目目录
    $ cd 你的项目路径。比如 我的项目在桌面上:$ cd desktop/bankapp

    3、 安装热更新插件,执行命令(cordova或ionic都可以)
    $ cordova plugin add cordova-hot-code-push-plugin

    *注意:网上有安装下插件,没什么用,这是个实时更新插件,用于本地的同步更新,此处我们用不到:$ ionic plugin add cordova-hot-code-push-local-dev-addon

    4、创建cordova-hcp.json模板
    在cordova项目根目录下创建一个 cordova-hcp.json模板文件。
    cordova-hcp.json内容如下:

    {
      "autogenerated": true,
      "name": "bankapp",
      "min_native_interface": 1, //最小支持的外壳app版本
      "content_url": "http://192.168.1.101:9999/www",
      "ios_identifier":"https://itues.apple.com/cn/***", //打版提交App Store下载的地址
      "update": "now"
    }
    
    

    &注意 :content_url:是你服务器上要更新的文件地址,

    执行: $ cordova-hcp build
    就会利用这个模板自动在www文件夹下生成新的 chcp.json和chcp.manifest文件,而不用手动更改 www/chcp.json了。
    解析下:

    • min_native_interface: 记录当前App的外壳版本值
    • chcp.manifest文件记录版本的hash值
    • ios_identifier:记录App在苹果商店上的位置,就是外壳地址
    • release:内壳时间戳版本,根据时间戳来更新的。
    • content_url: 是你服务器内更新的文件地址。此处建议设为www文件夹,因为我们改动代码后要把www文件进行更新,可以直接将改动后的www文件夹把服务器上旧的的www替换掉。

5、 配置config.xml文件
在config.xml文件中添加以下代码:
<chcp> <native-interface version="1" /> <config-file url="http://192.168.1.101:9999/www/chcp.json" /> </chcp>
&注意:url为你服务器中更新文件的地址/ chcp.json
&注意:内壳更新 要把cordova-hcp.json和config.xml中的 版本号设置为一样的

6、完成以上准备,开始测试 热更新(html、css或js等资源的动态更新,即内壳更新)
执行下面:

  • $ cordova platform add ios 生成平台
  • $ cordova-hcp build 生成新chcp.json和chcp.manifest文件(重新打个时间戳realease)
  • $ cordova build ios/android 编译包到各个平台
  • 将www文件夹拷贝到服务器中
  • 在Xcode 中运行工程应用
  • 在webStore中(开发工具自选)更改一些www文件夹中的内容(如html、css、js或其它的资源)

在此,随便改下就可以
  • $ cordova-hcp build
  • 再次将更改后的www的文件拷贝到服务器中,把原来旧的www文件替换即可
  • &在浏览器中测试下自己的服务器通否:

这是我的我的临时搭建Python地址 :http://192.168.1.101:9999

  • 在Xcode中再次运行应用,查看内容是否进行了更新

热更新完成后日志如下:


到此内壳更新就结束了,在这总结下可能会遇到的问题:
一、chcp.json和config.xml中的服务器的地址不要写错,chcp.json中的地址:服务器上更新文件的地址;config.xml中的地址:服务器上更新文件的地址+chcp.json
二、首次要先在服务器上打个初始版本,流程如下:

即生成平台-->模板生成chcp文件-->编译到各个平台-->上传www到服务器-->运行应用--->修改内容--> 模板重新生成chcp文件-->上传www文件覆盖旧的--->运行应用--->查看更新

三、服务器保证通的通的、、、
四、再不中看这 -坑眼-https://github.com/nordnet/cordova-hot-code-push/issues/223


外壳更新

描述

这个外壳更新有点强制化,比如你在使用应用时,突然弹出个pop,提示你有新的版本更新了,人性化点的还有个取消按钮;强制性的就确定后直接跳转到AppStore了。这在你自己怎么设置了。
像原生的版本更新就没有强制;如你打版提交审核上架了,客户端也就仅在appStore商店有个更新提醒,更不更在客户了。

外壳更新配置

上面的内壳更新整好后,这就比较简单了,因该配的已配置好,只在这改改某些属性就可以

通过min_native_interface监控app是否提示更新

所需最小的外壳app版本. 这是app的build版本号,是个整型数字, 不是应用商店中看到的形如”1.0.0”字符串。

在 config.xml中,这样指定build版本号,例如:app外壳里的config.xml是这样的:

    <chcp>
        <native-interface version="1" />
        <config-file url="http://192.168.191.2:9999/www/chcp.json" />
    </chcp>

与www目录下的cordova-hcp.json/chcp.json里面的min_native_interface数值相对应,

若服务器里的min_native_interface也对应是1,就不会出现提示用户升级版本的状态(即外壳更新),正常修改www目录的内容通过更新release值,和客户端进行对比,可实现热更新(即内壳更新)。

{
  "autogenerated": true,
  "name": "bankapp",
  "min_native_interface": 1, //最小内核版本号
  "content_url": "http://192.168.191.2:9999/www",
  "ios_identifier": "https://itues.apple.com/cn/***", //打版提交App Store下载的地址
  "update": "now",
  "release": "2017.02.23-12.53.32"
}

假设你的外壳app加了个新的插件或文件,应该会更新外壳app。为了防止用户通过热更新下载了不适合他现有外壳app的web内容,应该设置下 min_native_interface 的值
下面我们将 min_native_interface 的值改为 2

{
  "autogenerated": true,
  "name": "bankapp",
  "min_native_interface": 2, //最小支持的外壳app版本
  "content_url": "http://192.168.191.2:9999/www",
  "ios_identifier": "https://itues.apple.com/cn/***", //打版提交App Store下载的地址
  "update": "now",
  "release": "2017.02.23-12.53.32"
}

热更新插件加载到这段json的时候, 发现 min_native_interface 比当前外壳app的build号要大,便不会下载web内容。而是触发一个chcp_updateLoadFailed 错误通知, 告诉用户需要升级外壳app版本了。

此属性将与config.xml中的native-interface进行对比,如果发现两者不同时,将会触发相应的事件,比如,手机端app中config.xml的native-interface值比服务器上的chcp.json文件中的min_native_interface值小时,将会触发’chcp_updateLoadFailed’事件,同时,错误代码为:
chcp.error.APPLICATION_BUILD_VERSION_TOO_LOW 通过这个错误码调用js端监听相应事件通过弹窗提示用户去升级,跳转到AppStore或下载新安装包。

具体步骤

1、导入插件。外壳(版本号)的更新需要导入另外3个插件
cordova-plugin-filecordova-plugin-file-transfercordova-plugin-file-opener2

导入命令:```
$ cordova plugin add cordova-plugin-file
$ cordova plugin add cordova-plugin-file-transfer
$ cordova plugin add cordova-plugin-file-opener2

> 2、添加代码-弹框-跳转至商店更新 **& ios_identifier为要跳转的地址**
> 将下面的代码放到 .run function中启动时就调用(看自己怎么封装的,我封到router中了)如图:
> ![](http://upload-images.jianshu.io/upload_images/4665802-c8d20aa8c0413f8c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 
 `min_native-interface`将与config.xml中的`native-interface`进行对比、如果两者不同、将会触发`'chcp_updateLoadFailed'`事件。同时、错误代码为:
`chcp.error.APPLICATION_BUILD_VERSION_TOO_LOW`,返回值为-2,那么就会执行下面的代码,弹框提示更新了。

>  ```
var appUpdate = {
        // Application Constructor
        initialize: function() {
            this.bindEvents();
        },
        // Bind any events that are required.
        // Usually you should subscribe on 'deviceready' event to know, when you can start calling cordova modules
        bindEvents: function() {
            document.addEventListener('deviceready', this.onDeviceReady, false);
            document.addEventListener('chcp_updateLoadFailed', this.onUpdateLoadError, false);
        },
        // deviceready Event Handler
        onDeviceReady: function() {
        },
        onUpdateLoadError: function(eventData) {
            var error = eventData.detail.error;
            
            // 当检测出外核版本有更新,// 针对不同平台进行相应更新操作
            if (error && error.code == chcp.error.APPLICATION_BUILD_VERSION_TOO_LOW) {
                var dialogMessage = '有新的版本,请下载更新';
                
                // iOS端 直接弹窗提示升级,点击ok后自动跳转
                if(ionic.Platform.isIOS()){
                    chcp.requestApplicationUpdate(dialogMessage, this.userWentToStoreCallback, this.userDeclinedRedirectCallback);
                //Android端 提示升级下载最新APK文件 
                } else if(ionic.Platform.isAndroid()){
                    //这儿放Android端更新代码...,在下面👇
                }
            }
        },
        userWentToStoreCallback: function() {
            // user went to the store from the dialog
        },
        userDeclinedRedirectCallback: function() {
            // User didn't want to leave the app.
            // Maybe he will update later.
        }
    };
    appUpdate.initialize();

Android端添加代码👆 提示升级下载最新APK文件

var confirmPopup = $ionicPopup.confirm({
  template: '有新的版本,请下载更新',
  cssClass: 'popup',
  cancelText:'取消',
  okText:'升级'
});
confirmPopup.then(function (res) {
  if (res) {
    $ionicLoading.show({
      template: "已经下载:0%"
    });
    window.resolveLocalFileSystemURL(cordova.file.externalRootDirectory, function(fileEntry) {
      fileEntry.getDirectory("***(app名称)", { create: true, exclusive: false }, function (fileEntry) {
        //下载代码
        var fileTransfer = new FileTransfer();
        fileTransfer.download("app下载地址", fileEntry.toInternalURL()+"***(app名称).apk", function(entry) {
          // 打开下载下来的APP
          cordova.plugins.fileOpener2.open(
            entry.toInternalURL(),//下载文件保存地址
            'application/vnd.android.package-archive', {//以APK文件方式打开
              error: function(err) {
              },
              success: function() {}
            });
        }, function(err) {
        },true);
        fileTransfer.onprogress = function(progressEvent) {
          $timeout(function () {
            var downloadProgress = (progressEvent.loaded / progressEvent.total) * 100;
            $ionicLoading.show({
              template: "已经下载:" + Math.floor(downloadProgress) + "%"
            });
            if (downloadProgress > 99) {
              $ionicLoading.hide();
            }
          });
        };
      },function(err){alert("创建失败")});
    });
  }
});
chcp.json中update字段含义

指定了什么时候安装web内容更新,支持的值有:

start - app启动时安装更新,默认值
resume - app从后台切换过来的时候安装更新
now - web内容下载完毕即安装更新

好了,先总结这么多,可能会有些细节落下,望大家参考时,给我提下,我在继续补充。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,378评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,356评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,702评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,259评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,263评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,036评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,349评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,979评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,469评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,938评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,059评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,703评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,257评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,262评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,501评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,792评论 2 345

推荐阅读更多精彩内容