react native 熱更新配置code push（android/ios）

框架選擇
服務(wù)端配置

  • 要使用 code push服務(wù)，必須在服務(wù)器端配置好App信息。

  • 安裝App Center CLI，用于服務(wù)端信息管理

$ sudo npm install -g appcenter-cli
  • 登錄 app center
$ appcenter login
  • 運(yùn)行以上命令并在命令行確認(rèn)后，網(wǎng)頁(yè)會(huì)彈出一個(gè)要求登陸的頁(yè)面，登陸后，會(huì)得到一串Access code，復(fù)制粘貼回命令行，成功的話會(huì)返回登陸賬號(hào)。
$ 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顯示的名字，為了區(qū)分不同平臺(tái)后面也寫(xiě)上平臺(tái)命
// -o 表示運(yùn)行系統(tǒng)（operation） 安卓/iOS
// -p 表示平臺(tái)（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
  • 接下來(lái)運(yùn)行一下appcenter apps list檢測(cè)是否添加成功
$ appcenter apps list
  kk412027247/appProject-android
  kk412027247/appProject-ios

  • 將已添加的app部署熱更新服務(wù)，一般會(huì)部署兩個(gè)用于灰度更新，和正式更新，這里分別叫做Staging與Production。分別給安卓和iOS部署，所以一共要運(yùn)行四行命令。

  • 建議部署其中一個(gè)叫做Staging，命令行一些默認(rèn)行為會(huì)執(zhí)行這個(gè)部署，如果沒(méi)有這個(gè)名稱(chēng)，推送更新到部署的時(shí)候，要指定部署的名稱(chēng)，若不指定則會(huì)報(bào)錯(cuò)

// -a 是指應(yīng)用（application），這里要寫(xiě)上“用戶(hù)名和程序名”

// 部署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
  • 獲取部署碼，運(yùn)行以上命令之后，命令行會(huì)返部署碼，但是有可能沒(méi)記下就關(guān)掉了命令行
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

*運(yùn)行了一堆命令，最終得到這兩組四個(gè)部署碼，接下來(lái)須要將這些部署碼按需配置到客戶(hù)端里面。

客戶(hù)端安裝與配置

  • 安裝依賴(lài)包
$ npm install --save react-native-code-push
$ react-native link

  • 運(yùn)行react-native link的時(shí)候，命令行會(huì)提示輸入部署碼What is your CodePush deployment key for Android (hit <ENTER> to ignore) ，這個(gè)提示只是第一次輸入有效。

  • 填寫(xiě)部署碼，我這里都是輸入Staging的部署碼。如果是正式環(huán)境，建議寫(xiě)Production的部署碼

  • iOS平臺(tái)，修改/appProject/ios/appProject/Info.plist 文件,CodePushDeploymentKey 標(biāo)簽的值。

  • 安卓平臺(tái)，修改 /appProject/android/app/src/main/java/com/appProject/MainApplication.java。

api調(diào)用（安靜模式）

import CodePush from "react-native-code-push";
// 靜默方式，app每次啟動(dòng)的時(shí)候，都檢測(cè)一下更新 'ON_APP_RESUME'
const codePushOptions = { checkFrequency: CodePush.CheckFrequency.ON_APP_RESUME };
import _App from './App';
// 在組件根節(jié)點(diǎn)的地方設(shè)置熱更新。
const App = CodePush(codePushOptions)(_App);

  • 這個(gè)安靜模式是我最喜歡一種，配置簡(jiǎn)單，在用戶(hù)沒(méi)察覺(jué)的情況下就更新了app。在用戶(hù)打開(kāi)app的時(shí)候，自動(dòng)下載更新包，下次再啟動(dòng)的時(shí)候自動(dòng)安裝更新包。

  • api調(diào)用（自定義模式），在更新之前可以獲取更新包的大小，更新的具體信息，監(jiān)聽(tīng)下載進(jìn)度等等。

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

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

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

    // checkForUpdate 返回promise，包含了服務(wù)端安裝包的各種信息，包的大小版本之類(lèi)的,
    // 如果要構(gòu)建構(gòu)建個(gè)性化更新界面，需要用到此方法
    const updateMessage = await CodePush.checkForUpdate() || {};

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

    // 執(zhí)行更新
    await CodePush.sync(
      // 第一個(gè)參數(shù)嗎，是個(gè)對(duì)象，可定義更新的動(dòng)作
      {
        // 安裝模式 'IMMEDIATE' 立刻安裝， ON_NEXT_RESUME 下次啟動(dòng)安裝
        installMode: CodePush.InstallMode.ON_NEXT_RESUME,

        // 強(qiáng)制更新模式下的安裝，默認(rèn)是IMMEDIATE 直接安裝
        mandatoryInstallMode: CodePush.InstallMode.IMMEDIATE,

        //更新確認(rèn)彈窗設(shè)置，設(shè)置系統(tǒng)自帶彈窗中的內(nèi)容
        updateDialog:{
          mandatoryUpdateMessage:'強(qiáng)制更新內(nèi)容: '+updateMessage.description,
          mandatoryContinueButtonLabel:'強(qiáng)制更新/確認(rèn)',
          optionalIgnoreButtonLabel:'取消',
          optionalInstallButtonLabel:'安裝',
          optionalUpdateMessage:'本次更新內(nèi)容: '+updateMessage.description,
          title:'發(fā)現(xiàn)新版本'
        }},
      // 第二個(gè)參數(shù)，更新?tīng)顟B(tài)檢測(cè)，返回?cái)?shù)字
      //0 已經(jīng)是最新，1 安裝完成、等待生效，2 忽略更新，3 未知錯(cuò)誤，4 已經(jīng)在下載了，5 查詢(xún)更新，6 彈出了更新確認(rèn)界面，7 下載中，8下載完成
      (status)=>{

        switch (status){
          case 0: alert('已經(jīng)是最新版本');
            break;
          case 1 : !updateMessage.isMandatory && alert('更新完成, 再啟動(dòng)APP更新即生效');
            break;
          case 3: alert('出錯(cuò)了，未知錯(cuò)誤');
            break;
          case 7 : this.setState({showProcess: true});
            break;
          case 8 : this.setState({showProcess: false});
            break;
        }
      },
      // 第三個(gè)參數(shù)，檢測(cè)下載過(guò)程
      ({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('網(wǎng)絡(luò)錯(cuò)誤')
  });
  • 這個(gè)配置稍微復(fù)雜一點(diǎn)，但是自定義程度很高，比如要做下載滾動(dòng)條，查看更新日志，都可以實(shí)現(xiàn)。默認(rèn)情況下，再次啟動(dòng)app的時(shí)候，更新生效。

推送更新

  • 設(shè)置完客戶(hù)端之后，須要在服務(wù)端推送更細(xì)，客戶(hù)端才能檢測(cè)到更新。以上效果都是已經(jīng)從服務(wù)端做了更新推送的。
  • 推送命令，在項(xiàng)目根目錄運(yùn)行 appcenter codepush release-react -a <ownerName>/MyApp。
//  在默認(rèn)情況下，更新會(huì)推送到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

// 設(shè)置更新日志，供前端讀取
$ appcenter codepush release-react -a kk412027247/appProject-ios  --description '1800的更新'
$ appcenter codepush release-react -a kk412027247/appProject-android  --description '1800的更新'
  • 強(qiáng)制更新，在項(xiàng)目根目錄運(yùn)行 appcenter codepush release-react -a <ownerName>/MyApp -m true
  • 其實(shí)就是多了個(gè)-m true 參數(shù)而已，強(qiáng)制更新的默認(rèn)效果是，用彈窗確認(rèn)更新時(shí)候，只有確認(rèn)鍵，并且安裝成功后是立即生效，所以app可能會(huì)閃一下。
$ 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
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容