RN中热更新CodePush使用

最新推荐文章于 2024-06-20 09:37:19 发布

LoadTown

最新推荐文章于 2024-06-20 09:37:19 发布

阅读量3.5k

点赞数

分类专栏： React Native 文章标签： CodePush

React Native 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

RN中涉及到热更新使用微软提供的CodePush插件实现，具体使用如下：

更新流程

1、安装 code-push-cli插件(在项目根目录)

npm install -g code-push-cli        //全局安装code-push-cli插件

2、注册登录微软CodePush服务

code-push register

此时会打开一个网页

选择一个账号登录,登录成功会自动创建一个token

在terminal中继续输入上面获取的token

Enter your token from the browser:  6921*********************0c33

出现如下信息提示成功且自动登录CodePush服务（其中session被保存在.code-push.config文件中）

Successfully logged-in. Your session file was written to /Users/xxxxx/.code-push.config. You can run the code-push logout command at any time to delete this file and terminate your session.

打开.code-push.config文件可见accesskey

3、向CodePush微软服务添加APP

为了让CodePush服务器有我们的App，我们需要CodePush注册App（在项目根目录下执行）

//注册Android
code-push app add 应用名 android react-native
//注册iOS
code-push app add 应用名 ios react-native

code-push app add RNDemo01 Android react-native   //将当前应用Android平台RNDemo01注册到服务

向CodePush服务注册App之后会得到Production key和Staging key(Production-代表生产热更新部署，Staging-代表开发热更新部署)，在ios中将Staging的部署key复制在info.plist的CodePushDeploymentKey值中，在android中复制在Application的getPackages的CodePush中。

注意：注意如果我们的应用分为iOS和Android两个平台，这时我们需要分别注册两套key。

查看已经在CodePush注册的APP

code-push app list

4、原生应用中配置CodePush

这里原生应用中配置CodePush我们需要分别配置iOS平台和Android平台

配置iOS平台

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

选择Build Settings tab，搜索Build Location -> Per-configuration Build Products Path -> Staging，将之前的值：

$(BUILD_DIR)/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME)
  改为：
$(BUILD_DIR)/Release$(EFFECTIVE_PLATFORM_NAME)

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

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

iOS平台CodePush环境集成完毕。

配置Android平台

在android中将部署key复制在Application的getPackages的CodePush中。

5、在RN代码中集成CodePush

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

更新时机

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

打开APP就检查更新

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

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 : '更新提示'
                } ,
            } ,
        );

上面的配置在检查更新时会弹出提示对话框， mandatoryInstallMode表示强制更新，appendReleaseDescription表示在发布更新时的描述会显示到更新对话框上让用户可见

用户点击检查更新按钮

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

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.CHECKING_FOR_UPDATE:
                        console.log("Checking for updates.");
                    break;
                        case codePush.SyncStatus.DOWNLOADING_PACKAGE:
                        console.log("Downloading package.");
                    break;
                        case codePush.SyncStatus.INSTALLING_UPDATE:
                        console.log("Installing update.");
                    break;
                        case codePush.SyncStatus.UP_TO_DATE:
                        console.log("Installing update.");
                    break;
                        case codePush.SyncStatus.UPDATE_INSTALLED:
                        console.log("Update installed.");
                    break;
        }
            },
            (progress) => {
                console.log(progress.receivedBytes + " of " + progress.totalBytes + " received.");
            }
        );
    }
 }

更新是否强制

如果是强制更新需要在发布的时候指定，发布命令中配置--m true

更新是否要求即时

在更新配置中通过指定installMode来决定安装完成的重启时机，亦即更新生效时机

codePush.InstallMode.IMMEDIATE：表示安装完成立即重启更新
codePush.InstallMode.ON_NEXT_RESTART：表示安装完成后会在下次重启后进行更新
codePush.InstallMode.ON_NEXT_RESUME：表示安装完成后会在应用进入后台后重启更新

6、如何发布CodePush更新包

在将RN的bundle放到CodePush服务器之前，我们需要先生成bundle，在将bundle上传到CodePush

生成bundle

我们在RN项目根目录下线创建bundle文件夹，再在bundle中创建创建ios和android文件夹，最后将生成的bundle文件和资源文件拖到我们的项目工程中

生成bundle命令 react-native bundle --platform 平台 --entry-file 启动文件 --bundle-output 打包js输出文件 --assets-dest 资源输出目录 --dev 是否调试

react-native bundle --platform android --entry-file index.js --bundle-output ./bundle/android/android.bundle --assets-dest ./android/app/src/main/res/ --dev false

执行命令后bundle文件会自动生成在我们指定的文件夹下面。

上传bundle到CodePush服务器

code-push release-react <Appname> <Platform> --t <本更新包面向的旧版本号> --des <本次更新说明>

code-push release-react RNDemo01 android --t 1.0.1 --des "这是第一个更新包"

注意： CodePush默认是更新Staging 环境的，如果发布生产环境的更新包，需要指定--d参数：--d Production，如果发布的是强制更新包，需要加上 --m true强制更新

查看发布的历史记录，命令如下

查询Production

code-push deployment history projectName Production

查询Staging

code-push deployment history projectName Staging

code-push deployment history RNDemo01 Staging

PS：

发布更新包命令中的 -- t 对应的参数是和我们项目中的版本号一致的，这个不要误理解为是更新包的版本号，例如项目中的版本号为1.0.0，这时如果我们需要对这个1.0.0 版本的项目进行第一次热更新，那么命令中的 -- t 也为1.0.0，第二次热更新任然为1.0.0
项目的版本号需要改为三位的，默认是两位的，但是CodePush需要三位数的版本号
发布更新应用时，应用的名称必须要和之前注册过的应用名称一致

7、CodePush常用命令

// 账户相关
code-push login 登陆
code-push loout 注销
code-push access-key ls 列出登陆的token
code-push access-key rm <accessKye> 删除某个 access-key

// app操作相关
code-push app add <appName> <platform> react-native  在账号里面添加一个新的app
code-push app remove 或者 rm 在账号里移除一个 app
code-push app rename 重命名一个存在 app
code-push app list 或则 ls 列出账号下面的所有 app
code-push app transfer 把app的所有权转移到另外一个账号

// 应用信息相关
code-push deployment add <appName> 部署
code-push deployment rm <appName> 删除部署
code-push deployment rename <appName> 重命名
code-push deployment ls <appName> 列出应用的部署情况
code-push deployment ls <appName> -k 查看部署的key
code-push deployment history <appName> <deploymentName> 查看历史版本

// 发布
code-push release-react <appName> <platform> -t 版本  -d 环境  --des 描述 -m true （强制更新）
// 清除历史部署记录
code-push deployment clear <appName> Production or Staging
// 回滚
code-push rollback <appName> Production --targetRelease v4(codepush服务部署的版本号)

注意事项
1. 更新规则

1.1 CodePush部署版本 > App版本

更新可用，但当前版本比运行版本高。不作更新

1.2. CodePush部署版本 < App版本

不执行更新处理

1.3. CodePush部署版本 == App版本

自动下载更新，并根据加载策略加载最新bundle

2. 回滚

2.1当部署的版本不同时，不能跨版本回滚。

例如：CodePush历史版本中为2.10.1，此时发布2.10.2版本。当从2.10.2发起回滚操作回到2.10.1时，是不可行的。