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文件中的块下添加
  • 4、启动app

Cordova配置项

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


    

自动加载和安装





配置文件
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、请求成功后资源覆盖本地资源

你可能感兴趣的:(Cordova打包项目热更新)