React Native之code-push的热更新(ios android)

React Native支持大家用React Native技术开发APP,并打包生成一个APP。在动态更新方面React Native只是提供了动态更新的基础,对将应用部署到哪里,如何进行动态更新并没有支持的那么完善。好在微软开发了CodePush,填补React Native 应用在动态更新方面的空白。CodePush 是微软提供的一套用于热更新 React Native 和 Cordova 应用的服务。下面将向大家分享如何使用CodePush实时更新你的应用。

一,CodePush简介

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

CodePush 可以进行实时的推送代码更新:

  • 直接对用户部署代码更新
  • 管理 Alpha,Beta 和生产环境应用
  • 支持 React Native 和 Cordova
  • 支持JavaScript 文件与图片资源的更新

CodePush开源了react-native版本,react-native-code-push托管在GitHub上。

二,安装与注册CodePush

2.1,安装 CodePush CLI

在终端输入如下:

 npm install -g code-push-cli
  code-push -v //查看版本 

2.2,创建一个CodePush 账号

 code-push register

在终端输入code-push register,会打开注册页面让你选择授权账号。授权通过之后,CodePush会告诉你“access key”,复制此key到终端即可完成注册。https://appcenter.ms/

三,集成CodePush SDK

第一步:在项目中安装 react-native-code-push插件,终端进入你的项目根目录然后运行

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

3.1,Android集成SDK

第二步: 运行 npm link react-native-code-push。这条命令将会自动帮我们在anroid文件中添加好设置

第三步: 在 android/app/build.gradle文件里面添如下代码:

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

如果第二步没有成功,则手动配置

 ...
dependencies {
...
implementation project(':react-native-code-push')
...
}
...

在/android/settings.gradle中添加如下代码:

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

在/android/app/src/com/.../.../MainApplication.java中添加如下代码:

 ...
import com.microsoft.codepush.react.CodePush; ... @Override
protected String getJSBundleFile() {
return CodePush.getJSBundleFile();
} ... @Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
...
new CodePush(CODEPUSH_KEY_STAGING, getApplicationContext(), BuildConfig.DEBUG)
);
}
...

第四步: 运行 code-push deployment -k ls <appName>获取 部署秘钥。默认的部署名是 staging,所以 部署秘钥(deployment key ) 就是 staging。

第五步: 添加配置。当APP启动时我们需要让app向CodePush咨询JS bundle的所在位置,这样CodePush就可以控制版本。更新 MainApplication.java文件:

 public class MainApplication extends MultiDexApplication implements ReactApplication {

     private final String CODEPUSH_KEY_PRODUCTIO = "ZaHJQhSDR7XVGMMjzbQnc686dbac";
private final String CODEPUSH_KEY_STAGING = "wiIxKA1Hp7g3Tb5Phytc686dbac-";
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { @Override
protected String getJSBundleFile() {
return CodePush.getJSBundleFile();
} @Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
} @Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new CodePush(CODEPUSH_KEY_STAGING, getApplicationContext(), BuildConfig.DEBUG)
);
} @Override
protected String getJSMainModuleName() {
return "index";
}
}; @Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
} }

第六步:修改versionName。
在 android/app/build.gradle中有个 android.defaultConfig.versionName属性,我们需要把 应用版本改成 0.0.1(默认是1.0,但是codepush需要三位数)。

 android{
defaultConfig{
versionName "0.0.1"
}

3.2,iOS集成

第二步: 运行 rnpm link react-native-code-push。这条命令将会自动帮我们在ios中添加好设置

在终端运行此命令之后,终端会提示让你输入deployment key,这是你只需将你的deployment Staging key输入进去即可,如果不输入则直接单击enter跳过即可。

如果第二部没有成功则手动link 。

1,首先在node_modules 中找到这个codepush 文件,然后拖进去如下图

2,特别注意一点由于这个库需要一个link 一个静态库(libz)如下图所示

3,添加codepush的头文件路径,在 header Search Paths 中添加这句

 $(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush

第三步: 在build Settings页签中单击 + 按钮然后选择添加User-Defined Setting,然后输入CODEPUSH_KEY(名称随意),然后填入deployment key:

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

四,使用CodePush

4.1,codepush常用命令

  1. 安装 CodePush CLI: npm install -g code-push-cli
  2. 创建一个CodePush 账号: code-push register
  3. 登陆:code-push login
  4. 注销:code-push loout
  5. 列出登陆的token: code-push access-key ls
  6. 删除某个 access-key: code-push access-key rm <accessKye>
  7. 创建一个app: code-push app add <appName> <os> <platform> 其中os为ios或android,platform为react-native
  8. 在账号里移除一个 app:code-push app remove 或者 rm
  9. 重命名一个存在 app: code-push app rename
  10. 列出账号下面的所有 app: code-push app list 或则 ls
  11. 把app的所有权转移到另外一个账号:code-push app transfer
  12. 直接使用下面的命令查到对应应用的deployment key: code-push deployment ls <appName> -k
  13. 部署:code-push deployment add <appName>
  14. 重命名:code-push deployment rename <appName>
  15. 删除部署:code-push deployment rm <appName>
  16. 列出应用的部署情况:code-push deployment ls <appName>
  17. 查看部署的key:code-push deployment ls <appName> -k
  18. 查看历史版本:code-push deployment history <appName> <deploymentNmae> (Production 或者 Staging)
  19. 发布热更新:code-push release-react <appName> <os> --description "1.描述"
  20. 发布热更新:code-push release-react <appName> <os> -t 版本 -d 环境 --des 描述 -m true (强制更新)
  21. 删除部署:code-push deployment rm <appName> <deploymentNmae> deploymentNmae(Production 或者 Staging)
  22. 清除历史部署记录 code-push deployment clear <appName> Production or Staging
  23. 回滚 code-push rollback <appName> Production --targetRelease v4(codepush服务部署的版本号)

4.2,更新方式

1、首先最简单的一种就是  这种无声的热更新,也就是说热更新不会给用户任何提示,都在默默的进行更新,用户完全体会不到整个过程

classMyAppextendsComponent<{}> {}

MyApp= codePush(MyApp);

exportdefaultMyApp;

2、第二种 也是无声更新,比第一种情况多了一种就是热更新每次会在后台返回前台的时候进行热更新。这里可以看到几个参数,

checkFrequency有三种状态如下

ON_APP_START:  //在组件初始化的时候进行热更新

ON_APP_RESUME://在每次app从后台回到前台的时候进行热更新

MANUAL://不进行热更新,需要自己手动配置

InstallMode 有如下几种状态

IMMEDIATE  :// 安装热更新,并且重启app

ON_NEXT_RESTART:  //下次启动的时候启动热更新

ON_NEXT_RESUME  //从后台回到前台的时候启动

ON_NEXT_SUSPEND:  在后台的时候进行热更新

classMyAppextendsComponent<{}> {}

MyApp= codePush({ checkFrequency: codePush.CheckFrequency.ON_APP_RESUME, installMode: codePush.InstallMode.ON_NEXT_RESUME})(MyApp);

exportdefaultMyApp;

updateDialog  当为true 是,可以在更新的时候提示用户需要更新

4.3,codepush使用

1,登陆成功后,使用code-push app add <appName> <os> <platform>创建一个app,如下:

 code-push app add Test-ios ios react-native

创建成功后会返回对应的deployment key,将其拷贝到对应的配置文件即可

iOS:

Android:

...

import java.util.Arrays;
import java.util.List; public class MainApplication extends MultiDexApplication implements ReactApplication { private final String CODEPUSH_KEY_PRODUCTIO = "CuEhrwd_ZaHJ";
private final String CODEPUSH_KEY_STAGING = "XoFT5uAm_wiI";
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { ...

2,配置js

  CodePush.sync({
updateDialog: {
//是否显示更新描述
appendReleaseDescription : true ,
//更新描述的前缀。 默认为"Description"
descriptionPrefix : '' ,
mandatoryUpdateMessage: '',
//强制更新按钮文字,默认为continue
mandatoryContinueButtonLabel : '立即更新' ,
//非强制更新时,按钮文字,默认为"ignore"
optionalIgnoreButtonLabel : '稍后',
//非强制更新时,确认按钮文字. 默认为"Install"
optionalInstallButtonLabel : '后台更新',
//非强制更新时,检查到更新的消息文本
optionalUpdateMessage : ' ' ,
//Alert窗口的标题
title : '更新提示'
},
mandatoryInstallMode: CodePush.InstallMode.IMMEDIATE,
deploymentKey: CODE_PUSH_STAGING,
},(status) => {
switch (status) {
case CodePush.SyncStatus.CHECKING_FOR_UPDATE:
//alert(CodePush.SyncStatus.CHECKING_FOR_UPDATE);
break;
// case CodePush.SyncStatus.AWAITING_USER_ACTION:
// alert('codePush.SyncStatus.AWAITING_USER_ACTION');
// break;
case CodePush.SyncStatus.DOWNLOADING_PACKAGE:
//应用更新中,请稍后...
break;
case CodePush.SyncStatus.INSTALLING_UPDATE:
CodePush.allowRestart();
break;
case CodePush.SyncStatus.UP_TO_DATE:
//当前已是最新版本
break;
// case CodePush.SyncStatus.UPDATE_IGNORED:
// alert('codePush.SyncStatus.UPDATE_IGNORED');
// break;
// case CodePush.SyncStatus.UPDATE_INSTALLED:
// alert('codePush.SyncStatus.UPDATE_INSTALLED');
// break;
// case CodePush.SyncStatus.SYNC_IN_PROGRESS:
// alert('codePush.SyncStatus.SYNC_IN_PROGRESS');
// break;
// case CodePush.SyncStatus.UNKNOWN_ERROR:
// alert('codePush.SyncStatus.UNKNOWN_ERROR');
//break;
}
},

五,发布更新

code-push release-react <appName> <os> --description "1.描述"

 code-push release-react Test-ios ios --description "1.测试热更新"
 code-push release-react Test-android android --description "1.测试热更新"

以下发布更新需手动打包:

code-push release <应用名称> <Bundles所在目录> <对应的应用版本> --deploymentName: 更新环境 --description: 更新描述 --mandatory: 是否强制更新

 react-native bundle --platform ios --entry-file index.js --bundle-output ./bundles/index.ios.bundle --dev false

 code-push release Test-ios ./bundles/index.ios.bundle 1.0.0 --description "1.测试热更新" --mandatory false

React Native之code-push的热更新(ios android)的更多相关文章

  1. React Native之图片保存到本地相册(ios android)

    React Native之图片保存到本地相册(ios android) 一,需求分析 1,react native保存网络图片到相册,iOS端可以用RN自带的CameraRoll完美解决,但是andr ...

  2. React Native热更新(iOS)-Pushy

    React Native的出现,使的开发iOS代码出现了更便捷的方式.由于RN是使用脚本语言编写的,实现了"解释执行"的方式,而这种执行方式的修改只需替换脚步即可,不需要重新发布程 ...

  3. React Native之坑总结(持续更新)

    React Native之坑总结(持续更新) Genymotion安装与启动 之前我用的是蓝叠(BlueStack)模拟器,跑RN程序也遇到了一些问题,都通过搜索引擎解决了,不过没有记录. 但是Blu ...

  4. 优化单页面开发环境:webpack与react的运行时打包与热更新

    前面两篇文章介绍初步搭建单页面应用的开发环境: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-router实现单页面应用路由 这 ...

  5. 一、React Native 搭建开发环境(1)(Mac OS - IOS项目)

    React Native是Facebook推出的一个开发IOS和安卓APP的技术.至于更多的详情,这里不再描述,大家可以自行百度它的定义. 目的: 由于我想在一台电脑上同时开发IOS和Android两 ...

  6. 一、React Native 搭建开发环境(1)(Mac OS - IOS项目篇)

    React Native是Facebook推出的一个开发IOS和安卓APP的技术.至于更多的详情,这里不再描述,大家可以自行百度它的定义. 原因:由于我想在一台电脑上同时开发IOS和Android两个 ...

  7. 解决React Native unable to load script from assets index.android.bundle on windows

    React Native运行的时候,经常碰到React Native unable to load script from assets index.android.bundle on windows ...

  8. webpack 配置react脚手架(二):热更新

    下面继续配置 webpack dev server    hot module replacement: 首先配置dev-server     安装     npm i webpack-dev-ser ...

  9. React Native - 1 Windows下的环境配置(Windows+Android)

    参考:https://facebook.github.io/react-native/docs/getting-started.html(要FQ)     网站上建议使用Chocolatey去配环境, ...

随机推荐

  1. Java高级教程

    目录 1.Java面向对象方法 1.1. 创建类和对象的方法 1.2. this的使用 1.3. 静态域和静态方法 1.3.1. 静态域:属于类的级别 1.3.2.静态常量 1.3.3 静态方法 1. ...

  2. 【Teradata】gtwglobal查看

    使用root登录TD数据库节点 cnsterm 6 start gtwglobal cnsterm 3 //上一个命令的window编号 h //帮助 QUIT //退出

  3. 给 datepicker 设定日期格式

    datepicker 是 JQueryUI 提供的日期控件,仅提供日期选择,不提供时间,但基本够用了. 其日期格式默认是:mm/dd/yy 格式字符代表的含义如下: d - 每月的第几天 (没有前导零 ...

  4. (转)Spring Boot (十):邮件服务

    http://www.ityouknow.com/springboot/2017/05/06/spring-boot-mail.html Spring Boot 仍然在狂速发展,才几个多月没有关注,现 ...

  5. django ORM的总结

    1.django分表的方案:   https://mp.weixin.qq.com/s?__biz=MjM5NjA3Nzk3Ng==&mid=2648154502&idx=1& ...

  6. UVA1627-Team them up!(动态规划)

    Problem UVA1627-Team them up! Total Submissions:3577  Solved:648 Time Limit: 3000 mSec Problem Descr ...

  7. [tool] Visual Studio Code python配置

    语言设置 安装中文插件即可成为中文 选择一个Python解释器 Python是一种解释型语言,为了运行Python代码并获取Python IntelliSense,您必须告诉VS Code使用哪个解释 ...

  8. hyperledge环境安装

    1.安装环境 1)本机安装 前提是已经安装好了docker\docker-compose\go,相应的内容可见 docker-1-环境安装及例子实践 docker官方文档学习-1-Docker for ...

  9. bat性能效率受啥影响

    代码效率的提升往往由算法决定,曾发过专贴(浅谈提高代码效率的编写习惯:http://tieba.baidu.com/p/1187281687),但是以实例为主,并没有太多的文字说明,现在归纳一下:影响 ...

  10. hibernate 解决 org.hibernate.StaleStateException: Batch update returned unexpected row count from update [0]; actual row count: 0; expected: 1

    这是因为没有设置要更新的主键导致的,只要设置了要更新的主键就能更新成功(没有主键当然不能更新)