React-Native CodePush 之 配置Android
使用RN开发项目虽然已经开发了很久了，但亲自操手配置 CodePush 还是第一次，话不多说开始今天的 CodePush 配置之旅；
简介
CodePush 是由 Microsoft 提供的一个用于实现 React Native 应用程序热更新的解决方案。它允许你在不通过应用商店发布新版本的情况下，将更新推送到现有的安装应用程序。以下是 CodePush 的一些关键概念和用法：
- 部署环境： 在 CodePush 中，你可以创建不同的部署环境，例如 "Staging" 和 "Production"。每个环境都有自己的部署密钥和更新。这有助于分离测试和生产环境的更新。
- 部署密钥： 每个部署环境都有一个唯一的部署密钥，用于标识该环境的更新。你需要在应用程序中配置正确的部署密钥，以获取相应环境的更新。
- 发布更新： 使用 code-push release-react 命令发布新的更新。该命令可以将 React Native 项目的 JavaScript bundle 和资源文件上传到 CodePush 服务器。
开始实操
开发文档传送门。
1. 需要在项目的根目录使用npm 下载依赖包
npm install --save react-native-code-push
2. 需要更改android的原生代码
1）android/settings.gradle在 文件中，进行以下添加
include ':app', ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')
2）在文件中 android/app/build.gradle ，将 codepush.gradle 文件添加为其他生成任务定义
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
3）MainApplication.java 更新文件，则通过以下更改使用 CodePush：
// 1. 导入插件
import com.microsoft.codepush.react.CodePush;
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
...
// 2. 重写 getJSBundleFile 方法以让 CodePush运行时确定从那里获取JS
@Override
protected String getJSBundleFile() {
return CodePush.getJSBundleFile();
}
};
}
添加部署密钥
先去后台创建app 微软管理平台(备注：创建完成app之后，会自动生成Staging和Production环境)
第一步 - 使用 appcenter-cli，进行创app环境密钥
安装 App Center CLI：
npm install -g appcenter-cli
第二步 - 登入
// 回车之后，按照提示输入yes，然后会自动打开浏览给出密码，只需要复制粘贴回终端再回车就OK了
appcenter login
第三步 - 获取 owner名称 和 app名称
appcenter apps list
第四步 - 选择你要的配置的app项目，进行创建SIT和PROD环境的密钥(一定要核对好 owner名称 和 app名称的单词大小写)
// appcenter codepush release-react -a jackteng666-gmail.com/MyApp -d Staging SIT环境(测试环境)
范例:
appcenter codepush release-react -a 123456-@gamil.com/MyApp -d Staging
// appcenter codepush release-react -a 123456-@gamil.com/MyApp -d Production PROD环境(生产环境)
范例:
appcenter codepush release-react -a 123456-@gamil.com/MyApp -d Production
第五步 - 获取密钥
appcenter codepush deployment list --app 123456-@gamil.com/MyApp -k
不出意外的话，到这一步已经创建好两个环境的密钥并且返回两个环境的密钥，接下来就是在app中配置密钥
密钥的配置分两种形式，a. 固定环境 b.多种环境，这些根据自己的业务需求选择
a. 固定环境：
在 android/app/src/main/res/values/strings.xml 进行添加
<resources>
<string name="app_name">AppName</string>
<string moduleConfig="true" name="CodePushDeploymentKey">替换自己需要的环境密钥</string>
</resources>
b.多种环境
在 android/app/build.gradle 进行添加
android {
...
buildTypes {
debug {
...
resValue "string", "CodePushDeploymentKey", '""'
...
}
releaseStaging {
...
resValue "string", "CodePushDeploymentKey", '"<INSERT_STAGING_KEY>"'
matchingFallbacks = ['release']
...
}
release {
...
resValue "string", "CodePushDeploymentKey", '"<INSERT_PRODUCTION_KEY>"'
...
}
}
...
}
到这一步app密钥已经配置好了，接下来就是写js代码进行发布和测试热更新
详细介绍可以看这里API Reference
import CodePush from 'react-native-code-push';
...
export default CodePush(App);
如果不想在启动app的时候，检查的话，也可以单独写成组建，在需要的地方进行加载;
import React, { useState, useEffect } from "react";
import codePush from "react-native-code-push";
const CheckUpdate = () => {
/** 執行CodePush更新 */
const processCodepushUpdate = () => {
codePush.notifyAppReady(); // 加这行避免自动rollback, https://docs.microsoft.com/zh-tw/appcenter/distribution/codepush/rn-api-ref#codepushnotifyappready
codePush
.sync(
{
installMode: codePush.InstallMode.ON_NEXT_RESUME, // 非强制：下次唤起时安裝新版本
mandatoryInstallMode: codePush.InstallMode.ON_NEXT_RESUME, // 强制：下次唤起时安装新版本
minimumBackgroundDuration: 0, // 背景停留多久后触发按照新版本(预设0)
rollbackRetryOptions: { delayInHours: 1, maxRetryAttempts: 50 }, // rollback重试设定
},
(status) => {
// codePush.SyncStatus.CHECKING_FOR_UPDATE 0 ： 正在查询 CodePush 服务器是否有更新。
// codePush.SyncStatus.AWAITING_USER_ACTION 1 ： 有更新可用，并向最终用户显示确认对话框。（仅在updateDialog使用时适用）
// odePush.SyncStatus.DOWNLOADING_PACKAGE 2 ： 在从 CodePush 服务器下载可用更新。
// codePush.SyncStatus.INSTALLING_UPDATE 3 ： 已下载可用更新并将安装
// codePush.SyncStatus.UP_TO_DATE 4 ：应用程序已完全更新到配置的部署
// codePush.SyncStatus.UPDATE_IGNORED 5 ： 应用程序有一个可选更新，最终用户选择忽略该更新。（仅在updateDialog使用时适用）
// codePush.SyncStatus.UPDATE_INSTALLED 6 ： 已安装可用更新，并将在syncStatusChangedCallback函数返回后立即运行或在下次应用程序恢复/重新启动时运
// codePush.SyncStatus.SYNC_IN_PROGRESS 7: 正在进行的sync操作阻止当前调用的执行。
// codePush.SyncStatus.UNKNOWN_ERROR -1 ： 同步操作发现未知错误。
switch (status) {
case codePush.SyncStatus.DOWNLOADING_PACKAGE:
console.log("在从 CodePush 服务器下载可用更新");
break;
case codePush.SyncStatus.INSTALLING_UPDATE:
console.log("有更新可用，已下载可用更新并将安装");
break;
case codePush.SyncStatus.UPDATE_INSTALLED:
console.log("已安装可用更新，并将在syncStatusChangedCallback函数返回后立即运行或在下次应用程序恢复/重新启动时运");
codePush.restartApp();
break;
}
},
({ receivedBytes, totalBytes }) => {
// 计算出下载百分比
const percent = Math.floor((receivedBytes / totalBytes) * 100);
}
)
.catch((error) => {
console.log(JSON.stringify(error))
});
};
useEffect(() => {
processCodepushUpdate();
}, []);
return ...
};
export default CheckUpdate;
到这一步热更新框架基本上完成了，接下来就是测试热更新
发布版本指令:
当前发布的是SIT环境，PROD环境同理
appcenter codepush release-react -a 123456-@gamil.com/MyApp -t "*" -d Staging --description "v1.0.0 测试更新" --sourcemap-output --output-dir ./build/android
备注：
-t 是指目标版本，意思是只有是指定的目标版本才会触发更新，比如说，现在你的用户用的版本是1.1.1 和 1.0.0这两种版本，那么 -t "1.1.1" 就是发布之后，只有版本为1.1.1的用户才会触发热更新
如果不需要指定目标版本就输入 -t "*" 通配符为全部版本 或者不输入 -t
当终端返回以下内容，则表示已经发布成功了(SIT环境)
Successfully released an update containing the "build/android/CodePush" directory to the "Staging" deployment of the "MyApp" app.
查看发布历史
appcenter codepush deployment history -a 123456-@gamil.com/MyApp Staging
到这里最新版本的代码已经发布到codPush服务器上了，接下来就可以用已经有热更新代码版本的app来测试了；
最简单的方式就是
1、把当前版本打包给Android手机安装，然后再改代码(能够明显看到不一样的界面，比较好分辨是否更新成功)，然后再重新发布一次；
2、重新打开APP检查是否有更新提示(上面的组建，可以根据自己的想法写出弹窗和显示进度条)
我当前遇到一个错误状态码是 codePush.SyncStatus.UNKNOWN_ERROR -1 ： 同步操作发现未知错误。，这个错误会有很多种情况，比较难查。我的app上导致这个状态的原因是：
{
"nativeStackAndroid":[{"lineNumber":49,"file":"CodePush.java","methodName":"h","class":"com.microsoft.codepush.react.a"},{"lineNumber":25,"file":"CodePushNativeModule.java","methodName":"a","class":"com.microsoft.codepush.react.CodePushNativeModule$c"},{"lineNumber":3,"file":"CodePushNativeModule.java","methodName":"doInBackground","class":"com.microsoft.codepush.react.CodePushNativeModule$c"},{"lineNumber":389,"file":"AsyncTask.java","methodName":"call","class":"android.os.AsyncTask$3"},{"lineNumber":266,"file":"FutureTask.java","methodName":"run","class":"java.util.concurrent.FutureTask"},{"lineNumber":1167,"file":"ThreadPoolExecutor.java","methodName":"runWorker","class":"java.util.concurrent.ThreadPoolExecutor"},{"lineNumber":641,"file":"ThreadPoolExecutor.java","methodName":"run","class":"java.util.concurrent.ThreadPoolExecutor$Worker"},{"lineNumber":929,"file":"Thread.java","methodName":"run","class":"java.lang.Thread"}],
"userInfo":null,
"message":"Error in getting binary resources modified time",
"code":"EUNSPECIFIED"
}
解决方式是在 android/app/build.gradle 的 defaultConfig 中增加：
原文
resValue 'string', "CODE_PUSH_APK_BUILD_TIME", String.format("\"%d\"", System.currentTimeMillis())
然后重新编译打包给Android机安装，然后再重新改代码，进行发布测试热更新
总结：
1、使用 npm 安装 react-native-code-push 依赖
2、更改android的原生代码进行codePush连线
3、使用 微软管理平台 创建app
4、使用 appcenter-cli 进行指令管控
5、使用 react-native-code-push 进行编码更新
6、发布更新测试
7、解决更新失败的问题
以上是codePush一个简单实用，如想更详细更多功能，建议查看官网文档；
