美文网首页React NativeJS
翻译|react-native-code-push热更新部署

翻译|react-native-code-push热更新部署

作者: Juice_gg | 来源:发表于2017-02-08 16:17 被阅读1037次

    英语太烂,菜鸟水平,如有不妥之处,请各位大神指正

    • 工作原理


    React Native应用程序由JavaScript文件和附带的图像组成,它们由打包程序捆绑在一起,并作为平台特定的二进制文件(即.ipa或.apk文件)的一部分分发。 当应用程序发布后,更新JavaScript代码(例如进行错误修复,添加新功能)或图像资源时,需要重新编译和重新分发整个二进制文件。(简单说就是React Native App如果不使用热更新的话,和原生App发布没什么区别,同样需要提交应用商店审核然后等待发布)

    通过使用CodePush 插件,可以让你的APP 时时和CodePush服务的数据保持同步更新,实现热更新,而不用再去繁琐的把应用提交到应用商店,等待审核。这样可以让你的APP更快的更新,获得最新的体验,实现双赢。

    为了确保你的APP用户始终能正常使用您的应用程序,CodePush插件将会保留你的APP最新版本以前的副本,以便在您推送的最新版本发生崩溃时,可以自动回滚到上一个正常版本。

    注意:如果你的产品修改了 原生文件代码(例如修改AppDelegate.m/MainActivity.java等原生文件,或者添加新插件)不能通过CodePush进行更新,只能通过提交相应的应用商店更新。

    • 支持平台


    • iOS(7+)
    • Anddroid (4.1+)
    • Windows(UWP)

    我们会尽最大努力去维护CodePush和React Native版本的兼容性,但由于各个平台的升级,会更改一些特性,你可能需要使用特定版本的CodePush插件,以支持你正在使用的ReactNative版本。下面的表格中列出了CodePush版本正式支持的ReactNative版本:

    ReactNative 版本 支持CodePush版本
    <0.14 不支持
    v0.14 v1.3.0(introduced Android support(支持安卓))
    v0.15-v0.18 v1.4.0 - v1.6.0(introduced iOS asset support (不太懂,应该是支持iOS原生图片添加)
    v0.19-v0.28 v1.7.0+(introduced Android asset support)
    v0.29-v0.30 v1.13.0+(RN refactored native hosting code) (这个意思应该是改变了这个 RCTBundleURLProvider 写法)
    v0.31-v0.33 v1.14.6+(RN refactored native hosting code)
    v0.34-v0.35 v1.15.0+(RN refactored native hosting code)
    v0.36-v0.39 v1.16.0+(RN refactored resume handler) (这个是什么鬼?👻 )
    v0.40-v0.41 v1.17.0+(RN refactored iOS header files)
    v0.42+ 适配中
    • 已经支持的组件


    当React Native 引用本地图片时(例如:require("./foo.png")),支持CodePush热更新,以下列表是支持CodePush热更新的React Native组件

    组件 属性
    Image source
    MapView.Marker(Requiresreact-native-maps >=O.3.2) image
    ProgressViewIOS progressImage, trackImage
    TabBarIOS.Item icon, selectedIcon
    ToolbarAndroid(React Native 0.21.0+) actions[].icon, logo, overflowIcon

    以下列表的组件的某些属性目前还不支持CodePush更新

    组件 属性
    SliderIOS maximumTrackImage, minimumTrackImage, thumbImage, trackImage
    Video source
    • 开始入门


    CodePush是微软提供的一套用于 React Native 和 Cordova 应用的热更新服务。CodePush 是给 React Native 和 Cordova 开发者提供移动应用直接部署更新给用户设备的一项云服务。CodePush 作为一个中央仓库,开发者可以推送更新 (JS, HTML, CSS and images)到CodePush,应用可以从客户端 SDK 里面查询更新。CodePush 可以让应用有更多的可确定性,也可以让你直接接触用户群。在修复一些小问题和添加新特性的时候,不需要经过二进制打包,可以直接推送代码进行实时更新。

    • iOS

    1. 安装 CodePush CLI

    您可以使用基于NodeJSCLI来管理您的CodePush帐户。 要安装它,请打开命令提示符或终端,然后键入

    npm install -g code-push-cli //安装客户端
    
    code-push -v                 //可以查看版本
    

    注意:在OSX和Linux上,您可能需要使用sudo对此命令进行前缀

    2. 创建一个 CodePush 账号

    在使用发布更新之前,您首先需要创建一个CodePush账号,使用以下命令:

    code-push register     //注册账号 授权登录并得到access key
    

    会打开如下注册页面让你选择授权账号


    查看部署的key

    4.在你的APP里配置code-push SDK

    • 进入到你的项目目录下,在终端里运行
      npm install --save react-native-code-push@latest
      安装code-push组件

    • 与所有其他React Native第三方组件一样,iOS和Android的集成方式不同,因此根据您平台执行以下设置步骤。 请注意,如果您要同时配置这两个平台,建议为每个平台创建单独的CodePush应用程序。

    iOS 配置


    一旦你获得了CodePush插件,你需要将它集成到React Native应用程序的Xcode项目并正确配置。 为此,请执行以下步骤:
    为了迎合尽可能多的开发人员的偏好,CodePush支持三种安装方式:

    1. RNPM安装 - React Native包管理器 (RNPM) 是一个非常棒的工具,它为React Native插件提供了最简单的安装体验。 我们推荐这种方法。

    (1)从React Native v0.27开始,rnpm链接已经合并到React Native CLI中。运行以下命令:

    react-native link react-native-code-push
    

    如果您的应用程序使用的版本低于v0.27的React Native,请运行以下命令:

    rnpm link react-native-code-push
    

    注意:如果您尚未安装RNPM,可以通过简单地运行npm i -g rnpm安装rnpm然后再执行上述命令。

    就是这样!!这就是RNPM?哈哈😆

    (2) 系统将提示您输入要使用的部署密钥。 如果你还没有它,你可以通过运行code-push deployment ls <appName> -k来检索这个值,或者你可以选择忽略它(直接按<ENTER>),并在以后添加它。 开始吧,我们建议您先使用您的Staging部署密钥进行测试。

    2. CocoaPods安装 - 如果你在iOS应用里嵌入使用React Native,或者就是任性,喜欢使用CocoaPods,那么建议使用我们插件中提供的Podspec文件.

    (1)把CodePush依赖添加到Podfile里,并指向NPM的安装路径

    pod 'CodePush', :path => '../node_modules/react-native-code-push'
    

    (2)运行

    pod install
    
    3. "手动安装" -如果你不想依赖任何额外的工具,你可以使用这个方法.

    (1)打开你的APP的Xcode工程
    (2)点击Libraries文件夹右键‘Add Files to ....’,在node_modules里找到‘CodePush.xcodeproj’

    (3)把.a文件从Libraries/CodePush.xcodeproj/Products拖拽到Link Binary With Libraries选项


    codepush02.png

    通过code-push deployment ls <appName> -k查询Deployment Key

    2.点击➕按钮,选择Duplicate "Release" Configuration

    3.命名为 Staging或者你喜欢的

    4.选择 Build Setting

    5.点击工具栏上的+号按钮,选择Add User-Defined Setting

    6.命名为CONDPUSH_KEY,添加Staging和Production环境的deployment key

    7.打开你工程的Info.plist文件,修改CodePushDeploymentKey的值为:$(CODEPUSH_KEY)

    到此,你的iOS动态部署配置已完成,当你运行项目时,根据你运行的版本(Debug,Release)会去自动匹配StagingProduction环境

    动态部署分配 - 项目端修改

    The above section illustrated how you can leverage multiple CodePush deployments in order to effectively test your updates before broadly releasing them to your end users. However, since that workflow statically embeds the deployment assignment into the actual binary, a staging or production build will only ever sync updates from that deployment. In many cases, this is sufficient, since you only want your team, customers, stakeholders, etc. to sync with your pre-production releases, and therefore, only they need a build that knows how to sync with staging. However, if you want to be able to perform A/B tests, or provide early access of your app to certain users, it can prove very useful to be able to dynamically place specific users (or audiences) into specific deployments at runtime.

    In order to achieve this kind of workflow, all you need to do is specify the deployment key you want the current user to syncronize with when calling the codePush method. When specified, this key will override the "default" one that was provided in your app's Info.plist (iOS) or MainActivity.java (Android) files. This allows you to produce a build for staging or production, that is also capable of being dynamically "redirected" as needed.

    // Imagine that "userProfile" is a prop that this component received
    // which includes the deployment key that the current user should use.
    codePush.sync({ deploymentKey: userProfile.CODEPUSH_KEY });
    
    

    API 文档

    API文档可以参考以下这位大神的帖子写的非常好(安卓端配置也可以参考)
    React Native热更新部署/热更新-CodePush最新集成总结

    相关文章

      网友评论

        本文标题:翻译|react-native-code-push热更新部署

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