本文为cordova混合开发apk更新的系列文章的第一篇文章:H5部分的更新。
混合应用的开发也已经火到了一定程度了,大家写h5的技术也到了炉火纯青的地步了。那么对于对原生了解比较少的小伙伴来说,apk的更新、发包可能还是一笔糊涂账。对于混合开发来讲,一般更新分为两种:h5部分的更新,原生外壳的更新。下面我们来讲一下基于插件的h5部分热更新的实现流程及注意事项。
一、Cordova热更新的原理
1、热更新:
是指不让用户去应用市场上面重新下载安装包,或者重新安装升级包,实现 APP 的更新升级
2、cordova的热更新:
一个 cordova 应用包括(HTML,JavaScript,CSS 文件和其他资源),传统的更新是我 们把我们的程序提交到应用市场,然后用户才可以下载更新。我们每改一个小功能 都需要上传到 appstore 然后用户的手机提示更新下载等等
cordova 的 cordova-hot-code-push 插件让这些原本很复杂很麻烦的工作变得简单。我 们用 codepush 插件可以直接实现不上传 appstore 更新我们的应用
3、原理
cordova-hot-code-push的核心原理说简单的就是以时间戳为h5部分的版本号,以各个文件生成的hash值作为是否更新的依据生成一个配置文件。
核心原理步骤:
1、比较文件系统中h5部分的版本号和本地的版本号。如果文件系统的版本号大于本地,进行下一步,否则不更新;
2、本地各个文件的hash值和服务端文件的hash值,不相同则拉取该文件替换本地文件进行更新;
3、等所有的文件对比完成后,在拉取配置文件生成一个新的h5包;
4、根据设置的更新时机,替换原有的h5包
整个过程的原理图如下:
下面我们来看看插件具体怎么使用吧。
二、热更新插件的使用
1、插件地址
http://www.phonegap100.com/plugininfo_46.html
https://github.com/nordnet/cordova-hot-code-push
2、插件的安装
1)、在APP目录下运行cordova plugin add cordova-hot-code-push-plugin
2)、在APP目录下运行cordova plugin add cordova-hot-code-push-local-dev-addon
3)、安装CLI:npm install -g cordova-hot-code-push-cli
主要是用这个生成检测配置文件,也就是动态生成 chcp.json 和chcp.manifest 生成 两个文件
3、具体操作
**第一步**:新开一个cmd窗口执行cordova-hcp server命令,对应安装的CLI,用来在www目录下生成两个配置文件和检测文件的变化更新配置文件;
chcp.json
{
"autogenerated": true,
"release": "2016.11.29-11.09.38",
"content_url": "https://ad71cba3.ngrok.io",//WWW文件夹所在远程地址
"update": "now"
// start - app启动时安装更新. 默认值.
// resume - app从后台切换过来的时候安装更新.
// now - web内容下载完毕即安装更新.
}
chcp.manifest
[
{
"file": "css/iconfont/iconfont.css",
"hash": "9b801ad1eb80f20265b8cbcc11435707"
},
{
"file": "css/iconfont/iconfont.eot",
"hash": "2bd6f9b32b3606ac39b46dacb0d8427c"
},
....
]
同时会在config.xml文件中添加一个参数:
<chcp>
<config-file url="https://ad71cba3.ngrok.io/chcp.json"/>
<local-development enabled="true"/>
</chcp>
此外还会在项目根目录下有一个文件生成哦.chcpenv:
{
"content_url": "https://ad71cba3.ngrok.io",
"config_url": "https://ad71cba3.ngrok.io/chcp.json"
}
注意事项:config_url为chcp.json文件的地址;content_url为更新包的地址;config.xml中一定要加<local-development enabled="true"/>
这个哦,否则文件修改后不会更新配置文件
第二步:运行cordova build/ionic build。
到这一步客户端热更新的准备工作已经完成了。下面就是服务器端的工作了。
第三步:在cordova-hcp server命令运行着的前提下,修改www下的文件,你会发现dos里面会有更新了哪些文件的信息。同时会发现chcp.json和chcp.manifest文件发生了变化。
第四步:把第三步中的www目录上传到content_url所指向的服务器目录下。然后打开第二步中生成的apk,你会奇迹的发现,页面更新了,变成了你打包后修改的样子了。
以上测试是在window上进行的android项目的热更新测试。先这样吧,后面有时间了再完善。下一篇写写原生外壳的更新吧。