Cordova打包项目热更新

热更新:当用户初次打开app,它会将所有的web内容复制一份到外部存储。此后从外部存储加载web内容,而并不加载打包在app内部的web内容。app每次启动都会连接服务器检查更新并下载新的web内容。如果下载了更新,此次更新内容将会在下次app启动时生效。

安装cordova

需要安装cordova5.0+

cordova plugin add cordova-hot-code-push-plugin

此命令下会方便生成必需的app配置文件
启动本地服务器,监听开发模式下的web内容变更,并直接部署新版本。

Cordova项目快速向导

1、创建新的Cordova项目,并添加android和ios platform;

cordova create TestProject com.won.testproject TestProject

cordova platform add android

2、添加插件:

cordova plugin add cordova-hot-code-push-plugin

3、添加开发扩展

cordova plugin add cordova-hot-code-push-local-dev-addon

4、安装Cordova Hot Code Push命令行客户端

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

5、启动本地服务器

cordova-hcp server

6、打开新的控制台,进入到项目根目录运行app

cordova run android

更新机制的流程图

1、用户打开你的app。

2、插件初始化,在后台进程启动升级加载器(update loader)。

3、Update loader从config.xml取config-file配置一个url,并从此url加载一段json配置,然后它把这段json配置中的release版本号和当前的app已经安装的进行比较。如果不同进行下一步。

4、update loader使用app配置(application config)中的content_url,去加载清单文件(manifest)。它会找出自上次升级以来,哪些文件需要更新。

5、update loader从content_url下载更新文件。

6、如果一切顺利,发出一个“升级文件已经准备好,可以安装了”的通知。

7、升级文件已安装,app重新进入更新过的页面。

web内容是如何存储和更新的

每一个Cordova项目下都有一个www目录,这里存放所有的web内容。当cordova build执行后,www的内容会拷贝到对应的platform的www目录下。于是这些文件被打包到了app,app里的文件是只读的,不可改变,所以在app第一次启动的时候,将内置的web内容(www目录)复制到外部存储。我们不想在拷贝过程中阻塞ui。我们还是会先加载app内置的index.html。但是下一次启动和更新,我们就从外部存储加载index.html。

注:如果app外壳需要增加新的Cordova插件或者原生功能,必须重新上架外壳App到应用商店。

app配置文件

1、chcp.json里面有个release设置,这个指明了web内容的版本。它由命令行客户端自动生成,格式是年月日
每次发布,插件在外部存储自动生成一个以这个release版本为名字的目录,然后把web内容全部放到这里面。release版本号成了url的一部分。

注:修改了一些文件,重新启动了app,但是看到的是旧的页面,原因是插件用的是旧版本的web内容(外部存储中)。若要清除缓存。

2、我们发布新版之后,插件需要下载新的web文件,发生情况如下

  • 1、在外部存储创建一个以新的release版本号为名字的目录
  • 2、在目录里面,又创建了一个update目录
  • 3、所有根据chcp.manifest更新的文件,都被下载到了这个update目录内
  • 4、新的chcp.manifest和chcp.json也被放到了update目录内
  • 5、新的web内容已准备安装

安装更新

  • 1、将使用的release版本目录内的内容拷贝到新的release版面目录下,新建的www目录下
  • 2、从update目录下拷贝新的web内容和配置文件,到www目录。
  • 3、移除update目录
  • 4、加载新的release版本index.html

Cordova Hot Code Push 命令行客户端

  • 生成chcp.json和chcp.manifest文件
  • 运行本地服务,开发时可以检测更新,并发布新的release版本,使得可以在设备上实时更新web内容
  • 部署你的web内容到外部服务器上

本地开发扩展

  • 1、web项目做一些改动
  • 2、执行cordova run 启动app
  • 3、稍等一会查看运行结果

本地配置流程

  • 1、添加cordova插件(Hot Code Push Local Development Add-on)
  • 2、启动本地服务cordova-hcp server
  • 3、在你的项目的config.xml文件中的<chcp />块下添加<local-development enabled='true' />
  • 4、启动app

Cordova配置项

在根目录下的config.xml文件进行配置

<chcp>
    <config-file url="https://e4c6b23c.ngrok.io/chcp.json" />
</chcp>

自动加载和安装

<chcp>
<auto-install enabled="false" />
<auto-download enabled="false" />
</chcp>

配置文件
chcp.json和chcp.manifest

Application config app配置

最新版本的release信息,放在www目录下,文件名为chcp.json,这个文件也被打包到外壳app内。
执行cordova-hcp命令,自动生成chcp.json和chcp.manifest文件

cordova-hcp init

执行此命令发布新的release版本

cordova-hcp build

注:cordova的热更新,在什么情况下,需要更新app外壳。

update
  • start App启动时安装更新
  • resume app从后台切换过来的时候安装更新
  • now web内容下载完毕即安装更新
android_identifier(鉴定人)

apk报名,如果指定了,引导用户到Google Play Store的app页面

Content manifest内容清单

内容清单描述了web项目所有文件的状态
根据这个清单,插件才知道什么文件被移除了,什么文件更新或新增了。

  • 更新从服务端下载的web内容文件
  • 安装时删除服务端不存在(已移除)的文件

生成chcp.manifest文件的命令

cordova-hcp build

Build options build设置

如果想在使用build命令的时候改变插件的位置,那么需要使用chcpbuild.options文件。文件必须位于Cordova项目根目录

{
  "dev": {
    "config-file": "https://dev.company_server.com/mobile/www/chcp.json"
  },
  "production": {
    "config-file": "https://company_server.com/mobile/www/chcp.json"
  },
  "QA": {
    "config-file": "https://test.company_server.com/mobile/www/chcp.json"
  }
}

build app的时候,转为开发要使用的服务器,可执行

cordova build -- chcp-dev

执行此命令后,cofig.xml文件中的chcp配置就会得到变动

当需要上架app的时候,我们build的命令

cordova build --release

热更新流程

1、app启动

2、从服务器请求chcp.json文件,覆盖本地的chcp.json文件

3、服务器返回的chcp.json文件与app里的chcp.json文件做对比,判断release版本

4、如果服务器chcp.json文件的release时间大于app里的chcp.json的release时间,就更新资源

5、发送请求,更新服务器的chcp.manifest文件

6、服务器返回chcp.manifest文件与app里的chcp.manifest文件内容对比

7、如果有不一样的hash值

8、对服务器请求新的资源

9、请求成功后资源覆盖本地资源

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,539评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,911评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,337评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,723评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,795评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,762评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,742评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,508评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,954评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,247评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,404评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,104评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,736评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,352评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,557评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,371评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,292评论 2 352

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,647评论 18 139
  • 做过移动端native开发的朋友,都应该知道版本的发布是件让人挺头疼的事来的。尤其iOS的版本发布,不但要...
    Jock58阅读 4,262评论 5 1
  • 简介 关于Cordova的热更新问题,国内的资料比较少,许多博客上都是胡乱的抄袭,准确性极低,无任何实用性,并且步...
    cl9000阅读 6,341评论 10 15
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,032评论 25 707
  • 通过一生的努力,我们只是证明了:是你的,就是你的。你想甩,也甩不掉。不是你的,就不是你的。你想得,也得不到!所有的...
    再凑热闹阅读 103评论 1 2