CodePush熱更新接入-iOS

React-native-code-push是微軟針對React-native推出的熱更新服務。CodePush官方文檔。以下是本人接入流程記錄：

一、CodePush CLI安裝

安裝CodePush指令，直接在終端上輸入如下命令即可，注意：這個CodePush指令只需要全局安裝一次即可，如果第一次安裝成功了，那后面就不在需要安裝

$ npm install -g code-push-cli

二、注冊 CodePush賬號

注冊CodePush賬號也很簡單，同樣是只需簡單的執行下面的命令，同樣這個注冊操作也是全局只需要注冊一次即可。

$ code-push register

當執行完上面的命令后，會自動打開一個授權網頁，讓你選擇使用哪種方式進行授權登錄，這里我們統一就選擇使用GitHub即可。

CodePush登錄.png

當注冊成功后，CodePush會給我們一個key。然后把這個key復制下來填入終端即可登錄成功。

CodePushKey.png

CodePush Register.png

當然你可以使用以下命令驗證是否登錄成功：

$ code-push login

當有如下報錯時，說明你已經登錄成功了。

[error] You are already logged in from this machine.

下面是一些常用操作指令：

code-push login 登陸
code-push loout 注銷
code-push access-key ls 列出登陸的token
code-push access-key rm <accessKye> 刪除某個 access-key

三、在CodePush服務器注冊App

為了讓CodePush服務器有我們的App，我們需要CodePush注冊App，輸入下面命令即可完成注冊，這里需要注意如果我們的應用分為iOS和Android兩個平臺，這時我們需要分別注冊兩套key
應用添加成功后就會返回對應的production 和 Staging 兩個key，production代表生產版的熱更新部署，Staging代表開發版的熱更新部署，在ios中將staging的部署key復制在info.plist的CodePushDeploymentKey值中，在android中復制在Application的getPackages的CodePush中。

注冊iOS APP：

$ code-push app add CodePushDemo_IOS ios react-native

屏幕快照 2019-05-30 13.52.25.png

注冊Android APP：

$ code-push app add CodePushDemo_IOS Android react-native

屏幕快照 2019-05-30 13.56.12.png

查看注冊過的APP：

$ code-push app list

屏幕快照 2019-05-30 13.56.35.png

其它CodePush管理APP指令：

code-push app add 在賬號里面添加一個新的app
code-push app remove 或者 rm 在賬號里移除一個app
code-push app rename 重命名一個存在app
code-push app list 或則 ls 列出賬號下面的所有app
code-push app transfer 把app的所有權轉移到另外一個賬號

四、RN代碼中集成CodePush

上面都是一些準備工作，從這里開始才是真正的集成到項目中。首先我們需要安裝CodeoPush組件，然后通過link命令添加原生依賴，最后在RN根組件中添加熱更新邏輯代碼.

安裝組件：

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

添加依賴：

$ react-native link react-native-code-push

五、配置iOS工程

使用Xcode打開項目，Xcode的項目導航視圖中的PROJECT下選擇你的項目，選擇Info頁簽 ，在Configurations節點下單擊 + 按鈕 ，選擇Duplicate "Release Configaration，輸入Staging

CodePush iOS1.png

選擇Build Settings tab，搜索Build Location -> Per-configuration Build Products Path -> Staging，將之前的值：$(BUILD_DIR)/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME)改為：$(BUILD_DIR)/Release$(EFFECTIVE_PLATFORM_NAME)

CodePush iOS2.png

選擇Build Settings tab，點擊 + 號，選擇Add User-Defined Setting，將key設置為CODEPUSH_KEY，Release 和 Staging的值為前面創建的key，我們直接復制進去即可

CodePush iOS3.png

打開Info.plist文件，在CodePushDeploymentKey中輸入$(CODEPUSH_KEY)，并修改Bundle versions為三位，CodePush必須要三位。

CodePush iOS4.png

六、index.js文件配置

一般常見的應用內更新時機分為兩種，一種是打開App就檢查更新，一種是放在設置界面讓用戶主動檢查更新并安裝。

打開APP就檢查更新：

最為簡單的使用方式在React Natvie的根組件的componentDidMount方法中通過
codePush.sync()（需要先導入codePush包：import codePush from 'react-native-code-push'）方法檢查并安裝更新，如果有更新包可供下載則會在重啟后生效。不過這種下載和安裝都是靜默的，即用戶不可見。如果需要用戶可見則需要額外的配置。具體可以參考codePush官方API文檔。

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

class App extends Component {
    ...
    componentDidMount () {
        codePush.sync({
          updateDialog: true, // 是否打開更新提示彈窗
          installMode: codePush.InstallMode.IMMEDIATE,
          mandatoryInstallMode: codePush.InstallMode.IMMEDIATE,
          deploymentKey: 'Pay3W7Nfaa3bLG9C9ZXTwMgS7zMD68d21987-8919-4d4e-8062-52c8293250cb',
          //對話框
          updateDialog : {
            //是否顯示更新描述
            appendReleaseDescription : true ,
            //更新描述的前綴。 默認為"Description"
            descriptionPrefix : "更新內容：" ,
            //強制更新按鈕文字，默認為continue
            mandatoryContinueButtonLabel : "立即更新" ,
            //強制更新時的信息. 默認為"An update is available that must be installed."
            mandatoryUpdateMessage : "必須更新后才能使用" ,
            //非強制更新時，按鈕文字,默認為"ignore"
            optionalIgnoreButtonLabel : '稍后' ,
            //非強制更新時，確認按鈕文字. 默認為"Install"
            optionalInstallButtonLabel : '后臺更新' ,
            //非強制更新時，檢查到更新的消息文本
            optionalUpdateMessage : '有新版本了，是否更新？' ,
            //Alert窗口的標題
            title : '更新提示'
          },
       });
    }
    ...
}
export default App;

用戶點擊檢查更新按鈕

在用戶點擊檢查更新按鈕后進行檢查，如果有更新則彈出提示框讓用戶選擇是否更新，如果用戶點擊立即更新按鈕，則會進行安裝包的下載（實際上這時候應該顯示下載進度，這里省略了）下載完成后會立即重啟并生效（也可配置稍后重啟），部分代碼如下

codePush.checkForUpdate(deploymentKey).then((update) => {
    if (!update) {
        Alert.alert("提示", "已是最新版本--", [
            {
                text: "Ok", onPress: () => {
                console.log("點了OK");
            }
            }
        ]);
    } else {
        codePush.sync({
                deploymentKey: deploymentKey,
                updateDialog: {
                    optionalIgnoreButtonLabel: '稍后',
                    optionalInstallButtonLabel: '立即更新',
                    optionalUpdateMessage: '有新版本了，是否更新？',
                    title: '更新提示'
                },
                installMode: 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.");
            }
        );
    }
 }

CodePush高階組件實現更新

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

class App extends Component {
}

export default codePush(App);

更新時機：

codePush.InstallMode.IMMEDIATE ：安裝完成立即重啟更新
codePush.InstallMode.ON_NEXT_RESTART ：安裝完成后會在下次重啟后進行更新
codePush.InstallMode.ON_NEXT_RESUME ：安裝完成后會在應用進入后臺后重啟更新

七、提交更新包

我們可以通過code-push release-react命令發布更新包。多次發布更新包也是如此。

$ code-push release-react <Appname> <Platform> --t <本更新包面向的舊版本號> --des <本次更新說明>

注意： CodePush默認是更新Staging 環境的，如果發布生產環境的更新包，需要指定--d參數：--d Production，如果發布的是強制更新包，需要加上 --m true強制更新

//例如
$ code-push release-rereact CodePushDemo_IOS ios --t 1.0.0 --des "本次更新了hello world!" --m true

CodePush Install.jpeg

查詢提交過哪些更新包:

• 查詢Production

  $ code-push deployment history CodePushDemo_IOS Production

• 查詢Staging

  $ code-push deployment history projectName Staging

八、參考鏈接

參考鏈接一

參考鏈接二