一、安装与注册CodePush

使用CodePush之前首先要安装CodePush客户端。

1.1、安装 CodePush CLI

只需要在终端输入 npm install -g code-push-cli，就可以安装了。

安装完毕后，输入 code-push -v 查看版本，如看到版本代表成功。

PS.

npm为NodeJS的包管理器，如果你没安装NodeJS请先安装。

1.2、创建一个CodePush 账号

在终端输入code-push register，会打开如下注册页面让你选择授权账号。

授权通过之后，CodePush会告诉你“access key”，复制此key到终端即可完成注册。

PS.相关命令

code-push login 登陆

code-push loout 注销

code-push access-key ls 列出登陆的token

code-push access-key rm <accessKye> 删除某个 access-key

1.3、在CodePush服务器注册app

添加iOS-Android平台应用

为了让CodePush服务器知道你的app，我们需要向它注册app： 在终端输入code-push app add <appName> <os> <platform>即可完成注册。

添加ios平台应用 添加android平台应用

CodePush管理App的相关命令：

code-push app add 在账号里面添加一个新的app

code-push app remove 或者 rm 在账号里移除一个app

code-push app rename 重命名一个存在app

code-push app list 或则 ls 列出账号下面的所有app

code-push app transfer 把app的所有权转移到另外一个账号

二、RN代码中集成CodePush

首先我们需要安装CodeoPush组件，然后通过link命令添加原生依赖，最后在RN根组件中添加热更新逻辑代码

安装code-push组件： npm install react-native-code-push --save

添加原生依赖，这里添加依赖我们使用自动添加依赖的方式：react-native link react-native-code-push

/**

* Sample React Native App

* https://github.com/facebook/react-native

* @flow

*/

import React, { Component } from 'react';

import {Platform, StyleSheet,Text,View} from 'react-native';

import CodePush from 'react-native-code-push'

import {ProgressBar} from './src/ProgressBar';

let codePushOptions = {

  //设置检查更新的频率

  //ON_APP_RESUME APP恢复到前台的时候

  //ON_APP_START APP开启的时候

  //MANUAL 手动检查

  checkFrequency : CodePush.CheckFrequency.ON_APP_RESUME

};

const instructions = Platform.select({

  ios: 'Press Cmd+R to reload,\n' +

    'Cmd+D or shake for dev menu',

  android: 'Double tap R on your keyboard to reload,\n' +

    'Shake or press menu button for dev menu',

});

class App extends Component {

  //如果有更新的提示

  syncImmediate() {

    CodePush.sync( {

          //安装模式

          //ON_NEXT_RESUME 下次恢复到前台时

          //ON_NEXT_RESTART 下一次重启时

          //IMMEDIATE 马上更新

          installMode : CodePush.InstallMode.IMMEDIATE ,

          //对话框

          updateDialog : {

            //是否显示更新描述

            appendReleaseDescription : true ,

            //更新描述的前缀。 默认为"Description"

            descriptionPrefix : "更新内容：" ,

            //强制更新按钮文字，默认为continue

            mandatoryContinueButtonLabel : "立即更新" ,

            //强制更新时的信息. 默认为"An update is available that must be installed."

            mandatoryUpdateMessage : "必须更新后才能使用" ,

            //非强制更新时，按钮文字,默认为"ignore"

            optionalIgnoreButtonLabel : '稍后' ,

            //非强制更新时，确认按钮文字. 默认为"Install"

            optionalInstallButtonLabel : '后台更新' ,

            //非强制更新时，检查到更新的消息文本

            optionalUpdateMessage : '有新版本了，是否更新？' ,

            //Alert窗口的标题

            title : '更新提示'

          } ,

        } ,

    );

  }

  componentWillMount() {

    CodePush.disallowRestart();//禁止重启

    this.syncImmediate(); //开始检查更新

  }

  componentDidMount() {

    CodePush.allowRestart();//在加载完了，允许重启

  }

  render() {

    return (

      <View style={styles.container}>

        <Text style={styles.welcome}>

          Welcome to React Native!

        </Text>

        <Text style={styles.instructions}>

          To get started, edit App.js

        </Text>

        <Text style={styles.instructions}>

          {instructions}

        </Text>

        <ProgressBar />

      </View>

    );

  }

}

// 这一行必须要写

App = CodePush(codePushOptions)(App)

export default App;

const styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

    backgroundColor: '#F5FCFF',

  },

  welcome: {

    fontSize: 20,

    textAlign: 'center',

    margin: 10,

  },

  instructions: {

    textAlign: 'center',

    color: '#333333',

    marginBottom: 5,

  },

});

三、原生应用中配置CodePush

3.1、配置iOS平台

使用Xcode打开项目，Xcode的项目导航视图中的PROJECT下选择你的项目，选择Info页签 ，在Configurations节点下单击 + 按钮 ，选择Duplicate "Release Configaration，输入Staging

image

选择Build Settings tab，搜索Build Location -> Per-configuration Build Products Path -> Staging，将之前的值：$(BUILD_DIR)/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME)改为：$(BUILD_DIR)/Release$(EFFECTIVE_PLATFORM_NAME)。

image

选择Build Settings tab，点击 + 号，选择Add User-Defined Setting，将key设置为CODEPUSH_KEY，Release 和 Staging的值为前面创建的key，我们直接复制进去即可

image

打开Info.plist文件，在CodePushDeploymentKey中输入$(CODEPUSH_KEY)，并修改Bundle versions为三位

image

iOS平台CodePush环境集成完毕。

对于android的集成环境就不在这里说了。

四、发布更新的版本

在使用之前需要考虑的是检查更新时机，更新是否强制，更新是否要求即时。

4.1、更新时机

一般常见的应用内更新时机分为两种，一种是打开App就检查更新，一种是放在设置界面让用户主动检查更新并安装。

打开APP就更新

最为简单的使用方式在React Natvie的根组件的componentDidMount方法中通过

codePush.sync()（需要先导入codePush包：import codePush from 'react-native-code-push'）方法检查并安装更新，如果有更新包可供下载则会在重启后生效。不过这种下载和安装都是静默的，即用户不可见。如果需要用户可见则需要额外的配置。具体可以参考codePush官方API文档，部分代码，完整代码请参照文档上面。

codePush.sync({

  updateDialog: {

    appendReleaseDescription: true,

    descriptionPrefix:'\n\n更新内容：\n',

    title:'更新',

    mandatoryUpdateMessage:'',

    mandatoryContinueButtonLabel:'更新',

  },

  mandatoryInstallMode:codePush.InstallMode.IMMEDIATE,

  deploymentKey: CODE_PUSH_PRODUCTION_KEY,

});

用户点击检查更新按钮

在用户点击检查更新按钮后进行检查，如果有更新则弹出提示框让用户选择是否更新，如果用户点击立即更新按钮，则会进行安装包的下载（实际上这时候应该显示下载进度，这里省略了）下载完成后会立即重启并生效（也可配置稍后重启），部分代码如下：

codePush.checkForUpdate(deploymentKey).then((update) => {

    if (!update) {

        Alert.alert("提示", "已是最新版本--", [

            {

                text: "Ok", onPress: () => {

                console.log("点了OK");

            }

            }

        ]);

    } else {

        codePush.sync({

                deploymentKey: deploymentKey,

                updateDialog: {

                    optionalIgnoreButtonLabel: '稍后',

                    optionalInstallButtonLabel: '立即更新',

                    optionalUpdateMessage: '有新版本了，是否更新？',

                    title: '更新提示'

                },

                installMode: codePush.InstallMode.IMMEDIATE,

            },

            (status) => {

                switch (status) {

                    case codePush.SyncStatus.DOWNLOADING_PACKAGE:

                        console.log("DOWNLOADING_PACKAGE");

                        break;

                    case codePush.SyncStatus.INSTALLING_UPDATE:

                        console.log(" INSTALLING_UPDATE");

                        break;

                }

            },

            (progress) => {

                console.log(progress.receivedBytes + " of " + progress.totalBytes + " received.");

            }

        );

    }

}

4.2、发布更新

CodePush支持两种发布更新的方式，一种是通过code-push release-react简化方式，另外一种是通过code-push release的复杂方式。

第一种方式：通过code-push release-react发布更新

这种方式将打包与发布两个命令合二为一，可以说大大简化了我们的操作流程，建议大家多使用这种方式来发布更新。code-push release-react <appName> <platform>

code-push release-react mode-ios ios --t 1.0.0 --dev false --d Production --des "1.优化操作流程" --m true，后面部分是可以设置上传的版本以及一下其他的配置，输入上面的高级版本。

第二种方式：通过code-push release发布更新

生成bundle发布更新之前，需要先把 js打包成 bundle，如：

第一步： 在 工程目录里面新增 bundles文件：mkdir bundles

第二步： 运行命令打包 react-native bundle --platform 平台 --entry-file 启动文件 --bundle-output 打包js输出文件 --assets-dest 资源输出目录 --dev 是否调试。

eg:

react-native bundle --platform android --entry-file index.android.js --bundle-output ./bundles/index.android.bundle --dev false

发布更新包打包bundle结束后，就可以通过CodePush发布更新了。在终端输入

code-push release <应用名称> <Bundles所在目录> <对应的应用版本> --deploymentName： 更新环境 --description： 更新描述 --mandatory： 是否强制更新

eg:

code-push release demo-android ./bundles/index.android.bundle 1.0.0 --deploymentName Production --description "1.支持文章缓存。" --mandatory true

注意：

CodePush默认是更新 staging 环境的，如果是staging，则不需要填写 deploymentName。

如果有 mandatory 则Code Push会根据mandatory 是true或false来控制应用是否强制更新。默认情况下mandatory为false即不强制更新。

对应的应用版本（targetBinaryVersion）是指当前app的版本(对应build.gradle中设置的versionName "1.0.0")，也就是说此次更新的js/images对应的是app的那个版本。不要将其理解为这次js更新的版本。 如客户端版本是 1.0.0，那么我们对1.0.0的客户端更新js/images，targetBinaryVersion填的就是1.0.0。

对于对某个应用版本进行多次更新的情况，CodePush会检查每次上传的 bundle，如果在该版本下如1.0.0已经存在与这次上传完全一样的bundle(对应一个版本有两个bundle的md5完全一样)，那么CodePush会拒绝此次更新。