MENU

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

June 6, 2018 • Read: 1018 • Note

前言:

作为一枚iOS的大学生攻城狮,最近了解了一下iconic的混合开发技术。一开始以为门槛很高,结果发现混合开发的TypeScript语法和Swift几乎没得差,除了TypeScript中有一些骚操作诸如

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

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

本文只是一篇热更新技术的学习笔记,详细内容请参考:

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

*我认为国内写的几乎最好的热更新指导文档


入门TypeScript语法花了两三天,开始写ionic到写出我自己的第一个混合开发的demo花了不到两天的时间。作为一个只接触一丢丢html和css等前端知识的人感觉还算挺简单,但是3天后,由于突然到来的需求和一年前就已经开始觉得遥不可及的技术----热更新,心血来潮的我决定一定要把它实现出来,哪怕只是个小小的demo。没想到这坑入的简直是噩梦,独自一人在还没有学会走路的情况下就开始准备起飞,这三四天过的生不如死,热更新就是过不去的那道坎,狮生中第一次遇到的技术难点,直到坚持到了最后解决的那一刻,回过头来发现踩的坑太多太多。

ionic native

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

以下开始介绍ionic热更新技术的详细内容,具体操作以及创建demo。


Ionic Hot Code Push on your service

Requirements:

  • 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.

cordova-hcp

"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

manifist

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".

Tip:

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.

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

config-xml

8. Build and run your app

Android

$ ionic cordova platform add android
$ ionic cordova run android

iOS

$ 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

after-change

  • 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