Eine kurze Diskussion über React Native APP-Updates

Eine kurze Diskussion über React Native APP-Updates

App-Update-Prozess

1. Fordern Sie beim Öffnen der App eine Schnittstelle oder Datei an, um Wiederverwendungsinformationen wie Remote-Version/Anweisungen/Adresse zum Versionsupdate usw. zu erhalten.

2. Holen Sie sich die aktuelle Version der App über die Bibliothek oder native Lösung

3. Vergleichen Sie die Unterschiede zwischen der Remote-Version und der aktuellen Version (Sie können eine Bibliothek verwenden oder selbst eine Vergleichslösung schreiben).

4. Verwenden Sie den erhaltenen Link (Sie können zum Herunterladen auf die entsprechende Website springen, ähnlich wie bei Dandelion. Dies kann ein APK-Link sein, der über die native Android-Methode heruntergeladen wird, oder ein App Store-Link).

Grobes Flussdiagramm

Detaillierte Beschreibung:

1. Diese Remote-Informationen können Schnittstellen sein, sodass eine mittlere Plattform vorhanden sein kann, um sie zu steuern, oder es kann sich natürlich um eine Datei handeln, sodass Betrieb und Wartung die relevanten Informationen steuern können. Nicht nur die Remote-Version, sondern auch andere Attribute können dem Projekt hinzugefügt werden, z. B.: versionCode, versionCodeSwitch, notUpdate, deleteApp

  • 1.1 versionCode Aktualisieren Sie die Version per Code, normalerweise eine Zahl (erforderlich beim Senden an den App Store in iOS). Auf diese Weise wird versionName nicht erhöht. Wenn jedoch versionCode hinzugefügt wird und versionName aktualisiert werden soll, muss versionCode ebenfalls erhöht werden.
  • 1.2 versionCodeSwitch wird verwendet, um zu steuern, ob gemäß Versionscode aktualisiert werden soll. Im Allgemeinen schalte ich es in Test- und anderen Umgebungen ein und in der Produktionsumgebung aus.
  • 1.3 notUpdate Gibt an, ob basierend auf Remote-Informationen aktualisiert werden soll, normalerweise aktiviert
  • 1.4 deleteApp Die Android-App muss deinstalliert und neu installiert werden, da bei der direkten Installation möglicherweise Probleme auftreten. Diese Informationen werden verwendet, um die App zuerst zu löschen und sie dann erneut herunterzuladen

2. Es gibt viele Möglichkeiten, die Informationen des aktuellen Mobiltelefons abzurufen. Ich verwende die Bibliothek react-native-device-info, die umfassendere Informationen bietet. Natürlich können Sie auch native Methoden verwenden, um die Informationen der APP abzurufen.

3. Sie können eine Bibliothek verwenden oder Ihre eigene Bibliothek schreiben, um die lokale Versionsnummer mit der nativen Versionsnummer zu vergleichen. Hier sind zwei empfohlene Bibliotheken, beide mit über einer Million Downloads: semver-compare und compare-versions. Hier ist meine VersionName-Vergleichslösung, die relativ einfach ist:

/**
 * Vergleiche zwei Versionsnummern * @param currentVersion 
 * @return Boolescher Wert 
 * true=muss aktualisiert werden false=nicht nötig*/
Vergleichsversion = (aktuelleVersion: Zeichenfolge): Boolean => {
    const {versionName: remoteVersion} = this.remoteInfo || {}
    wenn (!remoteVersion) {
        return false
    }
    wenn (aktuelleVersion === Remote-Version) {
        return false
    }
    const currentVersionArr = currentVersion.split('.')
    const remoteVersionArr = remoteVersion.split('.')
    für (sei i = 0; i < 3; i++) {
        wenn (Zahl(aktuelleVersionArr[i]) < Zahl(remoteVersionArr[i])) {
            returniere wahr
        }
    } 
    return false
}

Es gibt viele Möglichkeiten, Apps herunterzuladen. Am einfachsten ist es, zu einer Drittanbieterplattform wie Dandelion zu springen und die von RN bereitgestellte Verknüpfungsmethode zu verwenden, um direkt zu springen. Natürlich kann Android direkt über die von ihm bereitgestellte Adresse heruntergeladen werden. Hier ist eine Methode (diese Methode stammt aus dem Internet):

@ReactMethod
public void installApk(String Dateipfad, String Dateiproviderautorität) {
    Datei Datei = neue Datei (Dateipfad);
    wenn (!file.exists()) {
        Log.e("RNUpdater", "installApk: Datei existiert nicht '" + filePath + "'");
        // FIXME, dies sollte ein Versprechen annehmen und fehlschlagen
 zurückkehren;
    }
    wenn (Build.VERSION.SDK_INT >= 24) {
        // API24 und höher verfügen über ein Paketinstallationsprogramm, das FileProvider-Inhalte verarbeiten kann:// URIs
 Uri-InhaltUri;
        versuchen {
            contentUri = FileProvider.getUriForFile(getReactApplicationContext(), fileProviderAuthority, Datei);
        } Fang (Ausnahme e) {
            // FIXME sollte eigentlich ein Promise.reject sein
 Log.e("RNUpdater", "installApk-Ausnahme mit Autoritätsnamen '" + fileProviderAuthority + "'", e);
            werfen e;
        }
        Absicht installApp = neue Absicht(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);
    } anders {
        // Alte APIs können keine content://-URIs verarbeiten, verwenden Sie daher einen alten file://-Stil
 String cmd = "chmod 777 " + Datei;
        versuchen {
            Runtime.getRuntime().exec(cmd);
        } Fang (Ausnahme e) {
            e.printStackTrace();
        }
        Absicht Absicht = neue Absicht(Absicht.ACTION_VIEW);
        intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
        intent.setDataAndType(Uri.parse("file://" + Datei), "Anwendung/vnd.android.package-archive");
        reactContext.startActivity(Absicht);
    }
}

Wenn wir selbst Download-Dienste anbieten, müssen wir auf die Bandbreite achten. Wenn die Netzwerkgeschwindigkeit zu langsam ist, ist das Benutzererlebnis zu schlecht und es führt auch zu einem höheren Datenverkehr. Die Kompromisse müssen von den Entwicklern entschieden werden.

APP-Informationen aktualisieren

Aktualisieren Sie beim Verpacken die Schnittstellen- oder Dateiinformationen über das Skript. Dies hängt natürlich von der jeweiligen Verpackungslösung ab. Meine aktuelle Lösung besteht beispielsweise darin, Jenkins zum Verpacken zu verwenden und Shell-Skripte zu verwenden, um die entsprechenden Informationen beim Verpacken zu aktualisieren (bei Bedarf können auch Skripte in anderen Sprachen verwendet werden):

1. Definieren Sie zunächst die Dateiadresse, die Sie erhalten möchten

androidVersionFilePath="$WORKSPACE/android/app/build.gradle" // Android-Versionsinformationen über diese Datei abrufeniosVersionFilePath="$WORKSPACE/ios/veronica/Info.plist" // iOS-Versionsinformationen über diese Datei abrufenchangeLogPath="$WORKSPACE/change.log" // Versionsaktualisierungsinformationen in dieser Datei speichern

2. Erhalten Sie die Versionsinformationen nach dem Verpacken über die Dateiadresse

getAndroidVersion(){
  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')
  Rückgabe 0
}

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

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

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

3. Ersetzen Sie die Informationen in der vorhandenen Datei

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

Meine Datei liegt im JSON-Format vor und der Beschreibungstext kann beliebig eingegeben werden, was zu einigen Analyseproblemen führen kann:

  • Symbole, die zum Fehlschlagen von JSON.parse führen, sind nicht zulässig, wie etwa \, ````, \n, \r, \" usw.
  • Da ich # verwende, um den Beschreibungstext zu unterbrechen, ist dieses Symbol nicht zulässig.

Grobes Flussdiagramm

Zusammenfassen

Dies ist im Wesentlichen der Aktualisierungsprozess für die native Version der APP. Natürlich gilt dieser Prozess nicht nur für APP, sondern auch für PC-Software-Updates. Neben dem nativen Versionsupdate gibt es auch ein Hot-Update, das ebenfalls sehr wichtig ist.

Oben finden Sie eine kurze Erläuterung der Details zu React Native APP-Updates. Weitere Informationen zu React Native APP-Updates finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:
  • Detaillierte Erläuterung des React setState-Datenaktualisierungsmechanismus
  • React Native implementiert Hot-Update- und automatische Signaturverpackungsfunktion
  • Prinzipielle eingehende Analyse Die reaktionsschnellen Updates von Vue sind schneller als die von React
  • Implementierungscodebeispiel für das Rendern und Aktualisieren von React-Komponenten
  • Detaillierte Erläuterung mehrerer Implementierungsmethoden zum Aktualisieren von Komponenten in React, wenn sich an die Komponente übergebene Props ändern
  • So implementieren Sie differenzielle inkrementelle Updates für React Native unter iOS
  • Eine kurze Diskussion über die Probleme, die bei der React-Native-Hot-Update-React-Native-Pushy-Integration auftreten

<<:  Zusammenfassung des Unterschieds zwischen der Verwendung von „from“ und „join“ zum Abfragen zweier Tabellen in MySQL

>>:  Zusammenfassung und ausführliche Erläuterung der Docker-Container-Bedienungsanleitung

Artikel empfehlen

20 CSS-Codierungstipps für mehr Effizienz (sortiert)

In diesem Artikel möchten wir eine Sammlung von 2...

Manuelles Implementieren des Eingabefelds für den js-SMS-Bestätigungscode

Vorwort Dieser Artikel beschreibt eine allgemeine...

Implementierungsbeispiel für den Linux-Befehl „tac“

1. Befehlseinführung Der Befehl tac (umgekehrte R...

Der Prozess der Bereitstellung eines Projekts auf einem anderen Host mit Jenkins

Umfeld Hostname IP-Adresse Aufschlag Jenkins 192....

Detaillierte Erklärung der 10 häufigsten HTTP-Statuscodes

Der HTTP-Statuscode ist ein dreistelliger Code, d...

So handhaben Sie Bilder in Vue-Formularen

Frage: Ich habe in Vue ein Formular zum Hochladen...

So führen Sie das Excel-Tabellen-Plugin in Vue ein

In diesem Artikel wird der spezifische Code von V...

Frameset über Iframe in Body einfügen

Da Frameset und Body auf derselben Ebene liegen, k...

Detaillierte Erläuterung des mobilen Projekts vite2.0 + vue3

1. Technische Punkte Vite-Version vue3 ts Integri...

Implementierung des CSS Fantastic Border Animation-Effekts

Heute habe ich auf der Blog-Site shoptalkshow ges...