React Native 使用Code-Push 更新APP

作者: immutable | 来源:发表于2016-07-05 16:01 被阅读8316次

    Code-Push

    官方文档: https://github.com/Microsoft/react-native-code-push#getting-started

    它能干什么 ?

    React Native的应用是由 JavaScript文件资源文件原生代码组成.
    Code-Push 插件能帮助终端用户更新JavaScript文件图片资源.
    当发布一个React Native的新版本时,Code-Push会保存你上个版本发布的文件,当你应用出现崩溃时,Code-Push帮你回滚到上个版本,而不会变成空白页面.

    但是,当原生代码发生改变时,Code-Push就无能为力了,你只能通过应用市场去更新应用.(Android端可以自己下载apk进行安装)

    配置准备步骤

    安装Code-Push的命令行工具:

    npm install -g code-push-cli
    

    如果没有注册过Code-Push,则需要使用code-push register 进行注册

    注册过则需要使用code-push login进行登录

    最后注册 APP 到 Code-Push服务器:

    code-push app add <appName>
    

    开始配置

    进入App根目录,运行一下命令:

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

    配置Android

    有两种方法可实现配置,一种是通过命名行,另外一种是手动.

    命令行配置(推荐使用)

    • 如果是第一次进行配置,则需要先使用 npm i -g rnpm 进行安装.
    • 运行命令行 rnpm link react-native-code-push.
    • 当遇到需要输入deploymentKey时,按<ENTRY>先省略这一步.

    手动配置

    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')
    
    1. android/app/build.gradle添加Code-Push的依赖
    ...
    dependencies {
        ...
        compile project(':react-native-code-push')
    }
    
    1. android/app/build.gradle添加codepush.gradle 任务
    ...
    apply from: "react.gradle"
    apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
    ...
    

    代码配置

    在配置代码中,需要使用到deploymentKey,这个key 是标志应用的身份及环境的,可通过以下命令查看:

    code-push deployment ls <appName>  -k
    

    如果之前的都配置正确,那这里可以看到ProductionStagingDeployment Key,将这两个key粘贴下来.如果环境来决定需要用到哪个key.
    在刚开始,肯定需要测试,那就将Staging对应的Deployment Key,替换到下面deployment-key-here的代码中.

    原生Android 代码配置:

    ...
    
    import com.microsoft.codepush.react.CodePush;
    
    public class MainActivity extends ReactActivity {
    
        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }
    
        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                new MainReactPackage(),
                new CodePush("deployment-key-here", this, BuildConfig.DEBUG)
            );
        }
    
        ...
    }
    

    Code-Push 的使用

    JS配置

    import CodePush from 'react-native-code-push';
    ...
        componentWillMount() {
            //访问慢,不稳定
            CodePush.checkForUpdate('deployment-key-here').then((update)=>{
                if(!update){
                    Alert.alert("提示","已是最新版本--",[
                        {text:"Ok", onPress:()=>{
                            console.log("点了OK");
                        }}
                    ]);
                }
                else{
                    CodePush.sync({
                        deploymentKey: 'deployment-key-here',
                        updateDialog: {
                            optionalIgnoreButtonLabel: '稍后',
                            optionalInstallButtonLabel: '后台更新',
                            optionalUpdateMessage: '有新版本了,是否更新?',
                            title: '更新提示'
                        },
                        installMode: CodePush.InstallMode.IMMEDIATE
                    });
                }
            });
        }
    ...
    

    方法

    • CodePush.checkForUpdate 检查更新的信息
    • CodePush.sync 下载更新

    在使用Code-Push更新功能时,需要先考虑两个问题:

    何时去检查是否有新版本

    一般都是在应用开启时去检查,可以将检查的代码放到`componentDidMount`或者`componentWillMount`方法中. 如果你想更及时的检查,时机可以选在 `当APP位于从后台切换到前台`.
    
    AppState.addEventListener("change", (newState) => {
        newState === "active" && codePush.sync();
    });
    

    当有可用的新版本时,什么时候去呈现给用户

     Code-Push 有三种更新的策略:
         IMMEDIATE 立即更新APP
         ON_NEXT_RESTART 到下一次启动应用时
         ON_NEXT_RESUME 当应用从后台返回时
    
    配置到`installMode:` 之后即可生效.
    

    发布更新

    当应用开发完成后,需要用以下命令发布更新:

    code-push release-react <appName> <platform>
    

    将上面所有步骤都走完后,更新功能就能使用了.

    部署测试

    在应用创建时,会自动生成StagingProduction这两个环境.
    应用在开发阶段,通常都是在Staging下进行开发的,而Production作为生产环境.当应用在开发阶段开发完毕,可使用code-push promote命令从Staging 迁移到Production中.

    在一个版本开发完毕后,当我们不知道该版本是否兼容市场上所有的机型的时候,我们可以选择一小部分人来测试该版本,可以使用以下命令:

    code-push promote <APP_NAME> Staging Production -r 20%
    

    Staging环境迁移到Production,但只让20%的用户进行使用.
    当发现该版本问题较多时,当该版本符合自己期望时,可以全面发布.

    code-push patch <APP_NAME> Production -r 100%
    

    动态部署分配

    添加部署环境

    code-push deployment add [APP_NAME] test-variant-one
    

    发布给特定部署环境

    code-push release-react [APP_NAME] ios -d test-variant-one
    

    相关文章

      网友评论

      • HeartDream:如果我使用了新的cordova plugin,不能通过热更新进行进行更新,我该如何进行后续的判断处理
      • 一往情深_b560:全都是android的热更新, 😔千篇一律,
      • X1024_:代码应该是加载 MainApplication中吧。
      • ce74fc5b39d1:就是如何抓取进度条的数据呢
      • 8fd28ad15588:有新版本了 但是点击安装就会失败
      • fozero:你好,代码配置那块是在手动或者命令行配置完成之后必须配置的吗?是配置MainAcitity还是MainApplication类呢,为什么我的MainApplication中会有如下代码:
        @Override
        protected String getJSBundleFile() {
        return CodePush.getJSBundleFile();
        }

        @Override
        public boolean getUseDeveloperSupport() {
        return BuildConfig.DEBUG;
        }
        是在注册codepush的时候自动生成的代码?
        就是现在我在项目中配置完codepush之后,项目运行不起来了,报错
        FAILURE: Build failed with an exception.

        * What went wrong:
        Execution failed for task ':app:generateDebugBuildConfig'.
        > java.io.IOException: Could not delete path 'D:\workspace\rn\zhihuDaily\android\app\build\generated\source\buildConfig\debug\com'.
      • 宇宙只有巴掌大:我测试使用Staging 的key 可以更新,但是如果我用./gradlew assembleRelease 打包apk 并且把key 全都改成 Production 的key后 更新就无效了是怎么回事?打包发布用的是:code-push release-react MyApp android --t 1.0.0 --d Production --des "1.优化操作流程" --m true 测试用的:code-push release-react <appName> <platform>
        宇宙只有巴掌大:我替换了 android 里面的 key 和 reactjs 里面的 key 都替换了,。code-push deployment ls <appName> -k 查看的时候 也是发布成功了,但是 却是0更新
      • 1c96be5141e0:code-push deployment ls <appName> -k 看不到key请问哪一步出错了啊?
      • taiji1985:学到了,这个服务器是国内的吗?
      • 43ec5675ebd2:AppState.addEventListener("change", (newState) => {
        newState === "active" && codePush.sync();
        });里的AppState哪里来的?
        43ec5675ebd2:@21cb044b96d9 知道哦了,谢谢。
        43ec5675ebd2:@21cb044b96d9 谢谢
        21cb044b96d9:从react-natve包中导出
      • 要开心:谢谢,很详细,收藏先

      本文标题:React Native 使用Code-Push 更新APP

      本文链接:https://www.haomeiwen.com/subject/hbihjttx.html