RN熱更新之CodePush

前言

CodePush是微軟提供的一套可用于React Native和Cordova的熱更新服務(wù)，國內(nèi)也有類似的服務(wù)Pushy，從關(guān)注度和使用人數(shù)來說，CodePush完勝于Pushy（截至目前，CodePush在Github上Star數(shù)2900+，Pushy Star數(shù)600+，畢竟大公司的產(chǎn)品更讓開發(fā)者心里有底，但CodePush是否真的絕對比Pushy要好不做評價）

CodePush 安裝與注冊

1.安裝 CodePush CLI

使用命令npm install -g code-push-cli安裝CodePush終端

2.注冊CodePush 賬號

CodePush終端安裝完成后就可以使用code-push命令了。
在終端輸入code-push register，會跳轉(zhuǎn)授權(quán)網(wǎng)頁。在這個網(wǎng)頁可以選擇Github?；蛘呶④涀鳛槭跈?quán)提供者，不過我覺得90%的開發(fā)者都會選擇Github。

授權(quán)完成后，CodePush會顯示你的Access Key，復(fù)制輸入到終端即可完成注冊并登陸。

ps.只要不主動退出(通過code-push logout命令)，登陸狀態(tài)會一直有效。

在CodePush服務(wù)器中創(chuàng)建App

在終端輸入code-push app add <appName> <os> <platform>即可完成創(chuàng)建，注冊完成之后會返回一套deployment key，包括Staging和Production。該key在后面步驟中會用到。

例子如：

code-push app add MT ios react-native

因為發(fā)布的時候使用的打包命令是有所不同的，因此需要做區(qū)分。

code-push相關(guān)常見命令如下：

Usage: code-push app <command>
命令：

add 創(chuàng)建一個新的App
remove 刪除App
rm 刪除App
rename 重命名已經(jīng)存在App
list 列出與你賬戶關(guān)聯(lián)的所有App
ls 列出與你賬戶關(guān)聯(lián)的所有App
transfer 將一個App的所有權(quán)轉(zhuǎn)讓給另一個帳戶

CodePush集成

這里跟進使用端分Android集成和iOS集成，但二者都有共通的部分

在React Native項目中安裝codePush依賴：npm install --save react-native-code-push

通過react-native link命令自動構(gòu)建關(guān)聯(lián)，這里會要求輸入 deployment key，直接Enter跳過即可，因為我們會在后續(xù)步驟中通過更加靈活的方式配置

接下來的步驟，AndroidiOS有所不同，因此分開來說。

Android端集成

打開android/app/build.gradle文件，修改android-buildTypes節(jié)點成如下

 buildTypes {
        debug{
            //省略了其他配置
            buildConfigField "String", "CODEPUSH_KEY", '""'
        }
        releaseStaging {
            buildConfigField "String", "CODEPUSH_KEY", '"此處填寫Staging key"'
        }
        release {
            //省略了其他配置
            buildConfigField "String", "CODEPUSH_KEY", '"此處填寫Production key"'
        }
    }

在android/app/build.gradle設(shè)置好deployment-key之后呢,我們就可以使用了:
修改MainApplication.java文件中的getPackages()方法為如下：

 protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
                    new RCTSwipeRefreshLayoutPackage(),
                    new VectorIconsPackage(),
                    new CodePush(BuildConfig.CODEPUSH_KEY, MainApplication.this, BuildConfig.DEBUG)// Add/change this line.
            );
        }

3.修改VersionName
在 android/app/build.gradle中有個 android.defaultConfig.versionName屬性，我們需要把 應(yīng)用版本改成 三位，比如1.0，需要修改成1.0.0

至此，CodePush在Android端的集成工作已經(jīng)完成了。

iOS端集成

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

[圖片上傳失敗...(image-78fc88-1515576267680)]

在build Settings頁簽中單擊 + 按鈕然后選擇添加User-Defined Setting，然后輸入CODEPUSH_KEY(名稱隨意)，然后填入deployment key。

ps.可以通過code-push deployment ls MT -k查看deployment key

[圖片上傳失敗...(image-1b816b-1515576267680)]

[圖片上傳失敗...(image-60657d-1515576267680)]
3.打開 Info.plist文件，在CodePushDeploymentKey中輸入$(CODEPUSH_KEY)，并修改Bundle versions為三位，如下圖

[圖片上傳失敗...(image-370aa-1515576267680)]

至此，iOS端集成也完成了。

使用react-native-code-push進行熱更新

該配置的都已經(jīng)配置完了，接下來就是使用了。
在使用之前需要考慮的是檢查更新時機，更新是否強制，更新是否要求即時等等。

更新時機

一般常見的應(yīng)用內(nèi)更新時機分為兩種，一種是打開APP就檢查更新，一種是放在設(shè)置界面讓用戶主動檢查更新并安裝。

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

CodePush.sync({
      updateDialog: {
        appendReleaseDescription: true,
        descriptionPrefix:'\n\n更新內(nèi)容：\n',
        title:'更新',
        mandatoryUpdateMessage:'',
        mandatoryContinueButtonLabel:'更新',
      },
      mandatoryInstallMode:CodePush.InstallMode.IMMEDIATE,
      deploymentKey: CODE_PUSH_PRODUCTION_KEY,
    });

上面的配置在檢查更新時會彈出提示對話框， mandatoryxxx表示強制更新，appendReleaseDescription表示在發(fā)布更新時的描述會顯示到更新對話框上讓用戶可見

來個更加接近實際應(yīng)用的：在用戶點擊檢查更新按鈕后進行檢查，如果有更新則彈出提示框讓用戶選擇是否更新，如果用戶點擊立即更新按鈕，則會進行安裝包的下載（實際上這時候應(yīng)該顯示下載進度，這里省略了）下載完成后會立即重啟并生效（也可配置稍后重啟）
ps.這里面還有個神坑，下文再說。

CodePush.checkForUpdate().then((update) => {
            if (!update) {
                Alert.alert("提示", "已是最新版本--", [
                    {
                        text: "Ok", onPress: () => {
                        console.log("點了OK");
                    }
                    }
                ]);
            } else {
                CodePush.sync({
                        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.");
                    }
                );
            }
        })

更新是否強制
如果是強制更新需要在發(fā)布的時候指定，發(fā)布命令中配置--m true，下文在細說

更新是否要求即時
在更新配置中通過指定installMode來決定安裝完成的重啟時機，亦即更新生效時機

CodePush.InstallMode.IMMEDIATE：表示安裝完成立即重啟更新

CodePush.InstallMode.ON_NEXT_RESTART：表示安裝完成后會在下次重啟后進行更新

CodePush.InstallMode.ON_NEXT_RESUME：表示安裝完成后會在應(yīng)用進入后臺后重啟更新

發(fā)布codepush更新包
codepush的更新包發(fā)布其實很簡單。在終端輸入命令

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

CodePush默認是更新 Staging 環(huán)境的，如果發(fā)布生產(chǎn)環(huán)境的更新包，需要指定--d參數(shù)：--d Production ，如果發(fā)布的是強制更新包，需要加上 --m true強制更新

示例：

code-push release-react MT ios --t 2.0.0 --dev false --d Production --des "1.全新頁面\n2.上線流量商城\n3.已知bug修復(fù)" --m ture
常用部署命令如下：

Usage: code-push deployment <command>
命令：

  add      在已存在的App中創(chuàng)建一個部署
  clear    清除與部署相關(guān)的發(fā)布歷史記錄
  remove   在App中刪除一個部署
  rm       在App中刪除一個部署
  rename   重命名一個已存在的部署
  list     列出App中的所有部署
  ls       列出App中的所有部署
  history  列出一個部署的發(fā)布歷史記錄
  h        列出一個部署的發(fā)布歷史記錄

至此，一個完整的發(fā)布，檢查，安裝流程已經(jīng)基本描述完了。下面來看下更新的效果：

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

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