cordova之HybirdApp热更新
1.4k5WEBcordova2018-08-30

关于热更新

热更新App常用的更新方式。简单来说,就是在用户通过App Store下载App之后,打开App时遇到的即时更新

热更新就是动态下发代码,它可以使开发者在不发布新版本的情况下,修复 BUG 和发布功能,也可以绕开App Store和各种商店的审核机制,避免长时间的审核等待以及多次被拒造成的成本,也能针对顽固用户进行强制更新

关于插件

cordova插件

1
cordova plugin add cordova-hot-code-push-plugin --save

添加Cordova Hot Code Push Plugin CLI客户端github文档链接
用处:自动生成Hot Code Push插件(chcp.json和chcp.manifest)所需的配置文件
 运行本地服务器检测内容变更部署到服务器(关于自动部署看到有大佬说因为国内网络问题。。。但是我没试过因为没有aws服务器)

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

更新流程

1、根据Update method的设置(后面会提到改配置,假设是resume)恢复应用程序(从后台移动到前台状态)或启动时

2、插件初始化,在后台加载更新模块(Update loader)

3、Update loader 从cordova项目配置文件config.xml中获取config-file也就是插件配置文件chcp.json 的加载路径,然后加载chcp.json获取到release 版本号,对比当前的版本号,若二者不同,说明有新版本

4、有新版本时Update loader会从chcp.json中获取rcontent_url并从中下载web静态文件

自动化更新

1、初始化

插件添加成功后在项目根目录执行init命令进行初始化生成配置文件

1
cordova-hcp init

执行时会需要填写一些首选项除了第一个project name项目名称和最后一个为必填以外其他都可以回车
** 最后一个参数 ** “Enter full URL to directory where cordova-hcp build result will be uploaded:”这个是服务器的url,也就是更新时app从服务器下载资源的路径

** 关于倒数第二个参数 ** :Update method - 何时执行更新,默认为resume

  • start - 启动应用程序时安装更新
  • resume - 恢复应用程序(从后台移动到前台状态)或启动时安装更新
  • now - 从服务器加载后立即安装更新

执行成功后可以看到项目根目录多出一个cordova-hcp.json文件

1
2
3
4
5
6
7
{
"name": "dzbp", // 项目名称
"ios_identifier": "", // android
"android_identifier": "", // App Store上的应用程序ID。用于将用户重定向到商店的应用程序页面。
"update": "resume", // 在Google Play上引用应用的应用包名称
"content_url": "https://www" // web静态资源在服务器的地址
}

2、构建命令

1
cordova-hcp build [Web项目路径不指定默认为www目录]

执行完成后会在你的web目录下会生成两个配置文件

  • chcp.json : 持有发布相关信息
  • chcp.manifest : 保存有关Web项目文件的信息:它们的名称(相对路径)和哈希值, 根据它插件查知道文件的增删改

3、修改配置

在config配置中加入chcp.json文件在服务器的地址

1
2
3
<chcp>
<config-file url="http://www/chcp.json"/>
</chcp>

最后使用cordova build打包

app的配置就完成了,每次代码修改后只需要把代码放到服务器上,app会自动检测

用户选择性进行更新?

在项目配置文件config.xml中添加

1
2
3
4
5
<chcp>
<auto-download enabled="false" /> // 取消自动下载
<auto-install enabled="false" /> // 取消自动安装
<config-file url="http://120.24.77.175:8080/ehospital/views/MSUI/chcp.json" />
</chcp>

下面是一个完整的代码示例,用到了3个api

** chcp.fetchUpdate(Callback,options) 检查更新 **

  • Callback接收两个参数:
     error:若存在不为null表示没有更新版本,或者在更新检查期间发生错误
     data:从本机端发送的其他数据
  • options:请求的其他选项。如果未设置 - 使用首选项config.xml

** chcp.isUpdateAvailableForInstallation(Callback) 检查是否已加载更新并可以安装 **

  • Callback接收两个参数:
      error:若存在不为null表示没有加载更新或者无需安装
      data:{
        CURRENTVERSION:当前版本
        readyToInstallVersion:准备安装版本
      }

** chcp.installUpdate(Callback) 检查是否已加载更新并可以安装 **

  • Callback只有一个参数那就是error,若不为null表示安装失败包含失败信息否则便是成功

错误代码详情  jsAPI

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
document.addEventListener("deviceready", onDeviceReady, false)
function onDeviceReady() {
let chcp = window.chcp
chcp.fetchUpdate((error, data) => { // 检查更新
alert(data)
if (error) {
alert('error', error.code, error.description) // 表示没有更新版本,或者其他错误
} else chcp.isUpdateAvailableForInstallation((error, data) => { // 检查是否已加载更新并准备安装
if (error) {
alert('No update was loaded => nothing to install')
} else {
if ( window.confirm('检测到新版本,是否更新') ) {
chcp.installUpdate((error) => { // 安装更新
if (error) {
alert('Failed to install the update with error code: ' + error.code)
alert(error.description)
} else {
alert('Update installed!')
}
});
} else {
window.alert('您已拒绝更新')
}
alert('Current content version: ' + data.currentVersion)
alert('Ready to be installed:' + data.readyToInstallVersion)
}
})
})
}

参考文章

Cordova Hot Code Push Plugin CLI client https://github.com/nordnet/cordova-hot-code-push-cli

cordova-hot-code-push wiki https://github.com/nordnet/cordova-hot-code-push/wiki/Update-workflow

Cordova 代码热更新 https://www.jianshu.com/p/55fd5e9f96ea