react native 热更新配置code push(android/ios)

框架选择
服务端配置
  • 要使用 code push服务,必须在服务器端配置好App信息。

  • 安装App Center CLI,用于服务端信息管理

$ sudo npm install -g appcenter-cli
  • 登录 app center
$ appcenter login
  • 运行以上命令并在命令行确认后,网页会弹出一个要求登陆的页面,登陆后,会得到一串Access code,复制粘贴回命令行,成功的话会返回登陆账号。
$ appcenter login
Opening your browser... 
? [Visit]:https://appcenter.ms/cli-login?hostname=assetfundeMacBook-Pro.local and enter the code:
? Access code from browser:  0cd185da****36a****7295b3****c8da9ba766a
Logged in as kk412027247
  • 添加App信息,这里要分别添加安卓与iOS,我的app名字是appProject ,以此为例
// -d 后面接的是app显示的名字,为了区分不同平台后面也写上平台命
// -o 表示运行系统(operation) 安卓/iOS
// -p 表示平台(Platform)这里是 react-native
$ appcenter apps create -d appProject-android -o Android -p React-Native
$ appcenter apps create -d appProject-ios -o iOS -p React-Native
  • 接下来运行一下appcenter apps list检测是否添加成功
$ appcenter apps list
  kk412027247/appProject-android
  kk412027247/appProject-ios
  • 将已添加的app部署热更新服务,一般会部署两个用于灰度更新,和正式更新,这里分别叫做Staging与Production。分别给安卓和iOS部署,所以一共要运行四行命令。

  • 建议部署其中一个叫做Staging,命令行一些默认行为会执行这个部署,如果没有这个名称,推送更新到部署的时候,要指定部署的名称,若不指定则会报错

// -a 是指应用(application),这里要写上“用户名和程序名”

// 部署IOS
$ appcenter codepush deployment add -a kk412027247/appProject-ios Staging
$ appcenter codepush deployment add -a kk412027247/appProject-ios Production
// 部署安卓
$ appcenter codepush deployment add -a kk412027247/appProject-android Staging
$ appcenter codepush deployment add -a kk412027247/appProject-android Production
  • 获取部署码,运行以上命令之后,命令行会返部署码,但是有可能没记下就关掉了命令行
appcenter codepush deployment list -a <ownerName>/<appName> <deploymentName> -k命令可以查看部署码
$ appcenter codepush deployment list -a kk412027247/appProject-ios -k
Name Key
Staging mgqluuNp1DTWNA5xn_c2YWWyLKGxBJA67O7UN
Production miDM42DG-ooHvW0VVa0tdPNAgRH2BJJ6j_X8V
$ appcenter codepush deployment list -a kk412027247/appProject-android -k
Name Key
Staging mgqluuNp1DTWNA5xn_c2YWWyLKGxBJA67O7UN
Production miDM42DG-ooHvW0VVa0tdPNAgRH2BJJ6j_X8V

*运行了一堆命令,最终得到这两组四个部署码,接下来须要将这些部署码按需配置到客户端里面。

客户端安装与配置

  • 安装依赖包
$ npm install --save react-native-code-push
$ react-native link
  • 运行react-native link的时候,命令行会提示输入部署码What is your CodePush deployment key for Android (hit <ENTER> to ignore) ,这个提示只是第一次输入有效。

  • 填写部署码,我这里都是输入Staging的部署码。如果是正式环境,建议写Production的部署码

  • iOS平台,修改/appProject/ios/appProject/Info.plist 文件,CodePushDeploymentKey 标签的值

  • 安卓平台,修改 /appProject/android/app/src/main/java/com/appProject/MainApplication.java

api调用(安静模式)

import CodePush from "react-native-code-push";
// 静默方式,app每次启动的时候,都检测一下更新 'ON_APP_RESUME'
const codePushOptions = { checkFrequency: CodePush.CheckFrequency.ON_APP_RESUME };
import _App from './App';
// 在组件根节点的地方设置热更新。
const App = CodePush(codePushOptions)(_App);
  • 这个安静模式是我最喜欢一种,配置简单,在用户没察觉的情况下就更新了app。在用户打开app的时候,自动下载更新包,下次再启动的时候自动安装更新包。

  • api调用(自定义模式),在更新之前可以获取更新包的大小,更新的具体信息,监听下载进度等等。

import CodePush from "react-native-code-push";
...

  state = {receivedBytes : 0, totalBytes : 0, showProcess: false, showIndicator:false};

  _handleUpdate = async () => {
    this.setState({showIndicator: true});

    // checkForUpdate 返回promise,包含了服务端安装包的各种信息,包的大小版本之类的,
    // 如果要构建构建个性化更新界面,需要用到此方法
    const updateMessage = await CodePush.checkForUpdate() || {};

    // console.log(updateMessage);
    // return;

    // 执行更新
    await CodePush.sync(
      // 第一个参数吗,是个对象,可定义更新的动作
      {
        // 安装模式 'IMMEDIATE' 立刻安装, ON_NEXT_RESUME 下次启动安装
        installMode: CodePush.InstallMode.ON_NEXT_RESUME,

        // 强制更新模式下的安装,默认是IMMEDIATE 直接安装
        mandatoryInstallMode: CodePush.InstallMode.IMMEDIATE,

        //更新确认弹窗设置,设置系统自带弹窗中的内容
        updateDialog:{
          mandatoryUpdateMessage:'强制更新内容: '+updateMessage.description,
          mandatoryContinueButtonLabel:'强制更新/确认',
          optionalIgnoreButtonLabel:'取消',
          optionalInstallButtonLabel:'安装',
          optionalUpdateMessage:'本次更新内容: '+updateMessage.description,
          title:'发现新版本'
        }},
      // 第二个参数,更新状态检测,返回数字
      //0 已经是最新,1 安装完成、等待生效,2 忽略更新,3 未知错误,4 已经在下载了,5 查询更新,6 弹出了更新确认界面,7 下载中,8下载完成
      (status)=>{

        switch (status){
          case 0: alert('已经是最新版本');
            break;
          case 1 : !updateMessage.isMandatory && alert('更新完成, 再启动APP更新即生效');
            break;
          case 3: alert('出错了,未知错误');
            break;
          case 7 : this.setState({showProcess: true});
            break;
          case 8 : this.setState({showProcess: false});
            break;
        }
      },
      // 第三个参数,检测下载过程
      ({receivedBytes,totalBytes})=>{
        // console.log('DownloadProgress: ', receivedBytes, totalBytes);
        this.setState({receivedBytes: (receivedBytes/1024).toFixed(2), totalBytes: (totalBytes/1024).toFixed(2)})
      },
    );
    this.setState({showIndicator: false});
  };

  handleUpdate = () => this._handleUpdate().catch(()=>{
    this.setState({showIndicator: false});
    alert('网络错误')
  });
  • 这个配置稍微复杂一点,但是自定义程度很高,比如要做下载滚动条,查看更新日志,都可以实现。默认情况下,再次启动app的时候,更新生效。

推送更新

  • 设置完客户端之后,须要在服务端推送更细,客户端才能检测到更新。以上效果都是已经从服务端做了更新推送的。
  • 推送命令,在项目根目录运行 appcenter codepush release-react -a <ownerName>/MyApp。
//  在默认情况下,更新会推送到Staging的部署
$ appcenter codepush release-react -a kk412027247/appProject-ios
$ appcenter codepush release-react -a kk412027247/appProject-android

//  指定版本更新 -d 加部署名
$ appcenter codepush release-react -a kk412027247/appProject-ios -d Production
$ appcenter codepush release-react -a kk412027247/appProject-android -d Production

// 设置更新日志,供前端读取
$ appcenter codepush release-react -a kk412027247/appProject-ios  --description '1800的更新'
$ appcenter codepush release-react -a kk412027247/appProject-android  --description '1800的更新'
  • 强制更新,在项目根目录运行 appcenter codepush release-react -a <ownerName>/MyApp -m true
  • 其实就是多了个-m true 参数而已,强制更新的默认效果是,用弹窗确认更新时候,只有确认键,并且安装成功后是立即生效,所以app可能会闪一下。
$ appcenter codepush release-react -a kk412027247/appProject-ios -m true  --description '1052的更新'
$ appcenter codepush release-react -a kk412027247/appProject-android -m true  --description '1052的更新'
  • 查看更新看历史appcenter codepush deployment history -a <ownerName>/<appName> <deploymentName>
// 显示历史
$ appcenter codepush deployment history -a kk412027247/appProject-ios Staging

// 清空历史
$ appcenter codepush deployment clear Staging -a kk412027247/appProject-ios
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 224,896评论 6 522
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 96,283评论 3 402
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 172,085评论 0 367
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 61,010评论 1 300
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 70,015评论 6 400
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 53,492评论 1 314
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 41,858评论 3 428
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 40,829评论 0 279
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 47,374评论 1 324
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 39,409评论 3 346
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 41,527评论 1 355
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 37,131评论 5 351
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 42,858评论 3 339
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 33,296评论 0 25
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 34,434评论 1 276
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 50,087评论 3 381
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 46,597评论 2 366