阅读 1238

React Native热更新之CodePush

CodePush简介

作为一个跨平台应用开发框架,React Native虽然在动态更新方面提供了动态更新的基础,但是动态更新技术并没有想象的那么完善。好在微软开发了CodePush,填补了React Native应用在动态更新方面的空白。

CodePush是微软提供的一套用于React Native和Cordova的热更新服务,借助CodePush,开发者可以直接部署移动应用更新并快速实现代码的热更新,CodePush的官方地址为https://microsoft.github.io/code-push/。

CodePush作为一个中央仓库,开发者可以实时推送更新,然后客户端应用可以在应用启动时查询更新。借助CodePush,不需要重新审核和安装应用,就可以解决应用的缺陷和添加新特性。CodePush支持的功能如下: • 支持直接对用户部署代码更新; • 管理Alpha、Beta和生产环境应用; • 支持React Native和Cordova跨平台技术的热更新; • 支持JavaScript文件与图片资源的更新;

CodePush安装与账号注册

使用CodePush之前,需要先安装CodePush命令行工具,并注册CodePush账号和应用,安装命令如下:

  npm install -g code-push-cli
复制代码

安装完成后可以通过code-push -v命令进行验证。然后,在终端输入命令 code-push register,会打开注册页面让开发者选择授权账号,如图11-11所示。

在这里插入图片描述
授权通过之后,CodePush会生成一个access key,复制此key到终端即可完成注册,如图11-12所示。
在这里插入图片描述
除了code-push register命令外,CodePush常用的命令还有: • code-push login:登录CodePush • code-push logout: 注销CodePush • code-push access-key ls:列出access-key • code-push access-key rm :删除某个access-key 为了让CodePush服务器知道创建的应用,还需要向服务器进行注册,注册的命令如下:

code-push app add <appName> <platform> react-native
复制代码

其中,appName表示应用的名称,platform表示应用的平台。在终端输入命令后即可完成应用的注册,如图11-13所示。

在这里插入图片描述
向CodePush添加应用时需要指明应用的平台,成功注册CodePush应用后,每个应用都会生成两个deployment key。其中,Production是用于生产环境的deployment key,Staging则是用于模拟环境的deployment key。 注册成功后,可以通过https://appcenter.ms/apps来查看注册的CodePush应用的信息,如图11-14所示。
在这里插入图片描述
需要说明的是,如果需要同时发布Android和iOS两个平台的热更新,那么在注册CodePush应用时需要注册两个应用,并获取两套deployment key。 除了code-push app add命令外,CodePush用于应用管理的命令还有: • code-push app add:在登录账号中添加一个新的应用。 • code-push app remove :在登录账号中删除一个存在的应用。 • code-push app rename:重命名一个存在的应用。 • code-push app list:列出登录账号下所有的应用。 • code-push app transfer:把应用的所有权转移到另外一个账号。

集成CodePush SDK

完成CodePush账号的创建和应用的注册操作之后,接下来还需要集成CodePush SDK到React Native应用中。 首先,使用react-native init命令新建一个React Native项目,如下所示:

react-native init codepush
复制代码

然后,安装react-native-code-push插件,安装命令如下:

npm install --save react-native-code-push
复制代码

然后,运行link命令将react-native-code-push插件添加到原生工程中,如下所示:

react-native link react-native-code-push
复制代码

此时,系统会提示输入iOS和Android应用的deployment key,此时输入应用的Staging即可,如果不输入则可以直接点击【Enter】键跳过,如下所示:

? What is your CodePush deployment key for Android (hit <ENTER> to ignore)
? What is your CodePush deployment key for iOS (hit <ENTER> to ignore)
复制代码

如果忘记deployment key的话,可以通过如下命令进行查看,如图11-14所示。

在这里插入图片描述
需要说明的是,使用react-native link命令链接原生库时,如果直接跳过输入deployment key,也可以在原生端手动配置。 成功添加react-native-code-push到CodePush项目后,还需要对原生工程做一些修改。

手动集成CodePush SDK

使用react-native link链接原生库时,如果跳过输入deployment key,也可以在原生端手动进行配置。 对于iOS来说,使用Xcode打开ios/codepush.xcodeproj目录下的iOS工程,然后Xcode的导航视图的PROJECT下选中项目,然后依次选择【Info】→【Configurations】→【添加】→【Duplicate Release Configuration】,然后输入Staging的key,如图11-15所示。

在这里插入图片描述
然后,在Build Settings面板选择【add User-Defined Setting】添加自定义编译环境配置,如图11-17所示。
在这里插入图片描述
然后,在User-Defined中添加CodePush的deployment key,如图11-18所示。
在这里插入图片描述
打开Info.plist文件,并在CodePushDeploymentKey列的Value选项中输入$(CODEPUSH_KEY),如图11-19所示。
在这里插入图片描述
对于Android来说,使用Android Studio打开android工程,然后在工程的android/settings.gradle文件中引入react-native-code-push库,如下所示:

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

然后,在app/build.gradle文件中关联react-native-code-push库的依赖,如下所示:

apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"

dependencies {
    compile project(':react-native-code-push')
}
复制代码

接下来,在MainApplication类的getPackages()方法中注册CodePush,如下所示:

@Override
protected String getJSBundleFile() {
    return CodePush.getJSBundleFile();
}
    
@Override
public boolean getUseDeveloperSupport() {
    return BuildConfig.DEBUG;
}

@Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
               new MainReactPackage(),
               new CodePush(BuildConfig.codepushkey,getApplicationContext(), BuildConfig.DEBUG)
            );
        }
复制代码

由于CodePush的deployment-key分为生产环境与测试环境两种,所以可以在build.gradle文件中进行设置,如下所示:

android {
    
     releaseStaging {
        buildConfigField "String", "CODEPUSH_KEY", '"<INSERT_STAGING_KEY>"'
        }
 
     release {
        buildConfigField "String", "CODEPUSH_KEY", '"<INSERT_PRODUCTION_KEY>"'
        }
    }
}
复制代码

到此,CodePush热更新所需要的原生配置就完成了,接下来只需要修改React Native的逻辑即可。

iOS应用热更新示例

使用Xcode打开ios/codepush.xcodeproj文件,然后打开AppDelegate.m文件,可以看到此时jsCodeLocation相关代码如下:

#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
  return [CodePush bundleURL];
#endif
}
复制代码

从上面的代码可以看出,在非Debug状态下,系统默认加载的资源地址为CodePush的bundleURL,为了加载CodePush的Bundle资源,需要手动修改编译选项为Release。具体来说,打开Xcode的菜单,然后依次选择【Product】→【Scheme】→【Edit Scheme】,如图11-19所示。

在这里插入图片描述
完成上述原生配置之后,接着打开React Native的入口文件index.js,并对index.js文件进行如下的修改。

import React, {Component} from 'react';
import {AppRegistry, Platform, StyleSheet, Text, View} from 'react-native';
import {name as appName} from './app.json';
import codePush from 'react-native-code-push'

type Props = {};
export default class App extends Component<Props> {

    constructor(props) {
        super(props);
        this.state = {
            message: ''
        };
    }

    componentDidMount() {
        codePush.checkForUpdate().then((update) => {
            if (update) {
                this.setState({message: '有新的更新!'})
            } else {
                this.setState({message: '已是最新,不需要更新!'})
            }
        })
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>版本号 1.0</Text>
                <Text style={styles.instructions}>{this.state.message}</Text>
            </View>
        );
    }
}

//省略样式文件

AppRegistry.registerComponent(appName, () => codePush(App));
复制代码

如上所示,可以componentDidMount生命周期函数会检查CodePush应用是否需要更新,如果检测需要更新则下载CodePush应用的更新。重新编译和运行应用,效果如图11-21所示。

在这里插入图片描述
然后,将index.js文件显示的版本号升级为1.1,修改内容如下:

render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>版本号 1.1</Text>
                <Text style={styles.instructions}>{this.state.message}</Text>
            </View>
        );
    }
复制代码

接下来,使用CodePush的code-push release命令行工具发布iOS的更新,如下所示:

code-push release-react codepush ios
复制代码

等待系统打包并发布热更新的bundle文件,发布成功后关闭并重新打开应用,就可以看到应用启动时会提示更新,如图11-22所示。

在这里插入图片描述
在检测到更新后,系统会下载最新的资源并更新,当再次关闭并重新打开应用时,可以看到应用更新成功后的效果。并且,还可以使用CodePush提供的code-push deployment命令来查看更新情况,如图11-23所示。
在这里插入图片描述
和iOS的应用热更新类似,Android应用的热更新也可以使用这一步骤。

关注下面的标签,发现更多相似文章
评论