[Ionic] - 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.json 和 chcp.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-file、cordova-plugin-file-transfer、cordova-plugin-file-opener2

导入命令：

1
2
3

> $ 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中了）如图:

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("创建失败")});
    });
  }
});

3、代码添加后，执行：
$ cordova-hcp build
4、将www文件上传到服务器覆盖旧的，使用Xcode运行应用

注意&出现问题****
1、没有弹框提示–第一次要清理下缓存/或把应用从模拟器卸掉，从新运行
2、网络若不好，反应会很慢，等会才会弹出。。。

结果如图：

chcp.json中update字段含义

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

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

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

赏

支付宝打赏

微信打赏

赞赏一下坚持原创技术分享，您的支持将鼓励我继续创作！

[Ionic] - ionic热更新

cordova热更新

简介