ionic中使用热更新插件cordova-hot-code-push

2017/06/30ionic 标签:2

网上有很多关于这方面的资料和说明,但是我并没有找到一个真正能够搭建成功的案例。因此为了让大家别再走弯路,在此我研究了一个上午搭建成功,以此来提高大家的工作效率。
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地址:

Mac下查看ip地址

Mac下查看ip地址


windows下的朋友可以使用ipconfig命令进行查看,或者在网络共享中心查看本机IP地址
得到了Ip地址,那就直接使用ip地址访问下本地的服务器,看看能否正常访问,在浏览器中敲入http://192.168.22.62/访问看看,我的结果是这样的
xampp本地搭建服务器

xampp本地搭建服务器


如果你使用的是其他服务器,请自行进行检测。

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

中加入如下代码:

  <chcp>
    <native-interface version="1" />
    <config-file url="http://192.168.22.62/tabs/chcp.json" />
  </chcp>

config.xml文件

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)
我运行的结果如下(我之前修改过默认项目的文件):

ios下运行ionic项目

ios下运行ionic项目

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页面已经发生了变化,刚才我们添加的文字出现了。

热更新

热更新


真是屡试不爽啊,热更新真的太方便了。不过这种更新仅仅只是内壳的热更新。

9、外壳热更新(待续...)

2个 评论 关于 ionic中使用热更新插件cordova-hot-code-push

  1. zzj says:

    请问下,使用了这个插件,每次app启动,有没有更新都会有10几秒的白屏,这是为什么?怎么解决?

    • king2088 says:

      白屏问题请安装cordova plugin add cordova-plugin-splashscreen,config.xml添加如下代码:

      <preference name="AutoHideSplashScreen" value="false"/>
      <preference name="ShowSplashScreenSpinner" value="false"/>
      <preference name="SplashMaintainAspectRatio" value="true"/>
      <preference name="SplashShowOnlyFirstTime" value="false"/>
      <preference name="SplashScreenDelay" value="6000"/>
      <preference name="FadeSplashScreen" value="false"/>

      app.ts文件中增加如下代码

      import { Splashscreen } from 'ionic-native';
      .......
         setTimeout(function () { Splashscreen.hide(); }, 1000);
      .......

发表评论

电子邮件地址不会被公开。 必填项已用*标注

89 + 3 = ?