React-Native 之 CodePush 热更新

作者: Y_B_T | 来源:发表于2023-11-16 00:43 被阅读0次

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中配置密钥

photo_2023-11-16_23-49-05.jpg

密钥的配置分两种形式，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

photo_2023-11-17_00-24-27.jpg

到这里最新版本的代码已经发布到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一个简单实用，如想更详细更多功能，建议查看官网文档；

React-Native 之 CodePush 热更新

React-Native CodePush 之配置Android

开始实操

添加部署密钥

发布版本指令:

总结：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

React-Native 之 CodePush 热更新

React-Native CodePush 之 配置Android

开始实操

添加部署密钥

发布版本指令:

总结：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

React-Native CodePush 之配置Android