例子源码参见我的github:zhangzhaojun/chcp-manual-demo
使用cordova-hot-code-push插件的方法如下:
1、如下命令创建一个项目:
$ ionic start myNewProject blank
2、进入项目目录并添加平台支持:
$ cd myNewProject
$ ionic cordova platform add android@6.1.2
注意:cordova platform add android前面必须加上ionic,否则出现如下错误提示:
Error: Current working directory is not a Cordova-based project.
3、如下命令添加cordova-hot-code-push插件:
$ ionic cordova plugin add cordova-hot-code-push-plugin
4、执行以下命令初始化插件:
$ cordova-hcp init
![1de5d830b85401b24c34effc18173558.png](https://img-blog.csdnimg.cn/img_convert/1de5d830b85401b24c34effc18173558.png)
上图中的url输错了,应是http://123.207.88.149/www
5、打开config.xml,添加如下代码:
<chcp>
<config-file url="http://123.207.88.149/www/chcp.json"/>
</chcp>
6、执行以下命令生成APK:
$ ionic cordova build android --prod --release
7、执行以下命令生成chcp.json和chcp.manifest
文件,生成的文件位于www目录下:
$cordova-hcp build
![88852eb2e8e46712eea616fedce0e9b1.png](https://img-blog.csdnimg.cn/img_convert/88852eb2e8e46712eea616fedce0e9b1.png)
说明:chcp.json和chcp.manifest文件在打包时会打包进APK。目前两个文件的内容如下:
chcp.json的内容如下,它列出了当前版本发布的时间("release": "2017.12.18-19.29.19"):
{
"name": "chcp-manual-demo",
"ios_identifier": "",
"android_identifier": "",
"update": "resume",
"content_url": "http://123.207.88.149/www",
"release": "2017.12.18-19.29.19"
}
chcp.manifest的内容如下,它列出了www目录下的所有文件及每个文件此刻的hash值:
[
{
"file": "assets/fonts/ionicons.eot",
"hash": "bdf1d30681cf87986c385eea78e8de9a"
},
{
"file": "assets/fonts/ionicons.scss",
"hash": "c1fdfabf9cbd412b444f064d27641f10"
},
{
"file": "assets/fonts/ionicons.svg",
"hash": "d9496a234c81179afbca6bf5959cc30a"
},
...
]
8、执行如下命令,重新打包成apk文件,这时候的apk就包括了上面的chcp.json和chcp.manifest文件了,然后将apk签名并安装到手机:
$ ionic cordova build android --prod --release
9、对app的源文件进行修改,然后再执行如下命令:
$ ionic cordova build android --prod --release
$cordova-hcp build
$ ionic cordova build android --prod --release
然后将此时www目录拷贝到http://123.207.88.149/下。然后对nginx进行配置,我用的是腾讯的云服务器,进入云服务器的控制台,进入/etc/nginx/sites-enabled目录后,$ sudo vim default进行配置:
ubuntu@VM-0-14-ubuntu:/etc/nginx/sites-enabled$ sudo vim default
图示如下:
![d6db5832eafcb8ab045a45125d107d93.png](https://img-blog.csdnimg.cn/img_convert/d6db5832eafcb8ab045a45125d107d93.png)
上图中的
location /www/ {
try_files $uri =404;
}
就是我们添加的内容。
至此,当我们的app从后台恢复到前台运行时就会自动检测并下载安装更新了。
10、但是当我们给app增加了新的插件的话,我们就只能通过提示让用户手动到相应地址下载更新了。方法如下:
10.1 在config.xml添加<native-interface version="1" />,这里1为当前版本号。如下所示:
<chcp>
<config-file url="http://123.207.88.149/www/chcp.json" />
<native-interface version="1" />
</chcp>
10.2 在cordova-hcp.json中添加"min_native_interface": 1,如下所示:
{
"name": "chcp-manual-demo",
"ios_identifier": "",
"android_identifier": "http://www.zhikeji.top/xxx.zip",
"update": "resume",
"content_url": "http://123.207.88.149/www",
"min_native_interface": 1
}
10.3 在app.component.ts中增加支持外壳更新的功能,代码详见我的github仓库。
接下来项目根目录下依次执行:
$ ionic cordova build android --prod --release
$ cordova-hcp build
$ ionic cordova build android --prod --release
然后把生成的apk签名及安装到手机。
之后把www文件夹上传到http://123.207.88.149/即可。
10.3 每当我们给app增加了插件后,我们只需要将cordova-hcp.json中"min_native_interface": 1的1增加为2,将config.xml中的<native-interface version="1" />相应改为<native-interface version="2" />即可,然后执行:
$ ionic cordova build android --prod --release
$ cordova-hcp build
$ ionic cordova build android --prod --release
之后把www文件夹上传到http://123.207.88.149/即可实现外壳更新提示。
热更新原理:手机上的app根据自身config.xml中<config-file url="http://123.207.88.149/chcp.json"/>下载http://123.207.88.149/chcp.json文件并与app自身的chcp.json中"release": "2017.12.18-19.29.19"对比,如果时间比自己的新,则根据app自身中的chcp.json中的"content_url": "http://123.207.88.149/www"中的content_url的值到http://123.207.88.149/www下载chcp.manifest并与自身chcp.manifest对比,对于hash值不同的文件,app将从http://123.207.88.149/www下载并更新。当服务器上的chcp.json中的"min_native_interface"的值大于手机app中config.xml中的<native-interface version=的值时,代表需要外壳更新,这时就会提示用户手动前往下载安装更新。
注意:每次版本的更新,生成的apk文件名中最后包含相应的版本号数字,以便区分。另config.xml中<widget id="http://io.zzj.xxx" version="2.3.3"这的版本号也同时修改。