Ionic2跨平台项目(四)热修复(本地测试)

时间:2021-05-08 23:02:38

一、技术背景

本文主要探讨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、可以为所欲为了。


Ionic2跨平台项目(四)热修复(本地测试)

参考:

1、插件地址:https://github.com/nordnet/cordova-hot-code-push