cordova之HybirdApp热更新

1.4k5WEBcordova2018-08-302024-12-07

关于热更新

热更新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文件

{
  "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中添加

<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

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