快捷導(dǎo)航

淺談React原生APP更新

更新時(shí)間：2021年06月03日 14:31:20 作者：Grewer

當(dāng)一個(gè)APP在運(yùn)行的時(shí)候, 開發(fā)者想要將自己的代碼更新到用戶的手機(jī)上時(shí), 一般都有兩種方案, 一是熱更新, 二就是APP更新.熱更新暫且不說,這篇文章就講講 APP 如何更新。

App更新流程

1.在 App 打開時(shí)請求接口或文件, 獲取遠(yuǎn)程版本/版本更新說明/地址等等重用信息

2.通過庫或者原生方案, 獲取 App 的當(dāng)前版本

3.比較遠(yuǎn)程版本和當(dāng)前版本的區(qū)別(可以使用庫,也可以自己寫一個(gè)比較方案)

4.通過獲取到的鏈接進(jìn)行操作(可以跳轉(zhuǎn)到對應(yīng)網(wǎng)站下載,類似蒲公英這種,可以是 apk 鏈接, 通過安卓原生方法下載, 也可以是 App Store 鏈接)

大致的流程圖

詳細(xì)說明:

1.這些遠(yuǎn)程信息,可以是接口, 這樣可以有一個(gè)中臺來控制, 當(dāng)然也可以是一個(gè)文件, 讓運(yùn)維來控制
關(guān)于信息,不止于遠(yuǎn)程版本, 在項(xiàng)目里還可以添加其他屬性,如: versionCode, versionCodeSwitch , notUpdate , deleteApp

1.1 versionCode 通過 code 來升級版本,一般是一個(gè)數(shù)字(在 ios 里提交 App Store 的時(shí)候有需要用到的地方), 這樣 versionName 并不會增加, 但是如果添加了 versionCode, 如果要升級 versionName, versionCode 也需要增加
1.2 versionCodeSwitch 用來控制是否要根據(jù)versionCode來更新, 一般我都是在測試和其他環(huán)境開啟,生產(chǎn)環(huán)境關(guān)閉的
1.3 notUpdate 是否要根據(jù)遠(yuǎn)程信息來更新, 一般都是開啟狀態(tài)
1.4 deleteApp 安卓 app 需要卸載重新安裝, 因?yàn)橹苯影惭b可能存在某些問題, 將會使用此信息,先刪除 APP, 再重新下載

2.獲取當(dāng)前手機(jī)的信息,方案較多, 我使用的是 react-native-device-info 這個(gè)庫, 這個(gè)庫里面提供的信息較全, 當(dāng)然也可以使用原生方法, 來獲取APP的信息

3.關(guān)于本地版本號和原生版本號之間的對比也是可以使用庫,也可以自己寫, 這邊推薦兩個(gè)庫,下載量都是百萬以上的: semver-compare 和 compare-versions, 這邊附上我的 versionName 比較方案, 較為簡陋:

/**
 * 比較兩版本號 
 * @param currentVersion 
 * @return boolean 
 * true=需要更新 false=不需要 
 */
compareVersion = (currentVersion: string): boolean => {
    const {versionName: remoteVersion} = this.remoteInfo || {}
    if (!remoteVersion) {
        return false
    }
    if (currentVersion === remoteVersion) {
        return false
    }
    const currentVersionArr = currentVersion.split('.')
    const remoteVersionArr = remoteVersion.split('.')
    for (let i = 0; i < 3; i++) {
        if (Number(currentVersionArr[i]) < Number(remoteVersionArr[i])) {
            return true
        }
    } 
    return false
}

關(guān)于下載 app 有很多方案, 最簡單的就是跳轉(zhuǎn)鏈接到第三方平臺, 像蒲公英這樣的, 使用 RN 提供的 Linking 方法來直接跳轉(zhuǎn)
當(dāng)然安卓是可以直接通過自己提供的地址下載的, 這里提供一個(gè)方法(此方法來源于網(wǎng)絡(luò)):

@ReactMethod
public void installApk(String filePath, String fileProviderAuthority) {
    File file = new File(filePath);
    if (!file.exists()) {
        Log.e("RNUpdater", "installApk: file doe snot exist '" + filePath + "'");
        // FIXME this should take a promise and fail it
 return;
    }
    if (Build.VERSION.SDK_INT >= 24) {
        // API24 and up has a package installer that can handle FileProvider content:// URIs
 Uri contentUri;
        try {
            contentUri = FileProvider.getUriForFile(getReactApplicationContext(), fileProviderAuthority, file);
        } catch (Exception e) {
            // FIXME should be a Promise.reject really
 Log.e("RNUpdater", "installApk exception with authority name '" + fileProviderAuthority + "'", e);
            throw e;
        }
        Intent installApp = new Intent(Intent.ACTION_INSTALL_PACKAGE);
        installApp.addFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION);
        installApp.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
        installApp.setData(contentUri);
        installApp.putExtra(Intent.EXTRA_INSTALLER_PACKAGE_NAME, reactContext.getApplicationInfo().packageName);
        reactContext.startActivity(installApp);
    } else {
        // Old APIs do not handle content:// URIs, so use an old file:// style
 String cmd = "chmod 777 " + file;
        try {
            Runtime.getRuntime().exec(cmd);
        } catch (Exception e) {
            e.printStackTrace();
        }
        Intent intent = new Intent(Intent.ACTION_VIEW);
        intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
        intent.setDataAndType(Uri.parse("file://" + file), "application/vnd.android.package-archive");
        reactContext.startActivity(intent);
    }
}

如果是我們自己提供下載服務(wù),需要注意的是帶寬, 如果網(wǎng)速過慢則用戶體驗(yàn)過差, 還有就會帶來更多的流量消耗, 其中的取舍,需要開發(fā)者決定

更新APP信息

在打包時(shí), 通過腳本更新接口或者文件信息, 當(dāng)然這個(gè)得看具體的打包方案
比如我現(xiàn)在的方案是使用 Jenkins 打包, 在打包時(shí)使用 shell 腳本更新對應(yīng)信息(有需要也可以使用其他語言腳本):

1.首先定義需要獲取的文件地址

androidVersionFilePath="$WORKSPACE/android/app/build.gradle"  // 通過此文件獲取安卓的版本信息
iosVersionFilePath="$WORKSPACE/ios/veronica/Info.plist" // 通過此文件獲取iOS的版本信息
changeLogPath="$WORKSPACE/change.log" // 將版本更新信息存儲在此文件中

2.通過文件地址, 獲取打完包后的版本信息

getAndroidVersion(){
  androidVersion=$(cat $androidVersionFilePath  | grep "versionName" | awk '{print $2}' | sed 's/\"http://g')
  androidCode=$(cat $androidVersionFilePath  | grep "versionCode " | awk '{print $2}' | sed 's/\"http://g')
  androidDelete=$(cat $androidVersionFilePath  | grep "deleteApp" | awk '{print $4}' | sed 's/\"http://g')
  return 0
}

getIOSVersion(){
  rows=$(awk '/CFBundleShortVersionString/ {getline; print}' $iosVersionFilePath)
  iosVersion=$(echo "$rows" | sed -ne 's/<string>\(.*\)<\/string>/\1/p')
  iosVersion=$(echo "$iosVersion" | sed 's/^[[:space:]]*//')

  rows2=$(awk '/VersionCode/ {getline; print}' $iosVersionFilePath)
  iosCode=$(echo "$rows2" | sed -ne 's/<string>\(.*\)<\/string>/\1/p')
  iosCode=$(echo "$iosCode" | sed 's/^[[:space:]]*//')
  return 0
}

desc=$(cat $changeLogPath | tr "\n" "#")

3.替換現(xiàn)有文件中的信息

sed -i '' "s/\"releaseInfo\":.*$/\"releaseInfo\": \"$desc\"/"  $JsonPath/$fileName
sed -i '' "s/\"versionName\":.*$/\"versionName\": \"$versionName\",/"  $JsonPath/$fileName
sed -i '' "s/\"versionCode\":.*$/\"versionCode\": \"$versionCode\",/"  $JsonPath/$fileName
sed -i '' "s/\"deleteApp\":.*$/\"deleteApp\": \"$deleteApp\",/"  $JsonPath/$fileName

我的文件是以 json 作為格式的,說明文字是可以任意填寫的,會觸發(fā)一些解析問題: