一、技术背景
本文主要探讨github一个有名的插件:cordova-hot-code-push,其用于实现cordova项目热修复,具体做法在github上写的很清楚,本文主要简单介绍一下用法和其在Ionic2环境如何使用。
这个插件主要用于实现对app上基于web的内容进行动态更新,从根本上来说,就是使用这个插件以后,所有存在www文件夹里的内容都可以动态更新。
二、应用场景
当你把应用发布到应用市场,把包括html文件、js代码、图片等等基于web的东西打包进app后,有两种方法可以更新这些内容:
1、在应用市场发布新版本。但是会花费一定时间,尤其是苹果的AppStore。
2、牺牲掉离线特性,让所有页面都在线加载。但是有一个缺点:如果网络连接状态差,app就没法用。
本插件可以解决这个问题,当用户首次启动app,它把所有web文件拷贝一份放进一个外部储存空间,从此时开始,所有页面都从这个外部文件夹加载,而不是从app包;在每次启动后,插件连接你的服务器,检查web项目的新版本是否可供下载,如果有,插件会把它存到设备上,在下次启动时安装。
经过这个过程,app尽可能及时地接受web内容的更新,而且可以在离线情况下正常使用。同时,这个插件允许你自定义web发布版和本地版各自的依赖库,从而确保新发布的版本可以在旧版的app上正常工作。
能否兼容AppStore:要看你与应用的内容通信是出于什么目的,不要要求用户去点击按钮来更新web内容。
三、安装过程
1、首先下载并安装Ionic2项目,参见http://blog.csdn.net/gaoqinghuadage/article/details/58146071。
2、安装热修复插件:
$ cordova plugin add cordova-hot-code-push-plugin
3、安装热修复本地开发插件:
$ cordova plugin add cordova-hot-code-push-local-dev-addon
4、安装cordova热修复CLI:
$ npm install -g cordova-hot-code-push-cli
5、启动本地服务器:$ cordova-hcp server成功启动后会看到类似内容:
Running server
Checking: /Cordova/TestProject/www
local_url http://localhost:31284
Warning: .chcpignore does not exist.
Build 2015.09.02-10.17.48 created in /Cordova/TestProject/www
cordova-hcp local server available at: http://localhost:31284
cordova-hcp public server available at: https://5027caf9.ngrok.com
6、打开一个新的终端窗口,cd到项目目录,启动app:
$ ionic run ios
7、那么问题来了,按照github上的介绍,此时打开和src目录平级的www文件夹,修改里边的内容,就可以直接在真机或者模拟器看到修改的内容了。但是这仅限于ionic1项目,Ionic2中,项目启动方式不同了,该www文件夹中不再存有和app包里的www文件夹相同的源码,这该如何是好?
8、Ionic2中,外部的www文件夹存有ts源码编译后的js代码,全部在www/build/main.js,大概有十万多行,在其中同样可以对js代码做修改,只不过几十几百个文件从ts转成js然后放在同一个文件,不是很好找(目前我除了Cmd+F没有找到别的方法)。试着修改一下,点保存,可以在终端看到:
File changed: /Users/xxxx/xxxx/xxxx/www/build/main.js
Build 2017.03.20-16.35.52 created in /Users/xxxx/xxxx/xxxx/www
Should trigger reload for build: 2017.03.20-16.35.52
Starting file download: https://98db80f6.ngrok.io/build/main.js
经过大概四五十秒,控制台输出:
DEVICE READY FIRED AFTER 861 ms
然后一道白光闪过,正在运行的app已经变了。
9、可以为所欲为了。
参考:
1、插件地址:https://github.com/nordnet/cordova-hot-code-push