iT邦幫忙

2021 iThome 鐵人賽

DAY 30
0
Mobile Development

卡卡30天學 React Native系列 第 30

[ 卡卡 DAY 30 ] - React Native codepush iOS 熱更新

  • 分享至 

  • xImage
  •  

第一次認識 React Native 就是因為熱更新
所以怎麼可以不介紹大家一下呢~
AppCenter 熱更新(codepush) 你聽過嗎?

熱更新是什麼?

CodePush 為一箇中央倉庫,開發者可以推送更新 (JS, HTML, CSS and images),應用可以從客戶端 SDK 裡面查詢更新。

安裝 react-native-code-push

npm install --save react-native-code-push
cd ios
pod install
cd ..

安裝 appcenter

先申請 appcenter 的帳號,且參照 getting start 的設定

https://ithelp.ithome.com.tw/upload/images/20211011/20142011VCAMxh9hCY.png

npm install -g appcenter-cli
appcenter -v
cd ios
pod install
cd ..
appcenter login
 <<輸入網頁的Authentication>>

App center 登入
他會跳出權限碼,回到 cmd Access code from browser 填入 enter,即登入成功。

bundle 配置開啟 AppDelegate.m 檔案

#import <CodePush/CodePush.h>

修改 sourceURLForBridge:
主要是在 release 環境的時候讀取 codepush 的 jsbundle

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG // 測試 debug
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
  // 刪掉這個
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

  // 使用這個
  return [CodePush bundleURL];
#endif }

RN配置

於App.js引入

import codePush from "react-native-code-push";

class App extends Component {
  constructor(props) {
    super(props);
  }

  codePushStatusDidChange(status) {
    switch (status) {
      case codePush.SyncStatus.CHECKING_FOR_UPDATE:
        console.log('Checking for updates.');
        break;
      case codePush.SyncStatus.DOWNLOADING_PACKAGE:
        console.log('Downloading package.');
        break;
      case codePush.SyncStatus.INSTALLING_UPDATE:
        console.log('Installing update.');
        break;
      case codePush.SyncStatus.UP_TO_DATE:
        console.log('Up-to-date.');
        break;
      case codePush.SyncStatus.UPDATE_INSTALLED:
        console.log('Update installed.');
        break;
    }
  }

  codePushDownloadDidProgress(progress) {
    console.log(
      progress.receivedBytes + ' of ' + progress.totalBytes + ' received.'
    );
  }

  render() {
    const initRouteName = this.props.componentName || appRouter.HOME;
    return (  
   {..... code }
    );
  }
}


const CodePushOptions = {
  // 檢查更新(ON_APP_START:啟動APP/ON_APP_RESUME:程序從後台控制/MANUAL:手動控制)
  checkFrequency: codePush.CheckFrequency.ON_APP_RESUME,
  // 何時安裝(ON_NEXT_RESTART:下次程序啟動/ON_NEXT_RESUME:下次程序從後台進入前台/ON_NEXT_SUSPEND:在後台更新/IMMEDIATE:立即更新,並重新啟動)
  installMode: codePush.InstallMode.IMMEDIATE,
  // 重啟之前,在後台待的最短時間
  minimumBackgroundDuration: 0,
  // 强制更新並啟動
  mandatoryInstallMode: codePush.InstallMode.IMMEDIATE,
  // 更新時的提示更新窗,iOS不支援
  rollbackRetryOptions: {
    delayInHours: 1, // rollback重試,1小時/次
    maxRetryAttempts: 24 // rollback重試,最多嘗試24次
  }
};

App = codePush(CodePushOptions)(App);
export default App;

環境配置 custom build settings

這個步驟很重要唷!!!我也是研究了很久才成功...

This mechanism allows you to easily configure your builds to produce binaries, which are configured to synchronize with different CodePush deployments.

  1. 打開 xcode 此專案 Project navigator

  2. 選取專案 targets 的 info tab

https://ithelp.ithome.com.tw/upload/images/20211011/20142011qUdLigko3P.png

  1. 於 configurations 按 + 選取 "Duplicate Release Configuration"
  2. 把名字改成 Staging
  3. 於 Build Settings tab,在 toolbar 按 + 選取 Add User-Defined Setting
    把名字設定成 “Multi_Deployment_Config”
    • Release 設定 value:$(BUILD_DIR)/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME)
    • Staging 設定 value: $(BUILD_DIR)/Release$(EFFECTIVE_PLATFORM_NAME)
  4. 選 Build Settings tab,在 toolbar 按 + 選取 Add User-Defined Setting
    把名字設定成 “CODEPUSH_KEY”,再將 value 設定成 appcenter codepush 的 key。
    https://ithelp.ithome.com.tw/upload/images/20211011/20142011T96cuPbHlz.png
  5. 於 iOS folder 的 Info.plist 將 CodePushDeploymentKey 輸入 $(CODEPUSH_KEY),配置完成。

appcenter codepush 指令介紹及補充

appcenter codepush release-react
-a {專案名稱}
-d {環境}
-t {版本號}
-- description {敘述}
-m: 強制更新

看現在版本狀態

code-push deployment ls {專案名稱}

看所有版本列表

code-push deployment h {專案名稱} {環境}

Install metrics 中各個引數的意思

  • Active 成功安裝並執行當前 release 的使用者的數量(當使用者開啟你的 App 就會執行這個 release),這個數字會根據使用者成功 installed 這個 release 或者離開這個 release(installed 了別的更新包,或者解除安裝了 App),總之有它就知道當前 release 的活躍使用者量
  • Total 成功 installed 這個 release 的使用者的數量,這個數量只會增不會減。
  • Pending 當前這個 release 被下載的數量,但是還沒有被 installed,因此這一個數值會在 release 被下載時增長,在 installed 時降低。這個指標主要是適配於沒有為更新配置立馬安裝(mandatory)。如果你為更新配置了立馬安裝但是還是有 pending,很有可能是你的 App 啟動時沒有呼叫 notifyApplicationReady。
  • Rollbacks 這個數字代表在客戶端自動回滾的數量,理想狀態下,它應該為 0,如果你釋出了一個更新包,在 installing 中發生 crash,code-push 將會把它回滾到之前的一個更新包中。

https://ithelp.ithome.com.tw/upload/images/20211011/201420112CK6pzbA3S.png

達成30天鐵人賽

一個月的時間學習了很多也認清了很多,總算完成30天的鐵人賽嚕!!!
希望這些文章大家都可以多多指教,倘若有誤的地方也歡迎提出來~
我們都是從挫敗中慢慢成長長大的小小工程師!
喜歡我的文章麻煩請訂閱嚕! :P
/images/emoticon/emoticon51.gif

參考:
app center
使用 React Native 用戶端 SDK 開始
multi-deployment-testing-ios.md


上一篇
[ 卡卡 DAY 29 ] - React Native iOS 打包步驟及離線 jsbundle產生
下一篇
[ 卡卡 DAY 31 ] - React Native 跨平台的 Shadow 處理
系列文
卡卡30天學 React Native31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0

終於完賽~~恭喜完賽!!! 之後有空來跟著卡卡學 React Native~/images/emoticon/emoticon42.gif

學習 Type Script 遇到iris 不再卡卡

0

耶乎!恭喜完賽~~(擁抱)

耶~~~ 終於 /images/emoticon/emoticon07.gif

我要留言

立即登入留言