ionic2/3实战-热更新(cordova-plugin-code-push)

前言

• 什么是热更新?热更新就是动态下发代码，它可以使开发者在不发布新版本的情况下，修复 BUG 和发布功能.用户毫无感知，还可以绕过某些应用商店的长时间审核
• ionic实现热更新的插件有好几个,本文以微软公司提供的热更新插件(cordova-plugin-code-push)为例.这里还有一款热更新插件的介绍
• 大公司提供的服务坑少,我在集成的过程中很顺利,只是集成步骤比较多,各位只要认真阅读文档都可以成功

参考文档

• code-push
• cordova-plugin-code-push
• code-push-cli
• ionic2-code-push-example

环境准备

• 全局安装typescript、typings、tslint、code-push-cli

cnpm install -g typescript
cnpm install -g typings
cnpm install -g tslint
cnpm install -g code-push-cli

目前(2017年10月16日 08:59:44)的版本信息

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

登录code-push服务端

• 使用code-push login命令会打开浏览器窗口让我们登录code-push服务端

• 我这里用github帐号登录,你也可以使用其他帐号,登录成功会返回一个权限token

• 复制token粘帖到命令行工具中,回车则会登录成功

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

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

code-push app add ionic2_tabs_android android cordova
code-push app add ionic2_tabs_ios ios cordova

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

app环境准备

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

ionic cordova plugin add cordova-plugin-code-push
cnpm install --save @ionic-native/code-push

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

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

或者

app代码准备

• 在app.module.ts声明插件 import {CodePush} from "@ionic-native/code-push";

• 配置code-push key.Constants.ts

export const CODE_PUSH_DEPLOYMENT_KEY = {
  'android':{
    'Production':'你的android Production key',
    'Staging':'你的android Staging key'
  },
  'ios':{
     'Production':'你的ios Production key',
    'Staging':'你的ios Staging key'
  }
};

• 添加同步方法,把部署key作为动态参数.NativeService.ts

import {CodePush} from "@ionic-native/code-push";
constructor(private codePush: CodePush) {}
  /**
   * 热更新同步方法
   */
 sync() {
    if (this.isMobile()) {
      let deploymentKey = '';
      if (this.isAndroid() && IS_DEBUG) {
        deploymentKey = CODE_PUSH_DEPLOYMENT_KEY.android.Staging;
      }
      if (this.isAndroid() && !IS_DEBUG) {
        deploymentKey = CODE_PUSH_DEPLOYMENT_KEY.android.Production;
      }
      if (this.isIos() && IS_DEBUG) {
        deploymentKey = CODE_PUSH_DEPLOYMENT_KEY.ios.Staging;
      }
      if (this.isIos() && !IS_DEBUG) {
        deploymentKey = CODE_PUSH_DEPLOYMENT_KEY.ios.Production;
      }
      this.codePush.sync({
        deploymentKey: deploymentKey
      }).subscribe(syncStatus => {
        console.log(syncStatus);
      });
    }
  }

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

• 热更新插件只能在真机测试.所以现在打包app并安装到手机上.我这里以android为例先安装一个debug版本的app到手机上

安装了新插件,记得执行cordova platform rm android和cordova platform add android

发布更新

• 使用命令code-push deployment list 查看发布状态
  如下图可以看到目前android应用"Production"和"Staging"两种部署状态都没有发布更新,也没有安装记录

这是安装在手机上的app页面

修改代码使页面按钮颜色为红色,然后发布更新

• 使用命令code-push release-cordova [options]发布更新,如下图所示.

默认发布"Staging"部署状态,也就是开发版.code-push release-cordova ionic2_tabs_android android --des "修改按钮颜色"
发布上传时间依网速快慢大概需要1分钟左右
再次查看发布状态,会看到"Staging"已经有一个版本"v1",但是还没有安装记录

• 前面已经设置app在启动的时候会调用code-push同步方法,所以我们现在退出app,重新打开app,如下gif演示了code-push下载更新过程(点击gif放大看)

• 再次查看部署状态已经发现有一个更新安装记录,说明热更新成功

code-push常用命令

//给app在热更新服务器上创建应用
code-push app add    

//删除应用
code-push app rm 

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

//发布应用
code-push release-cordova   [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 
  例1:
  code-push deployment list ionic2_tabs_android
  例2:查看部署状态及key值,忘记key就这样找
  code-push deployment list ionic2_tabs_android -k

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

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

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

其他问题

• 官方文档教程中,要给index.html添加如下,经测试不用添加

• 官方文档教程中,添加如下代码到config.xml中.即把热更新key值放到config.xml中.但是这样切换生产环境和开发环境不够方便,于是本文把部署key放到代码层动态指定

• 关于苹果 App Store禁止热更新的说明
  目前还没有全面禁止热更新,收到警告邮件的开发者绝大部分是使用了 JS-Patch 或 Rollout 的热更新类库
  我公司的应用都是企业内部应用,还没有应用上传到 App Store上,所以不受此限制.
  ios cordova的热更新应用能否上传到App Store和实现热更新,我觉得90%没问题,各位测试后请留言.