Cordova

Cordova打包项目热更新

2017-11-23  本文已影响203人  方千竹

热更新:当用户初次打开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文件,发生情况如下

安装更新

Cordova Hot Code Push 命令行客户端

本地开发扩展

本地配置流程

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
android_identifier(鉴定人)

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

Content manifest内容清单

内容清单描述了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、请求成功后资源覆盖本地资源

上一篇 下一篇

猜你喜欢

热点阅读