浅尝辄止的Ionic热更新技术 Hot Code Push

June 6, 2018 • Read: 1936 • Note



  • 花里胡哨的Null, Undefined, Never数据类型
  • 变量结构赋值(destructuring)
  • 接口可以继承一个类
  • 和Swift一样好用的闭包

之外,其他还算简单,很多语法糖(Syntactic suga)和Swift惊人的相似,以至于几乎一样。


*由我精通混合开发的好朋友推荐:TypeScript入门 这本好书,适合深入了解TypeScript的用法。



ionic native

首先,也是最重要的,喷一下ionic,界面等虽然整体给人感觉不错,但是有些东西用起来真的蛋疼,比如说热更新。官方的Hot Code Pushgithub wiki,讲的没话可说,两年不更新不谈,现在命令都不兼容了,比较过分,参考价值不大。


Ionic Hot Code Push on your service


  • Private service
  • Visual Studio

Install required packages

$ npm install -g cordova-hot-code-push-cli

1. Create a blank ionic project

$ ionic start Test blank

2. Generate latest www directory

$ cd Test
$ ionic serve

serve will build your ionic project and generate it to js code etc. in www/ directory. This code contains UI and all functionality of your ionic.

3. Add Hot Code Push config file

$ cordova-hcp init

You can press Enter when Please provide is not required.

Running init
Please provide: Enter project name (required): Test
Please provide: Amazon S3 Bucket name (required for cordova-hcp deploy):
Please provide: Path in S3 bucket (optional for cordova-hcp deploy):
Please provide: Amazon S3 region (required for cordova-hcp deploy): (us-east-1)
Please provide: IOS app identifier:
Please provide: Android app identifier:
Please provide: Update method (required): (resume) now
Please provide: Enter full URL to directory where cordova-hcp build result will be uploaded: <YOUR WWW DIRECTORY URL ON SERVER>
Project initialized and cordova-hcp.json file created.
If you wish to exclude files from being published, specify them in .chcpignore
Before you can push updates you need to run "cordova-hcp login" in project directory

make sure you replaced <YOUR WWW DIRECTORY URL ON SERVER> with your www/ url on your server.


"content_url" is your www/ url.

"update" has three types: now, start, resume.

Your app will judge whether there is something to update on your server every time you launch it.

now: Check for update immediately.

start: Check for update next tie you launch the app.

resume: Check for update when app did become active from background.

4. Add profile into project

$ cordova-hcp build


Through this procedure, the project will generate chcp.manifest and chcp.json in www/.

chcp.manifest record hash value of your files.By comparing hash value with it on the server, the project will decide if the file need to be updated.

5. Upload www components to server

Using STFP protocol or server administration GUI to upload www/ directory to <YOUR WWW DIRECTORY URL ON SERVER> you set in cordova-hcp.json. Make sure you can view your app by the address "content_url" in "cordova-hcp.json".


You may compress www/ directory, upload the zip file and unzip it in the server.

Then you can view your chcp.json file of the address <YOUR WWW DIRECTORY URL ON SERVER>/chcp.json in browser.

web json

6. Install Hot Code Push plugin into project

$ ionic cordova plugin add cordova-hot-code-push-plugin

There is no need to install cordova-hot-code-push-local-dev-addon, which is recomended by the official site .

7. Config json file in xml

add config-file url in config.xml in the root directory of project.

    <config-file url="<YOUR WWW DIRECTORY URL ON SERVER>/chcp.json" />


8. Build and run your app


$ ionic cordova platform add android
$ ionic cordova run android


$ ionic cordova platform add ios
$ ionic cordova run ios

Then you can see the app running on real device or simulator.

9. Post Hot Code Push

When user starts the app for the first time - it copies all the web files onto the external storage. From this moment all pages are loaded from the external folder and not from the packed bundle. On every launch plugin connects to your server and checks if the new version of web project is available for download. If so - it loads it on the device and installs on the next launch.

  • Change the code in any pages


  • Build the changes
$ ionic build

This will synchronize changes to www/.

  • Regenerate profile
$ cordova-hcp build

This will update hash value and time stamp for json file.

  • Upload www/ to server again

All is done until this step. After a few seconds, you'll changes on your device or simulator without rebuild the app and run on it, the interface will automatically refresh instead.

Last Modified: September 20, 2019
Archives Tip
QR Code for this page
Tipping QR Code