React Native APPのアップデートに関する簡単な説明

React Native APPのアップデートに関する簡単な説明

アプリ更新プロセス

1. アプリを開いたときにインターフェイスまたはファイルを要求して、リモート バージョン/バージョン更新手順/アドレスなどの再利用情報を取得します。

2. ライブラリまたはネイティブソリューションを通じてアプリの最新バージョンを取得する

3. リモート バージョンと現在のバージョンの違いを比較します (ライブラリを使用することも、自分で比較ソリューションを作成することもできます)

4. 取得したリンクを介して操作します(Dandelionと同様に、対応するWebサイトにジャンプしてダウンロードできます。これは、apkリンク、Androidネイティブメソッドを介してダウンロードされるか、App Storeリンクである可能性があります)

大まかなフローチャート

詳細な説明:

1. これらのリモート情報はインターフェースになる可能性があり、それを制御するための中間プラットフォームが存在する可能性があります。もちろん、ファイルになる可能性があり、運用と保守が関連情報を制御できるようにします。リモートバージョンだけでなく、versionCode、versionCodeSwitch、notUpdate、deleteAppなどの他の属性もプロジェクトに追加できます。

  • 1.1 versionCode 通常は数字であるコードでバージョンをアップグレードします (iOS で App Store に提出するときに必要)。この方法では versionName は増加しません。ただし、versionCode が追加された場合、versionName をアップグレードする場合は versionCode も増加する必要があります。
  • 1.2 versionCodeSwitch は、versionCode に応じて更新するかどうかを制御するために使用されます。通常、テスト環境などではオンにして、本番環境ではオフにします。
  • 1.3 notUpdate リモート情報に基づいて更新するかどうか。通常はオン
  • 1.4 deleteApp Androidアプリは、直接インストールすると問題が発生する可能性があるため、アンインストールして再インストールする必要があります。この情報は、最初にアプリを削除してから再度ダウンロードするために使用されます。

2. 現在の携帯電話の情報を取得する方法はたくさんあります。私は react-native-device-info ライブラリを使用しており、より完全な情報を提供しています。もちろん、ネイティブメソッドを使用して APP の情報を取得することもできます。

3. ライブラリを使用するか、独自のライブラリを作成して、ローカル バージョン番号とネイティブ バージョン番号を比較できます。ここでは、100 万回以上ダウンロードされている 2 つのライブラリ (semver-compare と compare-versions) を紹介します。以下は、比較的シンプルな versionName 比較ソリューションです。

/**
 * 2つのバージョン番号を比較する * @param currentVersion 
 * @return ブール値 
 * true=更新が必要、false=不要*/
compareVersion = (currentVersion: 文字列): ブール値 => {
    const {バージョン名: リモートバージョン} = this.remoteInfo || {}
    if (!remoteVersion) {
        偽を返す
    }
    (現在のバージョン === リモートバージョン) の場合 {
        偽を返す
    }
    定数 currentVersionArr = currentVersion.split('.')
    定数 remoteVersionArr = remoteVersion.split('.')
    (i = 0; i < 3; i++ とします) {
        (数値(現在のバージョン配列[i])<数値(リモートバージョン配列[i]))の場合{
            真を返す
        }
    } 
    偽を返す
}

アプリをダウンロードする方法はたくさんあります。最も簡単な方法は、Dandelionなどのサードパーティプラットフォームにジャンプし、RNが提供するLinkingメソッドを使用して直接ジャンプすることです。もちろん、Androidはそれ自体が提供するアドレスから直接ダウンロードできます。方法は次のとおりです(この方法はインターネットから取得されます)。

@Reactメソッド
パブリック void installApk(文字列 filePath、文字列 fileProviderAuthority) {
    ファイル file = new File(filePath);
    ファイルが存在する場合(){
        Log.e("RNUpdater", "installApk: ファイルが存在しません '" + filePath + "'");
        // FIXME これはpromiseを受け取り、失敗させる必要があります
 戻る;
    }
    Build.VERSION.SDK_INT >= 24の場合{
        // API24以降にはFileProvider content:// URIを処理できるパッケージインストーラーがあります
 URI コンテンツ URI;
        試す {
            contentUri = FileProvider.getUriForFile(getReactApplicationContext(), fileProviderAuthority, ファイル);
        } キャッチ (例外 e) {
            // FIXMEは実際にはPromise.rejectであるべきである
 Log.e("RNUpdater", "権限名 '" + fileProviderAuthority + "'" の installApk 例外", e);
            eを投げる;
        }
        インテント installApp = 新しいインテント(Intent.ACTION_INSTALL_PACKAGE);
        インストールApp.addFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION);
        インストール時に、Intent.FLAG_ACTIVITY_NEW_TASK フラグを追加します。
        インストールApp.setData(contentUri);
        installApp.putExtra(Intent.EXTRA_INSTALLER_PACKAGE_NAME、 reactContext.getApplicationInfo().packageName);
        reactContext.startActivity(インストールアプリ);
    } それ以外 {
        // 古いAPIはcontent:// URIを処理できないので、古いfile://スタイルを使用してください
 文字列 cmd = "chmod 777 " + ファイル;
        試す {
            Runtime.getRuntime().exec(cmd);
        } キャッチ (例外 e) {
            e.printStackTrace();
        }
        インテントのインテント = 新しいインテント(Intent.ACTION_VIEW);
        フラグを追加します。
        intent.setDataAndType(Uri.parse("file://" + ファイル)、"application/vnd.android.package-archive");
        reactContext.startActivity(インテント);
    }
}

ダウンロード サービスを独自に提供する場合には、帯域幅に注意する必要があります。ネットワーク速度が遅すぎると、ユーザー エクスペリエンスが悪くなり、トラフィック消費も増加します。トレードオフは開発者が決定する必要があります。

アプリ情報の更新

パッケージ化するときに、スクリプトを通じてインターフェースまたはファイル情報を更新します。もちろん、これは特定のパッケージ化ソリューションによって異なります。たとえば、私の現在のソリューションは、パッケージ化に Jenkins を使用し、パッケージ化時にシェル スクリプトを使用して対応する情報を更新することです (必要に応じて他の言語のスクリプトも使用できます)。

1. まず取得する必要があるファイルアドレスを定義します

androidVersionFilePath="$WORKSPACE/android/app/build.gradle" // このファイルから Android のバージョン情報を取得しますiosVersionFilePath="$WORKSPACE/ios/veronica/Info.plist" // このファイルから iOS のバージョン情報を取得しますchangeLogPath="$WORKSPACE/change.log" // このファイルにバージョン更新情報を保存します

2. ファイルアドレスからパッケージ化後のバージョン情報を取得する

Androidバージョンを取得する(){
  androidVersion=$(cat $androidVersionFilePath | grep "versionName" | awk '{print $2}' | sed 's/\"//g')
  androidCode=$(cat $androidVersionFilePath | grep "versionCode " | awk '{print $2}' | sed 's/\"//g')
  androidDelete=$(cat $androidVersionFilePath | grep "deleteApp" | awk '{print $4}' | sed 's/\"//g')
  0を返す
}

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

  行2 = $(awk '/バージョンコード/ {getline; print}' $iosVersionFilePath)
  iosCode=$(echo "$rows2" | sed -ne 's/<文字列>\(.*\)<\/文字列>/\1/p')
  iosCode=$(echo "$iosCode" | sed 's/^[[:space:]]*//')
  0を返す
}

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

3. 既存のファイルの情報を置き換える

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 形式であり、説明テキストは任意に入力できるため、解析の問題が発生します。

  • \、```、\n、\r、\" など、JSON.parse が失敗する原因となる記号は使用できません。
  • 説明テキストを区切るために # を使用しているため、この記号は使用できません。

大まかなフローチャート

要約する

これは基本的に、APP のネイティブ バージョンの更新プロセスです。もちろん、このプロセスは APP だけでなく、PC ソフトウェアの更新にも適用されます。ネイティブ バージョンの更新に加えて、ホット アップデートもあり、これも非常に重要です。

上記はReact Native APPアップデートの詳細についての簡単な説明です。React Native APPアップデートの詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • React setStateデータ更新メカニズムの詳細な説明
  • React Nativeはホットアップデートと自動署名パッケージング機能を実装
  • 原則的な詳細な分析 VueのレスポンシブアップデートはReactよりも高速です
  • React コンポーネントのレンダリングと更新の実装コード例
  • コンポーネントに渡されたプロパティが変更されたときにReactでコンポーネントを更新するためのいくつかの実装方法の詳細な説明
  • iOS 上の React Native で差分増分アップデートを実装する方法
  • react-native のホットアップデートと react-native のプッシュ統合で発生した問題について簡単に説明します。

<<:  MySQL で 2 つのテーブルをクエリする場合の from と join の違いの概要

>>:  Dockerコンテナの操作手順の概要と詳細説明

推薦する

Linuxコマンドに基づいてフォルダー内の特定のファイルパスを抽出します

最近では、特定のフォルダ内の特定のファイルを自動的に検索する必要があり、ファイルパスとファイル名を別...

Vueカスタムv-has命令、ボタン権限判定の手順

目次アプリケーションシナリオ簡単に言えば、カスタム指示基本概念グローバルカスタマイズローカルカスタマ...

最新のウェブフロントエンドフレームワーク10選を紹介(翻訳)

Web 開発の世界では、フレームワークは非常に一般的です。新しいフレームワークやテンプレートが毎日の...

React スキャフォールディングのパスエイリアスを設定する方法

この記事を書いている時点でのReactのバージョンは16.13.1です1 npm run eject...

HTML テーブル マークアップ チュートリアル (10): セル パディング属性 CELLPADDING

セルのパディングは、セルの内容と境界線の間の距離です。基本的な構文<TABLE セルパディング...

Vue3はフロントエンドのログを出力するためにaxiosインターセプターを使用する

目次1. はじめに2. axiosインターセプターを使用してフロントエンドログを出力する1. はじめ...

Nginx Rewriteモジュールを使用するいくつかのシナリオ

アプリケーションシナリオ1: ドメイン名ベースのリダイレクト会社の古いドメイン名は www.accp...

Vue.jsはタイムライン機能を実装します

この記事では、タイムライン機能を実装するためのVue.jsの具体的なコードを参考までに共有します。具...

VUE 入門 イベント処理の学習

目次1. 関数バインディング2. パラメータと$eventを使用する3. 1つのイベントに複数の関数...

CSS3 回転キューブ問題の詳細な説明

3D座標の概念要素が回転すると、その座標軸も一緒に回転します。注 -y方向の問題立方体を回転させる効...

InnoDB の主な機能 - 挿入キャッシュ、2 度書き込み、適応ハッシュ インデックスの詳細

InnoDB ストレージ エンジンの主な機能には、挿入バッファ、二重書き込み、適応ハッシュインデック...

MySQL 8.0.18 のインストールと設定方法のグラフィックチュートリアル

この記事は、参考のためにMySQL 8.0.18のインストールと設定のグラフィックチュートリアルを記...

WeChatミニプログラムページとコンポーネント間の情報伝達と機能呼び出し

今回は、私自身の開発経験を踏まえて、以下の観点で関連内容を解説します。ページからコンポーネントにデー...

dns-prefetch とは何ですか? フロントエンドの最適化: DNS の事前解決によりページ速度が向上します

目次背景1. dns-prefetch とは何ですか? 2. dns-prefetch を設定するに...

Linux の MySQL 設定の変更が有効にならない問題の解決方法

背景AWS EC2 を使用するプロジェクトサービスがあります。セキュリティとパフォーマンスを考慮して...