cordova插件(二)-hot-code-push-plugin

插件介绍

基于cordova框架，我们可以将h5资源打包成app。然后通过热更新插件可以实现h5资源的热更新，而不用重新发布到应用市场，让客户再从应用市场下载。

插件的使用

插件安装

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

从图片可以得知，我们还需要安装cordova-hot-code-push-cli工具，它可以帮助我们更好的进行热更新插件的相关操作。

生成cordova-hcp.json文件

执行下面的命令，并进行相关的参数的配置后，我们就可以得到cordova-hcp.json文件，这个文件决定了插件何时安装热更新内容，插件从何处获取热更新内容。

cordova-hcp init

生成后的cordova-hcp.json内容如下：

{
  "name": "study",
  "ios_identifier": "",
  "android_identifier": "",
  "update": "now",
  "content_url": "http://192.168.3.33:8080/update/study"
}

参数说明：

• name：应用的名称
• update：何时安装
  • start，应用程序启动
  • resume，应用从后台回复
  • now，下载完立即更新
• android_identifier / ios_identifier：对应系统的版本号
• content_url：内容获取地址

生成chcp.manifest和chcp.json文件

cordova-hcp build

执行上面的命令，我们就可以在www目录下面生成chcp.manifest和chcp.json文件。chcp.manifest这个文件记录了我们h5资源每个文件的md5值，而chcp.json文件则是之前生成的cordova-hcp.json文件的一份拷贝，并且多了一个release字段，代表发布时间。

chcp.json文件内容如下：

{
  "name": "study",
  "ios_identifier": "",
  "android_identifier": "",
  "update": "now",
  "content_url": "http://192.168.3.33:8080/update/study",
  "release": "2020.08.10-22.05.21"
}

config.xml配置

在config.xml中加入以下配置，config.xml就是cordova的配置文件。

	<chcp>
    <config-file url="http://192.168.3.33:8080/update/study/chcp.json" />
	<auto-download enabled="true" />
    <auto-install enabled="true" />
    <native-interface version="1" />
	</chcp>

参数说明：

• config-file：热更新文件的服务器地址
• native-interface：cordova外壳的版本，如果不涉及插件的修改，这个版本不变。

查看运行结果

查看热更新之后的结果

这里我们先修改index.js，让其启动的时候打开百度的页面，而不是博客园的页面。

var app = {
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },
    onDeviceReady: function() {
        this.receivedEvent('deviceready');
    },
    receivedEvent: function(id) {
        var url = 'https://www.baidu.com/';
        //使用App内置浏览器
        cordova.InAppBrowser.open(url, '_blank',  'location=no');
    }
};
app.initialize();

重新生成chcp.manifest和chcp.json文件

执行命令，重新生成chcp.manifest和chcp.json文件后，将www下面的整个目录拷贝到chcp.json中content_url指定的路径。

重新启动app后，查看结果

热更新原理

1. 手机app启动
2. 热更新插件初始化，并在后台加载更新模块。
3. 更新模块从 Cordova 项目配置 config.xml 文件中获取 config-file （热更新插件配置文件 chcp.json 的加载路径），然后加载配置文件 chcp.json，获取其中的 release 版本号，与app当前版本号对比，若二者不同，说明有新版本。
4. 更新模块从 chcp.json 配置文件中获取 content_url 作为 base url，然后加载 chcp.manifest 文件，获取新版本文件变更信息。
5. 更新模块根据 content_url 作为 base url，下载所有变更、新增文件。
6. 如果一切顺利， 更新模块发送通知，该更新已准备好进行安装。
7. 安装更新，应用重定向到新版本页面。

博主微信公众号