使用JS控制Cordava热更新过程[cordova-hot-code-push-plugin]

概要

cordova-hot-code-push-plugin（以下简称chcp）本身已经支持自动检查更新、下载、安装，具体内容可以搜索“cordova热更新”，或查看官方wiki。本文主要介绍如何使用chcp提供的JS API控制整个热更新过程，包括其中一些注意事项。本文仅针对安卓，iOS暂未验证。

需求背景

1. 显示更新内容（弹窗）
2. 可手动检查更新（点击按钮）

存在的问题

chcp提供的API基本能满足大部分功能，但为了满足需求还需要解决以下问题：

1. 官方没有提供显示更新内容的方法
2. 检查更新时，如果有更新，会等到下载完成才执行回调函数，导致操作长时间没有反馈；另一方面，如果有error（正在更新等），回调函数又会立即执行

思路

针对问题1：在配置文件chcp.json中新增字段表示更新内容，并通过直接请求或调用API获取，比如"message":"1. bug修复..."，并在具体流程中展示弹窗（本文是在更新内容下载完成后，也可以在检查到有更新的时候）

针对问题2：单独请求服务端的chcp.json，并跟本地的版本比较，不同就认为有更新，可以立即反馈给用户

API验证

getVersionInfo((err, data) => {...}) 获取版本信息

data.currentWebVersion 对应www/chcp.json中的release，本地配置，就是比较版本要用到的
data.readyToInstallWebVersion 本次要安装的版本，为空可能是没有获取到服务端配置，或者已是最新版
data.previousWebVersion 更新后的上一个版本，为空说明还没有更新过
data.appVersion 版本号，对应config.xml中的widget的version，本地配置
data.buildVersion 构建版本号，本地配置

实际测试，只要服务端的release字段和本地的currentWebVersion不同，chcp就认为需要更新，而不会检查appVersion或者buildVersion是否相同（chcp.json中也没有这两个字段）。

fetchUpdate((err, data) => {...}, options) 获取更新

如果有更新，fetchUpdate只有在下载完成所有更新后才执行回调函数。如果正在下载更新，回调函数会立即执行，err.code为-17。为了区分上述两种情况且只有一次提示，首次检查到有更新时，提示可以使用setTimeout延时，回调函数执行时，先clearTimeout，再执行有error时的提示。

需要注意的是，下载成功后，回调函数中data的内容如下：

{
    config: '"release":"xxx",...'
}

其实就是把chcp.json的内容作为字符串作为config属性的值。如果要获取里面的值，需要做一次JSON解析。

isUpdateAvailableForInstallation((err, data) => {...}) 检查本地是否有可供安装的更新

如果没有调用过fetchUpdate，或者已经是最新版，则error存在，表示没有可以安装的更新，需要获取更新，具体参见官方示例。

installUpdate((err) => {...}) 执行安装

整体流程

1. 比较本地和服务端版本，版本不同 -> 2
2. 检查本地是否有可安装的更新，没有 -> 3，有 -> 4
3. 从服务端下载更新，会有以下几种情况：
   a. 没有更新（一般不会出现，除非1到3之间，server版本回退了...）
   b. 正在下载更新中（没下载完成的时候，点击“检查更新”）
   c. 不能使用热更新，需要更新包（原生代码有修改的时候，热更新已经不能向后兼容）
   d. 其他错误
   e. 正常下载完成 -> 4
4. 弹窗显示更新内容，用户点击“立即体验”后，安装更新，安装成后会直接刷新，目测是跳转到index

另外，最好将自动下载和自动安装关闭，防止冲突：

config.xml

  
  

具体代码

// 获取本地的currentWebVersion，并和服务端的release比较
function compareVersion(serverVersion) {
  return new Promise((resolve, reject) => {
    window.chcp.getVersionInfo((error, data) => {
      console.log('getVersionInfo', data);
      if (error) {
        reject(error)
      } else {
        resolve(data.currentWebVersion === serverVersion);
      }
    });
  });
}
// 请求服务端chcp.json
function checkUpdate() {
  const url = "https://yourserver/chcp.json";
  fetch(url).then(res => res.json()).then(data => compareVersion(data.release)).then(isEqual => {
    if (isEqual) {
      toast('已是最新版');
    } else {
      // 流程2，检查是否有可安装更新
      checkAvalilable();
    }
  }).catch((error) => {
    console.log('checkUpdate failed', error)
  });
}
// 检查是否有可安装的更新
function checkAvalilable() {
  console.log('checkAvalilable');
  window.chcp.isUpdateAvailableForInstallation((error, data) => {
    if (error) {
      console.log('isUpdateAvailableForInstallation error', error);
      checkHotUpdate();
      return;
    }
    // 已有可安装版本
    beforeInstallAlert();
  });
}
// 获取更新
function checkHotUpdate() {
  console.log('checkHotUpdate');
  const waitingId = setTimeout(() => {
    toast('有新版，开始更新');
  }, 200);
  window.chcp.fetchUpdate((error, data) => {
    if (error) {
      console.log('fetchUpdate error', error);
      clearTimeout(waitingId);
      if (error.code == 2) {
        toast('已是最新版');
      } else if (error.code == -17) {
        toast('正在下载更新中...');
      } else if (error.code == -2) { 
        // 需要下载apk
      } else {
        toast(`出错了: ${error.code}`);
      }
      return;
    }
    // 服务器版本信息
    console.log('fetchUpdate data', data);
    // JSON解析config
    const config = data && data.config && JSON.parse(data.config);
    console.log('fetchUpdate config', config);
    // 下载完成，message为自定义字段，表示更新内容
    beforeInstallAlert(config && config.message);
  });
}

function beforeInstallAlert(message) {
  // 弹窗逻辑，点击“立即体验”调用installUpdate()
}

function installUpdate() {
  console.log('installUpdate');
  window.chcp.installUpdate((error) => {
    if (error) {
      console.log('installUpdate error', error);
      toast(`安装失败: ${error.code}`);
      return;
    }
    console.log('installUpdate done');
  });
}

其他

err.code参见Error codes