CodePush整合

iOS_阿斯頓發表於2018-10-22

CodePush是什麼？

CodePush 是一個微軟開發的雲伺服器。通過它，開發者可以直接在使用者的裝置上部署手機應用更新。CodePush 相當於一箇中心倉庫,開發者可以推送當前的更新(包括JS/HTML/CSS/IMAGE等)到CodePush，然後應用將會查詢是否有更新。

支援的平臺以及系統

  • iOS (7+)
  • Android (4.1+)

接入CodePush

  1. 安裝CodePush CLI npm install -g code-push-cli 全域性安轉一次即可。

  2. 註冊CodePush 賬號 code-push register 根據提示一步步走，賬號一般選擇github賬號授權。授權成功後會給我們一個校驗的key.將該key貼上複製至終端相應位置，回車進行確定。

  3. 在CodePush伺服器註冊App(注意：iOS和Android 會區分成兩個應用。應用新增成功後會返回對應的 production和Staging兩個key,production代表生產版的熱更新部署，Staging代表開發版的熱更新部署，在ios中將staging的部署key複製在info.plist的CodePushDeploymentKey值中，在android中複製在Application的getPackages的CodePush中)
    1. 新增iOS平臺應用 code-push app add <AppName> ios react-native
    2. 新增Android平臺應用 code-push app add <AppName> Android react-native
    3. 檢視新增的app code-push app list
  4. RN程式碼中繼承CodePush
    1. 安裝元件 npm install --save react-native-code-push
    2. 自動新增原生依賴 react-native link react-native-code-push
  5. 在原生應用中配置CodePush
  6. 釋出更新

原生應用中配置CodePush https://github.com/Microsoft/react-native-code-push/blob/master/docs/multi-deployment-testing-ios.md

  1. 使用Xcode開啟專案，Xcode的專案導航檢視中的 PROJECT下選擇你的專案,選擇info標籤，在Configurations節點下單擊 + 按鈕,選擇Duplicate "Release Configaration",輸入Staging
    CodePush整合
  2. 選擇Build Settings tab，搜尋Build Location -> Per-configuration Build Products Path -> Staging，將之前的值：$(BUILD_DIR)/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME) 改為：$(BUILD_DIR)/Release$(EFFECTIVE_PLATFORM_NAME)
    CodePush整合
  3. 選擇Build Settings tab，點選 + 號，選擇Add User-Defined Setting，將key設定為CODEPUSH_KEY，Release 和 Staging的值為前面建立的key，我們直接複製進去即可。
    CodePush整合
  4. 開啟Info.plist檔案，在CodePushDeploymentKey中輸入$(CODEPUSH_KEY)，並修改Bundle versions為三位
    CodePush整合

釋出更新

  • 打包併發布
    code-push release-react <AppName> <Platform> --t <本更新包面向的舊版本號> --des <本次更新說明>

    CodePush預設是更新Staging 環境的，如果釋出生產環境的更新包，需要指定--d引數：--d Production，如果釋出的是強制更新包，需要加上 --m true強制更新
    code-push release-react iOSRNHybrid ios --t 1.0.0 --dev false --d Production --des "這是第一個更新包" --m true
  • 檢視釋出歷史記錄 code-push deployment history <AppName> Staging


RN相關程式碼

  1. 手動更新
    import CodePush from "react-native-code-push";

    let codePushOptions = {
    //設定檢查更新的頻率
    //ON_APP_RESUME APP恢復到前臺的時候
    //ON_APP_START APP開啟的時候
    //MANUAL 手動檢查
    checkFrequency: CodePush.CheckFrequency.MANUAL
    };
    render中：
    <Button title="檢查更新" onPress={() => this.update()} />
    update() {
    CodePush.checkForUpdate()
    .then(update => {
    debugger;
    if (!update) {
    Alert.alert("提示", "已是最新版本--", [
    {
    text: "Ok",
    onPress: () => {
    console.log("點了OK");
    }
    }
    ]);
    } else {
    CodePush.sync(
    {
    updateDialog: {
    optionalIgnoreButtonLabel: "稍後",
    optionalInstallButtonLabel: "立即更新",
    optionalUpdateMessage: "有新版本了，是否更新？",
    mandatoryUpdateMessage: "強制更新",
    title: "更新提示",
    mandatoryContinueButtonLabel: "立即更新"
    },
    installMode: CodePush.InstallMode.IMMEDIATE, //一般更新，更新時機
    mandatoryInstallMode: CodePush.InstallMode.IMMEDIATE //強制更新，更新時機
    },
    status => {
    switch (status) {
    case CodePush.SyncStatus.DOWNLOADING_PACKAGE:
    console.log("DOWNLOADING_PACKAGE");
    break;
    case CodePush.SyncStatus.INSTALLING_UPDATE:
    console.log(" INSTALLING_UPDATE");
    break;
    }
    },
    progress => {
    console.log(
    progress.receivedBytes +
    " of " +
    progress.totalBytes +
    " received."
    );
    }
    );
    }
    })
    .catch(error => {
    console.log(error);
    });
    }
    HomeScreen = CodePush(codePushOptions)(HomeScreen); //改行必不可少
    export default HomeScreen;


參考文章：

  1. RNStudyNotes(https://github.com/crazycodeboy/RNStudyNotes/tree/master/React%20Native%E5%BA%94%E7%94%A8%E9%83%A8%E7%BD%B2%E3%80%81%E7%83%AD%E6%9B%B4%E6%96%B0-CodePush%E6%9C%80%E6%96%B0%E9%9B%86%E6%88%90%E6%80%BB%E7%BB%93)
  2. CodePushDemo(https://github.com/guangqiang-liu/CodePushDemo)


相關文章