Cordova 热更新-(cordova-plugin-code-push)

前言

  • 什么是热更新?热更新就是动态下发代码,它可以使开发者在不发布新版本的情况下,修复 BUG 和发布功能.用户毫无感知,还可以绕过某些应用商店的长时间审核
  • ionic实现热更新的插件有好几个,本文以微软公司提供的热更新插件(cordova-plugin-code-push)为例.
  • 大公司提供的服务坑少,我在集成的过程中很顺利,只是集成步骤比较多,各位只要认真阅读文档都可以成功
  • 苹果App允许使用热更新Apple's developer agreement, 为了不影响用户体验,规定必须使用静默更新。 Google Play不能使用静默更新,必须弹框告知用户App有更新。中国的android市场必须采用静默更新(如果弹框提示,App会被“请上传最新版本的二进制应用包”原因驳回)。
  • 还有另外一个热更新的插件,但是已经在2018.09.30宣布不再维护了,可以了解下(cordova-hot-code-push)

环境准备

  • 全局安装 code-push-cli

npm install -g code-push-cli

注:code-push-cli是连接热更新服务端的工具,我们把要更新的代码上传至服务端,客户端(我们的app)安装cordova-plugin-code-push插件来从服务端下载代码.

登录code-push服务端

  • 使用code-push login命令会打开浏览器窗口让我们登录code-push服务端
  • 我这里用github帐号登录,你也可以使用其他帐号,登录成功会返回一个权限token


    4108891-9ac1998fa50993ea.png
4108891-a1b5134dabeba158.png
  • 复制token粘帖到命令行工具中,回车则会登录成功


    2019-01-07_09-41-01.png

使用code-push-cli在服务端创建应用

  • 使用命令code-push app add <appName> <os> <platform>创建应用;前面说过我们要部署代码到热更新服务端;<appName>建议以app名称加"_android"或"_ios"后缀,以防忘记
  • 如下图,给app在服务端分别创建了android和ios的cordova应用.默认为每个应用生成两种部署类型("Production"和"Staging"),我们就用这两种类型分别代表生产环境和开发环境,请记下你生成的这四个key值,key是用来连接客户端和服务端的

code-push app add test_ios ios cordova
code-push app add test_android android cordova

2019-01-07_09-44-33.png

注:也可以在web端查看/管理app,传送门

App环境准备

  • 进入app目录,安装热更新插件及插件依赖

cordova plugin add cordova-plugin-code-push

  • 查看是否安装白名单插件cordova plugin list,如果没有安装请安装ionic cordova plugin add cordova-plugin-whitelist

  • 在config.xml添加如下配置允许与CodePush服务器通信

<access origin="*" />

或者

<access origin="https://codepush.azurewebsites.net" />
<access origin="https://codepush.blob.core.windows.net" />
<access origin="https://codepushupdates.azureedge.net" />

App代码准备

  • 在 config.xml 添加 deploymentkey,key和平台是对应的。
<platform name="android">
    <preference name="CodePushDeploymentKey" value="YOUR-ANDROID-DEPLOYMENT-KEY" />
</platform>
<platform name="ios">
    <preference name="CodePushDeploymentKey" value="YOUR-IOS-DEPLOYMENT-KEY" />
</platform>
2019-01-07_09-51-41.png
  • 添加后重新 build 项目。

cordova build

  • 在app启动的时候调用code-push同步方法

window.document.addEventListener('deviceready', function () {

  console.log('deviceready')

  window.codePush.sync(syncStatus, null, downloadProgress);

  function syncStatus(status) {
    switch (status) {
        case SyncStatus.DOWNLOADING_PACKAGE:
            // Show "downloading" modal
            break;
        case SyncStatus.INSTALLING_UPDATE:
            // Hide "downloading" modal
            break;
    }
  }

  function downloadProgress(downloadProgress) {
      if (downloadProgress) {
        // Update "downloading" modal with current download %
          console.log("Downloading " + downloadProgress.receivedBytes + " of " + downloadProgress.totalBytes);
      }
  }
})

注:codePush.sync更多用法

发布更新

  • 进入项目的根目录下,使用 code-push release-cordova <appName> <platform> 发布应用

code-push release-cordova test_ios ios -m --description "ios code push"
code-push release-cordova test_android android -m --description "android code push"

注:每次向App Store提交新的版本时,也应该基于该提交版本同时向code-push-server发布一个初始版本。(因为后面每次向code-push-server发布版本时,code-puse-server都会和初始版本比较,生成补丁版本)

  • 使用命令code-push deployment list <appName>查看发布状态

code-push常用命令

//给app在热更新服务器上创建应用
code-push app add <appName> <os> <platform> 

//删除应用
code-push app rm <appName>

//查看热更新服务器上有哪些应用
code-push app list

//发布应用
code-push release-cordova <appName> <platform> [options]
 Options参数:
  --deploymentName, -d ..指定部署的类型.默认"Staging",可以选择"Production"或其他  自定义类型
  --description, --des ..添加描述
  --mandatory, -m .......指定此版本是否为强制更新版本
  例1:发布更新
  code-push release-cordova ionic2_tabs_android android --des ""
  例2:部署"Production"状态的更新,即生产环境的热更新部署使用这句命令
  code-push release-cordova ionic2_tabs_android android  -d "Production" --des ""
  注意:一般生产环境的app是压缩过的,所以在发布正式环境热更新之前,先执行"ionic build --prod"压缩代码
  例3:部署ios应用的更新
  code-push release-cordova ionic2_tabs_ios ios --des ""
  例4:添加-m参数强制更新,code-push插件从服务端下载完代码,会立即自动重启app
  code-push release-cordova ionic2_tabs_android android  -m --des ""

//查看部署状态
code-push deployment list <appName>
  例1:
  code-push deployment list ionic2_tabs_android
  例2:查看部署状态及key值,忘记key就这样找
  code-push deployment list ionic2_tabs_android -k

//清空部署记录
code-push deployment clear <appName> <deploymentName>
如:清空Staging状态的部署记录
code-push deployment clear ionic2_tabs_android Staging

//添加部署状态,默认只有"Staging"和"Production"两中状态
code-push deployment add <appName> [deploymentName]

//删除自定义的部署状态
code-push deployment rm <appName> <deploymentName>

参考文档

推荐阅读更多精彩内容