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

Beste Tools zum Erstellen und Bearbeiten von Screenshots unter Linux

Als ich mein primäres Betriebssystem von Windows ...

Unterschied zwischen var und let in JavaScript

Inhaltsverzeichnis 1. Bereiche werden in verschie...

Detaillierte Erläuterung des Problemfalls beim Löschen des Vue KeepAlive-Cache

Keepalive wird häufig zum Caching in Vue-Projekte...

Zusammenfassung der englischen Namen chinesischer Schriftarten

Wenn Sie in CSS die Eigenschaft „font-family“ ver...

Einführung in CSS-Stileinführungsmethoden und ihre Vor- und Nachteile

Drei Möglichkeiten, CSS einzuführen 1. Inline-Sti...

html+css+js zur Realisierung der Funktion der Fotovorschau und des Bildhochladens

Vorwort: Wenn wir Webseiten erstellen, müssen wir...

Detaillierter Installationsprozess von MySQL5.6.40 unter CentOS7 64

MySQL5.6.40-Installationsprozess unter CentOS7 64...

So kopieren Sie eine MySQL-Tabelle

Inhaltsverzeichnis 1.mysqldump Ausführungsprozess...

Ein Artikel erklärt den Klassenlademechanismus von Tomcat

Inhaltsverzeichnis - Vorwort - - JVM-Klassenlader...

JavaScript imitiert den Taobao-Lupeneffekt

In diesem Artikel wird der spezifische Code für J...