React Native发布——使用AppCenter

前言

本文基于React Native开发环境搭建，默认已搭建好XXProject的react native项目。本文appcenter cli版本为2.10.0，本文法布时，coderova已停用，codepush已被弃用，因此直接使用更加傻瓜式接入的appcenter cli。本文基于react版本17.0.2、react-native版本0.67.3，使用mac开发。

AppCenter配置

XXProject根目录下执行

npm install -g appcenter-cli

安装appcenter cli，然后再运行

appcenter login

即可调起App Center网页，新建账户（此处不再赘述）结束后，页面会生成新的API token
将token复制后粘贴到刚才输入appcenter login的终端，按enter后即刻登陆App Center应用页面以及运行cli命令，如果不是centeros等无gui系统的话，建议使用网页新增应用以及配置管理，比使用命令方便很多。
本文只讨论使用AppCenter接入React Native，首先新建App：

需要注意，rn产出的android包与ios包一般都是有区别的，因此需要新建两个app，一般默认命名都是类似于XXProject-Android，XXProject-IOS，如果不使用网页新建，则对应新建项目命令为

appcenter apps create -p React-Native -o Android -d XXProject-Android -r Production -n xxproject-android-url-name --description 'Android示例项目' appcenter apps create --platform React-Native --os iOS --display-name XXProject-IOS --release-type Production --name xxproject-ios-url-name --description 'IOS示例项目'

特别注意，-d只是显示的名称，后续命令中的项目是用的是-n指定的，一般使用-d即可，默认同名。所有的cli详细命令可参见¹，如不熟悉命令，可在appcenter相应命令后使用 --help查看详细说明。
在appcenter分别建立Android与ios项目后，在XXProject根目录中使用以下命令中集成CodePush：

npm install --save react-native-code-push

使用Codepush

点击按钮创建默认的两个发布环境：预发布环境Staging，与生产环境Production：

请特别注意，一般正式项目流程是直接使用上一篇中的yarn acd命令进行开发与调试，不需要打出bundle包，以方便开发，在交付给测试时，使用预发布环境Staging并打出Staging的离线bundle集成到app，测试通过后使用生产环境Production。
以上创建发布环境如需要使用命令，则先查看现有app：

appcenter apps list

拷贝对应项目，分别执行新建部署：

appcenter codepush deployment add -a name/xxproject-android-url-name Staging
appcenter codepush deployment add -a name/xxproject-android-url-name Production

IOS项目部署创建也是相同的操作。

Android接入

在XXProject/android/settings.gradle 文件末尾，添加：

include ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

在XXProject/android/app/build.gradle中添加：

// 上一篇集成rn时已经引入，无需重复引入
// apply from: "../../node_modules/react-native/react.gradle"
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"

在上篇的Application类中的添加方法：

// 1. Import the plugin class.
import com.microsoft.codepush.react.CodePush
...
class MainApplication : Application(), ReactApplication {override fun onCreate() {CodePush.setReactInstanceHolder(mReactNativeHost)super.onCreate()...}override fun getReactNativeHost() = mReactNativeHostprivate val mReactNativeHost: CodePushReactNativeHost = CodePushReactNativeHost(this)inner class CodePushReactNativeHost(appContext: Application) : ReactNativeHost(this),ReactInstanceHolder {override fun getUseDeveloperSupport(): Boolean {return BuildConfig.DEBUG}// Override the getJSBundleFile method to let// the CodePush runtime determine where to get the JS// bundle location from on each app startoverride fun getJSBundleFile(): String? {return CodePush.getJSBundleFile()}override fun getPackages(): List<ReactPackage> {// Packages that cannot be autolinked yet can be added manually here, for example:// packages.add(new MyReactNativePackage());// 比如rn桥接return PackageList(this).packages}override fun getJSMainModuleName(): String {return "index"}}
}

使用命令

appcenter codepush deployment list -a ownername/XXProject-Android -k

获取部署key如下图：

将所需部署环境的key放到strings.xml：

 <resources>...<string moduleConfig="true" name="CodePushDeploymentKey">DeploymentKey</string></resources>

注意，部署key的环境需要与以下部署命令的一致，XXProject中，默认debug版使用Staging，release版使用Production（一般还需要一个预发布环境，此处测试项目就省略了，正式项目务必需要三个环境）。
更推荐的做法，是不使用strings.xml定义，而将key使用gradle配置：

android {...buildTypes {debug {...// CodePush更新不应在开发时使用，因为codepush会覆盖rn开发包。但是CodePush sdk会在所有模式下都去检查更新，因此需要提供key。XXProject中，直接使用Staging环境的keyresValue "string", "CodePushDeploymentKey", '""'...}releaseStaging {...// 预发布环境Staging的key，XXProject由于历史原因，直接使用了debugresValue "string", "CodePushDeploymentKey", '"<INSERT_STAGING_KEY>"'// matchingFallbacks表示找不到的依赖使用release类似配置，https://www.jianshu.com/p/7e2d0e59a2bbmatchingFallbacks = ['release']...}release {... // 正式环境Production的keyresValue "string", "CodePushDeploymentKey", '"<INSERT_PRODUCTION_KEY>"'...}}...
}

可选项，安装Appcenter Analytics与Appcenter Crashes，此处不赘述，需要的可自行参考。

IOS接入

XXProject根目录执行命令安装依赖：

cd ios && pod install && cd ..

未完待续

React Native配置

接入Android与IOS原生SDK后，需要配置react native以确定codepush更新检查与安装时机。

主模块接入codepush

const codePushOptions = {//设置检查更新的频率//ON_APP_RESUME APP恢复到前台的时候//ON_APP_START APP开启的时候//MANUAL 手动检查checkFrequency: CodePush.CheckFrequency.ON_APP_START
};
var that = null
class RNAPP extends Component {...
}App = CodePush(codePushOptions)(RNAPP)
export default App

codePushOptions可以不传，默认行为为app启动时检查更新，有更新时静默下载，并在再次冷启动时安装更新。codePushOptions详细介绍此处不赘述，有两个是常用的：

checkFrequency：检查更新的时机，

默认为CodePush.CheckFrequency.ON_APP_START，app冷启动时；
CodePush.CheckFrequency.ON_APP_RESUME，app回到前台时，如home键、跳到别的app再回来时；
CodePush.CheckFrequency.MANUAL，不自动检查更新，需要使用codePush.sync()手动检查。特别注意，手动模式时，如果调用codePush检查更新（checkForUpdate）的时机不是在app start时，必须在加载前notifyAppReady以防止更新重启之后jsbundle回滚：

class RNAPP extends Component {...componentWillMount() {// 更新重启之后，防止回滚CodePush.notifyAppReady()}

installMode：应用更新的时机，

默认为codePush.InstallMode.ON_NEXT_RESTART，下次冷启动时应用更新；
codePush.InstallMode.ON_NEXT_RESUME ，app回到前台时应用更新；
codePush.InstallMode.ON_NEXT_SUSPEND ，页面退到后台minimumBackgroundDuration（默认0）秒后，再次回到前台时应用更新；
codePush.InstallMode.IMMEDIATE ，检查到更新后，立即应用更新。

自定义更新时机

如果业务需求在有更新时，弹窗提示更新，就需要用到两个常用的函数CodePush.checkForUpdate和CodePush.sync：

class RNAPP extends Component {...const codePushOptions = {// 设置检查更新的频率// ON_APP_RESUME APP恢复到前台的时候// ON_APP_START APP开启的时候// MANUAL 手动检查// 1、设定为手动更新checkFrequency: CodePush.CheckFrequency.MANUAL};syncCodePush() {// 3、应用更新CodePush.sync({// 安装模式// ON_NEXT_RESUME 下次恢复到前台时// ON_NEXT_RESTART 下一次重启时// IMMEDIATE 马上更新installMode: CodePush.InstallMode.IMMEDIATE,// 后台30秒以上才更新// minimumBackgroundDuration: 30// 不要使用原生对话框！！！！，需要的话自行配置，2022/3/9新版android codepush源码CodePushDialog直接在非主线程mqt_native_modules上show// updateDialog:true});}componentWillMount() {// 更新重启之后，防止回滚CodePush.notifyAppReady();// 在加载完了可以允许重启CodePush.disallowRestart();}componentDidMount() {that = this//在加载完了可以允许重启CodePush.allowRestart();// 2、检查是否有更新CodePush.checkForUpdate().then((update)=>{if(!update){console.log("The app is up to date!");} else {// 自定义弹窗提示新版本，或其他操作，此处省略 that.syncCodePush()}});}...
}

CodePush.checkForUpdate(deploymentKey: String = null, handleBinaryVersionMismatchCallback: (update: RemotePackage) => void): Promise<RemotePackage>

参数deploymentKey可以指定检测不同的发布环境key，可用于实现灵活配置付费版等功能的更新；
参数handleBinaryVersionMismatchCallback，处理更新版本返回，比如现在app的jsb版本是1.0.0，但是查询到新的jsb更新是1.0.1版本的，此回调可做此类可选项处理
返回的Promise函数null时，无更新或更新对当前版本app不可用，否则返回RemotePackage对象：
downloadUrl——包可供下载的 URL；
download (downloadProgressCallback？： Function) ： Promise<LocalPackage>——下载更新，downloadProgressCallback用于回调进度，返回LocalPackage的Promise用于安装。

CodePush.sync(options?: SyncOptions, syncStatusChangedCallback?: SyncStatusChangedCallback, downloadProgressCallback?: DownloadProgressCallback, handleBinaryVersionMismatchCallback?: HandleBinaryVersionMismatchCallback): Promise;
非常建议细看codePush.sync文档，内容较多且比较重要，此处不再展开。

发布与更新包

以上步骤走完，rn就可以”热更“了。根据上一篇文章操作，离线包已被打进app里，此时随意修改App.js的显示，保存后，使用命令发布更新:

appcenter codepush release-react -a ownername/xxproject-android-url-name -d Staging -t 0.0.1

即可在0.0.1版本的Android app上更新rn页面。同样强烈建议通读发布更新命令参数详解。

参考资料

appcenter-cli仓库
React Native客户端 SDK
React Native 客户端 SDK API 参考
使用CLI发布codepush更新 ↩︎