网上有很多关于这方面的资料和说明,但是我并没有找到一个真正能够搭建成功的案例。因此为了让大家别再走弯路,在此我研究了一个上午搭建成功,以此来提高大家的工作效率。
cordova-hot-code-push是一款专门为混合cordova应用开发的一个热更新插件,那么什么是热更新?热更新顾名思义就是,在混合app代码(html、js、css)发生改变的时候,我们不需要重新对app打包再次进行发布,而仅需要通知cordova-hot-code-push插件,代码已经发生了改变,然后cordova-hot-code-push插件就会根据我们指定的代码服务器进行更新相关的代码。这样的好处在于,客户再也不用再到相关的app store去下载新版本的app了,只要客户联网打开了app,app就会自动更新相关代码。这仅仅是用于代码更新上。如果我们所改变的不是代码,而是改变了webview或者说升级了ionic2到了ionic3,那么cordova-hot-code-push还会自动更新吗?毫无疑问cordova-hot-code-push已经无法再次进行自动更新了,但是它可以向客户端推送新的app,并强迫用户下载升级!好了,下面我就用ionic2的项目来说说怎么搭建cordova-hot-code-push和使用。
本次搭建在OS系统中,服务端使用xampp本地搭建而成,当然windows用户也不用紧张,因为操作步骤都是一样的,在windows上你可以使用android模拟器进行测试。
1、首先建立一个ionic项目
当然你得确保你已经安装了nodejs
安装ionic和cordova
npm install -g cordova ionic
我根据官方教程,创建一个tabs项目,输入如下命令
ionic start tab tabs
cd tab
npm install
ionic serve
这样就建立好了ionic项目了。
2、安装cordova-hot-code-push插件(使用全局安装)
npm install -g cordova-hot-code-push-cli
接着在项目根目录安装cordova-hot-code-push-plugin插件
cordova plugin add cordova-hot-code-push-plugin
3、确定本地服务器ip地址
比如我安装的是xampp服务器软件,我通过http://localhost可以直接访问到服务器根目录文件,但是如果我们在模拟器中使用http://localhost和127.0.0.1就无法访问到服务器了。因此我们得获得到本机的ip地址
mac下在终端(命令行)输入ifconfig即可看到如下画面,找到你的ip地址:
windows下的朋友可以使用ipconfig命令进行查看,或者在网络共享中心查看本机IP地址
得到了Ip地址,那就直接使用ip地址访问下本地的服务器,看看能否正常访问,在浏览器中敲入http://192.168.22.62/访问看看,我的结果是这样的
如果你使用的是其他服务器,请自行进行检测。
4、创建cordova-hcp.json模板
cordova-hcp.json主要是为了方便我们以后的操作,不用再去修改www目录下的chcp.json文件,因此这样做主要是为了提高工作效率
在tab项目根目录下新建一个cordova-hcp.json文件,输入如下内容
{
"autogenerated": true,
"name": "tabs",
"min_native_interface": 1,
"content_url": "http://192.168.22.62/tabs",
"ios_identifier":"https://itues.apple.com/cn/***",
"update": "now"
}
参数
autogenerated 默认为true,自动升级的意思
name app的名称
min_native_interface 原生壳(可以理解为原生webview版本),此版本由你自己定义版本号
content_url 更新文件所在服务器的目录地址
ios_identifie 这个是ios app store的地址,作为测试,可以忽略,这个地址是打包后提交的地址
update 更新的情况,now|web内容下载完毕即安装更新;resume|app从后台切换过来的时候安装更新;start|app启动时安装更新(默认值).
5、测试模板生成的www/chcp.json文件是否正确
cd 到项目根目录,执行下面语句
cordova-hcp build
执行后,就可以到www目录下找到chcp.json文件,查看信息,发现多了一行代码:”release”: “2017.06.30-15.27.25″,并且也多了一个chcp.manifest的文件
{
"autogenerated": true,
"name": "tabs",
"min_native_interface": 1,
"content_url": "http://192.168.22.62/tabs",
"ios_identifier": "https://itues.apple.com/cn/***",
"update": "now",
"release": "2017.06.30-15.27.25"
}
其实就是个时间
chcp.manifest则是每一个文件变动后的hash值,cordova-hot-code-push会去检测这个值,如果这个值发生了变动则从服务器下载相关文件进行更新。
到此,我们的模板完成了。
6、修改根目录config.xml
在
native-interface version=”1″,这里的1必须和chcp.json中”min_native_interface”: 1 是一样的,这个1代表了外壳(webview版本)版本。做外壳更新用到此参数。
7、在xcode或安卓虚拟机上运行项目
mac上,输入如下命令
ionic platform add ios
ionic cordova run ios(旧版本的ionic请运行ionic run ios)
windows上由于实现ios环境难,因此就使用android
ionic platform add android
ionic cordova run android(旧版本的ionic请运行ionic run android)
我运行的结果如下(我之前修改过默认项目的文件):
8、内壳(html、js、css)热更新
首先我们修改项目下page/about.html页面,更它增加一些文字,我这里增加的是“this is about page”。
运行命令cordova-hcp build重新生成相关的文件
我们在xampp/htdocs目录下新建一个文件夹名称为tabs,接着我们将ionic根目录下的www内的所有文件拷贝到xampp/htdocs目录下。
在xcode或者安卓虚拟机中将我们的ionic app kill掉,也就是强制退出。
再次打开我们的app,你会看到about页面已经发生了变化,刚才我们添加的文字出现了。
真是屡试不爽啊,热更新真的太方便了。不过这种更新仅仅只是内壳的热更新。
请问下,使用了这个插件,每次app启动,有没有更新都会有10几秒的白屏,这是为什么?怎么解决?
白屏问题请安装cordova plugin add cordova-plugin-splashscreen,config.xml添加如下代码:
[/cc]
[cc lang=”xml”]
app.ts文件中增加如下代码
[cc lang=”javascript”]import { Splashscreen } from ‘ionic-native’;
…….
setTimeout(function () { Splashscreen.hide(); }, 1000);
…….[/cc]
为什么我运行npm install -g cordova-hot-code-push-cli这句代码就报错呢
D:\ionic3\myApp>npm i -g cordova-hot-code-push-cli
npm WARN deprecated crypto@0.0.3: This package is no longer supported. It’s now a built-in Node module. If you’ve depended on crypto, you should switch to the one that’s built-in.
npm ERR! code Z_BUF_ERROR
npm ERR! errno -5
npm ERR! zlib: unexpected end of file
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2019-08-23T08_47_01_483Z-debug.log
此框架已经不再维护了,建议换其他的框架吧!或者直接放弃ionic3吧,建议采用flutter
第一次启动,界面正常显示。
但是第二次启动APP,一直显示白屏,这个怎么解决?
你可以打印一下cordova-hot-code-push的error code看一下是否已经发生了错误
请问,您解决了吗?我上一个APP还能用,现在新的APP 一直无法使用了,全都是IOS第二次启动白屏,用调试,地址打开是错误的,安卓的也无法使用,更新后是新版,但第二次启动,依旧是旧版。
这个插件已经不再进行维护了,主要原因可能是由于iOS平台禁止进行相应的热更新操作,因此可能在iOS10以上版本中,此插件无法正常工作,建议直接使用查找版本号的方法进行下载apk或者跳转到app store下载更新
是的,在Android机器上就第一次更新,更新后再打开依然是旧的数据