cordova热更新插件cordova-hot-code-push的使用方法

准备工作:
安装cordova hot code push客户端工具:
npm install -g cordova-hot-code-push-cli


本地热更新开发(该方法搬自官方github文档教程):
1、创建一个新的测试demo工程:
cordova create MyCordovaApp-hotcodepush com.ambzer.cordova
cd ./MyCordovaApp-hotcodepush
cordova platform add android
cordova platform add ios


2、添加热更新插件
cordova plugin add cordova-hot-code-push-plugin
(可以通过该方式添加,但是安装的插件不稳定可能有bug:cordova plugin add https://github.com/nordnet/cordova-hot-code-push.git)


3、添加本地调试插件(当不使用本地调试,更新的代码放在服务器上时,建议去掉该插件)
cordova plugin add cordova-hot-code-push-local-dev-addon


4、上述步骤执行完之后,在项目的根目录下,执行(不要关闭这个终端,另外打开一个终端进行以后的操作)
cordova-hcp server


之后可以看见类似这样的log:
wsjs-MacBook-Pro:MyCordovaApp-hotcodepush wsj$ cordova-hcp server
Running server
Checking:  /Users/wsj/Desktop/cordova/MyCordovaApp-hotcodepush/www
local_url http://localhost:31284
Build 2017.11.09-13.58.36 created in /Users/wsj/Desktop/cordova/MyCordovaApp-hotcodepush/www
cordova-hcp local server available at: http://localhost:31284
cordova-hcp public server available at: https://4b007e7f.ngrok.io


5、启动热更新服务之后,我们要启动模拟器或者真机测试。
首先说一下在ios上遇到的一点问题:
添加完插件之后使用cordova build ios报错,然后我们使用xcode打开ios工程,build一下找到报错的位置,提示将Generator换成Iterator,按照提示修改完之后再编译就不会报错了,使用cordova build ios也是不会报错了。(这了改完之后以后就不需要改了,cordova build ios不会影响这个修改)


我们启动模拟器或者真机,(测试终端:真机Android4.4.4,genymotion模拟器Android7.0,ios模拟器11.0)
Android启动方式,可以使用cordova run Android或者在Android studio中打开Android工程,然后启动应用,ios的话我是在xcode中启动的。


6、修改www中的文件,比如修改主页中的文字,修改保存之后,在启动服务的终端中应该可以看见log
File changed:  /Users/wsj/Desktop/cordova/MyCordovaApp-hotcodepush/www/index.html
Build 2017.11.09-14.14.49 created in /Users/wsj/Desktop/cordova/MyCordovaApp-hotcodepush/www
Should trigger reload for build: 2017.11.09-14.14.49
这时候,模拟器或者真机中应该过一会就回看到变化,大概10s中之内,如果没有看到变化,请在真机或者模拟器中退出重新打开应用。


搭建远程服务器热更新环境:

测试终端:Android4.4.4真机、Android7.0模拟器、Android7.0真机(三星S8),IOS11.0模拟器,IOS11.1iphone6真机,IOS10.3.3iphone6s真机

前提:
我在服务器中使用nginx搭建了一个静态资源服务器,同学们需要有一个静态资源服务器,至少需要会用nginx或者Apache,通过一个url可以获取我们放在服务器上面的文件。
搭建步骤:
1、创建一个cordova工程,添加平台(或者使用已有的工程项目)
2、添加热更新插件:(不需要添加本地热更新调试插件:cordova-hot-code-push-local-dev-addon)
cordova plugin add cordova-hot-code-push-plugin
3、在项目根目录下的config.xml文件中添加一下内容:
<chcp>
<auto-download enabled="false" />
        <auto-install enabled="false" />
        <config-file url="http://x.x.x.x:8888/share/AppSourceCode/hotcodepush/chcp.json"/>
</chcp>


以下属于解释说明:


第一个auto-download表示是否自动下载更新,第二个表示是否自动安装更新,
第三个:是一个更新的配置文件,操作过“本地热更新开发”的同学可以看一下,当执行cordova-hcp server命令之后,会在项目根目录的www文件夹下生成chcp.json和chcp.manifest两个文件,app在检查更新(有自动检查更新和手动检查更新,我这里使用的是手动检查更新,能够自己控制会更好一点)的时候,会将app中www文件夹下的chcp.json与服务器中content_url访问的目录下的chcp.json比较,好像是当两个release时间不相等(不会比较大小)的时候,就会更新。
看一下chcp.json文件中的内容:
{
  "autogenerated": true,
  "release": "2017.11.09-14.14.49",
  "content_url": "https://4b007e7f.ngrok.io",
  "update": "now"
}
第一个表示自动编译,相等于文件修改之后,自动执行cordova-hcp build命令。编译完之后,会在chcp.manifest文件中生成www文件夹中每个文件的hash码,看一下chcp.minifest文件中的部分内容:
{
    "file": ".idea/inspectionProfiles/Project_Default.xml",
    "hash": "ca39aae2553e263f6545d7364a7aa0d4"
},
热更新插件会比对app本地和服务器上的同一个文件的hash码判断是否需要更新。
操作过“本地热更新开发”的同学可以看一下,原来那个工程根目录的config.xml中没有什么新内容,但是在平台的config.xml中多了一些内容,
Android的在:
……/MyCordovaApp-hotcodepush/platforms/android/res/xml/config.xml
IOS的在:
……/MyCordovaApp-hotcodepush/platforms/ios/HelloCordova/config.xml
增加的内容是:
<chcp>
    <local-development enabled="true"/>
    <config-file url="https://4b007e7f.ngrok.io/chcp.json"/>
</chcp>

这个url就是本地的url,在“本地热更新开发”的步骤4的log中可以看到,这时候服务器地址就是本地 http://localhost:31284

在服务启动的情况下,在浏览器中输入:https://4b007e7f.ngrok.io/index.html会直接打开app应用主页



4、在项目的根目录下添加一个文件,文件名为cordova-hcp.json(该文件与config.xml文件目录位置同级),文件内容:
{
  "update": "start",
  "content_url": "http://x.x.x.x:8888/share/AppSourceCode/hotcodepush"
}
以后每次cordova-hcp build的时候,都会以cordova-hcp.json文件为模板,比如现在添加完这个文件之后,执行cordova-hcp build,chcp.json的文件的内容就回变成:
{
  "update": "start",
  "content_url": "http://x.x.x.x:8888/share/AppSourceCode/hotcodepush",
  "release": "2017.11.09-15.01.03"
}
5、app中调用代码手动更新:(我这里用了angularJs和OnsenUI,主要是chcp.fetchUpdate,chcp.installUpdate两个方法,这里应该写一个按钮,点击之后调用以下代码)
chcp.fetchUpdate(function (error, data) {
            if (!error) {
                ons.notification.confirm({
                    message: '更新已经下载完毕,确认安装更新?',
                    title: '更新提示',
                    buttonLabels: ['取消', '确定'],
                    primaryButtonIndex: 1,
                    cancelable: true,
                    callback: function (index) {
                        switch (index) {
                            case 1:
                                chcp.installUpdate(function (error) {
                                    if (!error) {
                                        showAlert('安装更新失败...', JSON.stringify(error));
                                    } else {
                                        showAlert('安装更新完成...');
                                    }
                                });
                                break;
                            default:
                                console.log("取消安装更新...");
                                break;
                        }
                    }
                });
            } else {
                showAlert('下载更新失败...', JSON.stringify(error));
            }
        });


6、配置完成,现在打包安装到模拟器或者真机中(最好先把原来的卸载掉,原因在下面)。
7、修改www中的文件(相当于发版更新),然后执行cordova-hcp build,将www文件夹上传到服务器中url指定的位置。
8、上传完成之后,点击按钮检查更新(检查更新失败的原因有很多,有一个是因为本地已经是最新的版本,这个需要后续完善判断条件),获取更新之后会安装更新,我这里安装更新比获取更新要久一点,获取更新大概3s,安装更新大概要5s,建议写一个模态遮罩显示旋转进度条,安装完之后会自动退到主页,这时候就可以看到更新了,不需要重新打开应用。


其他说明:
1、首先判断www上传到服务器url指定位置是否正确,在浏览器能够访问
http://x.x.x.x:8888/share/AppSourceCode/hotcodepush/chcp.json 如果能得到build之后.json的内容,则表示www文件夹放置正确。 2、使用了该插件之后,我这里出现了一个问题就是,再次cordova run、或者通过Android studio、xcode启动或者打包之后安装到模拟器或者手机都不生效,都不是最新打包的内容。这时候发生这种情况的话,每次更新外壳(热更新无法更新外壳,比如添加插件之后需要更新app外壳)都需要在项目跟目录下的config.xml中增加应用的版本号: <widget id="com.ambzer.cordova" version="1.0.2" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> widge中的version就是app应用的版本号
相关文章
相关标签/搜索