ionic2/3-热更新(code-push)

参考

• code-push
• code-push-cli
• cordova-plugin-code-push
• ionic2-code-push-example
• code-push常用命令

安装插件

• 使用npm命令全局安装typescript、typings、tslint、code-push-cli四个插件

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

ps:typescript使用时的命令是tsc，而不是typescript

如图：

2017-11-15的版本信息.png

热更新代码服务端

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

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

  
  登录.png
  返回的token.png

• 将token填到到命令终端中，回车就会登录成功

  
  code-push login成功.png

在服务端创建应用

• 使用命令code-push app add <appName> <os> <platform>创建应用

code-push app add moon_admin_android android cordova
code-push app add moon_admin_ios ios cordova

• 执行命令后会生成如下图所示的android cordova和ios cordova的应用信息，我们要把android和ios的Production和Staging分别记录下来

ps:这四个key是用来连接客户端和服务端的

code-push.png

ps:你还可以在web端查看/管理app，传送门

客户端（app、ionic2/3项目）安装插件

• 命令终端进入app目录，安装热更新插件及插件依赖

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

• 使用cordova plugin list命令查看是否安装白名单插件cordova plugin list
  如果没有安装请执行命令
  ionic cordova plugin add cordova-plugin-whitelist
  cordova-plugin-whitelist.png
• 在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.module.ts声明CodePush插件

import {CodePush} from "@ionic-native/code-push";

• 将CodePush加到providers中
  如图：
  CodePush加到providers中.png

动态配置在服务端创建应用后得到的四个key

• 将4个code-push key添加为常量

我的是Constants.ts文件

code-push key.png

代码：

/**
 * debug开发者模式
 */
export const DEBUG = {
  //是否debug模式，true:是, false:否
  IS_DEBUG: true
}

/**
 * 热更新发布的key
 */
export const CODE_PUSH_DEPLOYMENT_KEY = {
  ANDROID: {
    Production: '你的android Production key',
    Staging: '你的android Staging key'
  },
  IOS: {
    Production: '你的ios Production key',
    Staging: '你的ios Staging key'
  }
}

• 热更新同步方法

  
  sync.png
  

  代码：

import { CodePush } from '@ionic-native/code-push';
import { DEBUG, CODE_PUSH_DEPLOYMENT_KEY } from './Constants';

  sync()
  {
    //如果不是真机环境return
    if (!this.isMobile()) return;
    //发布的key
    let deploymentKey = '';
    //如果是Android环境 并且是 debug模式
    if (this.isAndroid() && DEBUG.IS_DEBUG)
    {
      deploymentKey = CODE_PUSH_DEPLOYMENT_KEY.ANDROID.Staging;
    }
    if (this.isAndroid() && !DEBUG.IS_DEBUG)
    {
      deploymentKey = CODE_PUSH_DEPLOYMENT_KEY.ANDROID.Production;
    }
    if (this.isIos() && DEBUG.IS_DEBUG)
    {
      deploymentKey = CODE_PUSH_DEPLOYMENT_KEY.IOS.Staging;
    }
    if (this.isIos() && !DEBUG.IS_DEBUG)
    {
      deploymentKey = CODE_PUSH_DEPLOYMENT_KEY.IOS.Production;
    }
    //热更新同步
    this.codePush.sync({
      deploymentKey: deploymentKey
    }).subscribe((syncStatus) => {
      console.log(syncStatus);
    });
  }

  /**
   * 是否是真机环境
   * @returns {boolean}
   * @memberof NativeService
   */
  isMobile(): boolean
  {
    return this.platform.is("mobile") && !this.platform.is("mobileweb");
  }

  /**
   * 是否android真机环境
   * @returns {boolean}
   * @memberof NativeService
   */
  isAndroid(): boolean
  {
    return this.isMobile() && this.platform.is("android");
  }

  /**
   * 是否是ios真机环境
   * @returns {boolean}
   * @memberof NativeService
   */
  isIos(): boolean
  {
    return this.isMobile && (this.platform.is("ios") || this.platform.is("ipad") || this.platform.is("iphone"));
  }

• 在app启动的时候调用code-push同步方法
  1. 将以上代码放到app.component.ts文件中，然后在构造函数（constructor(){}）中调用this.sync()方法
  2. 你还可以将以上代码放到任何一个.ts文件中，然后在app.component.ts的构造函数中调用sync()方法。

发布热更新

• 使用以下命令查看发布状态

code-push deployment list <appName>

执行命令

code-push deployment list moon_admin_android

执行结果如下图

目前我的moon_admin_android应用"Production"部署状态没有发布更新，也没有安装记录；"Staging"则有一次发布更新v1，一次安装记录

deployment list.png

• 使用以下命令发布更新

code-push release-cordova <appName> <platform> [options]

执行命令

code-push release-cordova moon_admin_android android --des "测试热更新"

ps: 默认发布"Staging"部署状态,也就是开发版

执行命令结果

发布成功.png

再次执行查看发布命令

code-push deployment list moon_admin_android

执行结果

会看到"Staging"多了一个"v2"版本，但是还没有安装记录

deployment v2.png

• 我们设置app在启动的时候会调用sync()同步方法，所以重新打开app后app就会自动更新了代码

打开app后，再执行查看发布命令
code-push deployment list moon_admin_android

手机热更新成功.png

ps: 执行查看发布命令可能存在延迟，不能立马看到安装记录改变，但实际app上已经更新了代码。如出现该现象请淡定

其他说明

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

<meta http-equiv="Content-Security-Policy" content="default-src https://codepush.azurewebsites.net 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *" />

• 官方文档教程中，是把热更新key放到config.xml，这样切换生产环境和开发环境不够方便，于是本文把热更新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>

最后

ps: 安装新插件后，要执行cordova platform rm android和cordova platform add android

code-push常用命令