So holen Sie eine progressive Web -App in den Google Play Store

PWA (Progressive Web Apps) ist seit einiger Zeit bei uns. Jedes Mal, wenn ich es den Clients erklärt, wird dieselbe Frage angezeigt: „Können meine Benutzer die App mit App -Stores installieren?“ Die Antwort war traditionell Nein, aber dies änderte sich mit Chrome 72, der eine neue Funktion namens TWA (vertrauenswürdige Webaktivitäten) versandte.

Vertrauenswürdige Webaktivitäten sind eine neue Möglichkeit, Ihre Web-App-Inhalte wie Ihre PWA mit Ihrer android-App mithilfe eines Protokolls basierend auf benutzerdefinierten Registerkarten in die Integration von Yourandroid-Apps zu integrieren.

In diesem Artikel werde ich die vorhandene PWA (Wordguru) von Netguru verwenden und schrittweise erklären, was getan werden muss, um die Anwendung verfügbar zu machen und direkt im Google Play App Store installiert zu werden.

Einige der Dinge, die wir hier abdecken, klingen für alle Android-Entwickler da draußen albern, aber dieser Artikel stammt aus der Perspektive eines Front-End-Entwicklers, insbesondere eines, der noch nie Android Studio verwendet oder eine Android-Anwendung erstellt hat. Bitte beachten Sie auch, dass viel von dem, was wir hier abdecken, immer noch extrem experimentell ist, da es sich auf Chrome 72 beschränkt.

Schritt 1: Richten Sie eine vertrauenswürdige Webaktivität ein

Wenn Sie eine TWA einrichten, müssen Sie keinen Java -Code schreiben, aber Sie müssen Android Studio haben. Wenn Sie zuvor iOS- oder MAC -Software entwickelt haben, ist dies XCode insofern sehr ähnlich, als es eine schöne Entwicklungsumgebung bietet, die die Entwicklung von Android -Entwicklung entwickelt hat. Also, schnapp dir das und triff mich hier zurück.

Erstellen Sie ein neues TWA -Projekt in Android Studio

Hast du Android Studio bekommen? Nun, ich kann dich nicht wirklich hören oder sehen, also gehe ich davon aus, dass du es getan hast. Gehen Sie voran und knacken Sie es öffnen und klicken Sie dann auf "Starten Sie ein neues Android Studio -Projekt". Lassen Sie uns von dort aus die Option „Keine Aktivität hinzufügen“ auswählen, mit der wir das Projekt konfigurieren können.

Die Konfiguration ist ziemlich einfach, aber es ist immer gut zu wissen, was was ist:

• Nennen Sie den Namen der Anwendung (aber ich wette, Sie wussten das).
• Paketname: Eine Kennung für Android -Anwendungen im Play Store. Es muss einzigartig sein, daher schlage ich vor, die URL der PWA in umgekehrter Reihenfolge zu verwenden (z. B. com.netguru.wordguru).
• Speicherort speichern: Wo das Projekt lokal existiert.
• Sprache: Dies ermöglicht es uns, eine bestimmte Codesprache auszuwählen. Dies ist jedoch nicht erforderlich, da unsere App bereits geschrieben ist. Wir können dies bei Java verlassen, was die Standardauswahl ist.
• Mindest -API -Ebene: Dies ist die Version der Android -API, mit der wir zusammenarbeiten, und wird von der Support Library (die wir als nächstes abdecken). Lassen Sie uns API 19 verwenden.

Unter diesen Optionen stehen nur wenige Kontrollkästchen. Diese sind für uns hier irrelevant, also lassen Sie sie alle deaktiviert und fahren Sie dann fort.

TWA Support Library hinzufügen

Für TWA ist eine Support -Bibliothek erforderlich. Die gute Nachricht ist, dass wir nur zwei Dateien ändern müssen, um diese Anforderung zu füllen, und beide leben im selben Projektverzeichnis: Gradle -Skripte. Beide heißen build.gradle, aber wir können unterscheiden, welche durch Betrachtung der Beschreibung in der Klammern.

Es gibt einen Git -Paket -Manager namens JITPack, der speziell für Android -Apps hergestellt wurde. Es ist ziemlich robust, aber das Fazit macht das Veröffentlichen unserer Web -App zum Kinderspiel. Es ist ein bezahlter Service, aber ich würde sagen, dass es die Kosten wert ist, wenn dies das erste Mal ist, dass Sie etwas in den Google Play -Store bringen.

Herausgeber Hinweis: Dies ist kein gesponserter Stecker für Jitpack. Es lohnt sich, angerufen zu werden, da dieser Beitrag mit Android-Apps nur wenig bis gar vertraut oder an Google Play eingereicht wird, und es ist weniger Reibung für die Verwaltung eines Android-App-Repo, das direkt mit dem Geschäft verbunden ist. Das heißt, es ist völlig keine Voraussetzung.

Sobald Sie in Jitpack sind, verbinden wir unser Projekt mit. Öffnen Sie die Datei "Build.gradle (Projekt: Wordguru), die wir uns gerade angesehen haben, und sagen Sie, dass sie sich JITPACK für das App -Repository ansehen sollen:

 alleProjects {
  Repositories {
    ...
    maven {url 'https://jitpack.io'}
    ...
  }
}

OK, jetzt öffnen wir diese andere Build.gradle -Datei. Hier können wir alle erforderlichen Abhängigkeiten für das Projekt hinzufügen, und wir haben tatsächlich eines:

 // Build.gradle (Modul: App)

Abhängigkeiten {
  ...
  Implementierung 'com.github.googlechrome: Custom-Tabs-Client: A0F7418972'
  ...
}

Die TWA -Bibliothek verwendet Java 8 -Funktionen. Daher müssen wir Java 8 aktivieren. Um dies zu tun, müssen wir derselben Datei Kompilesoptionen hinzufügen:

 // Build.gradle (Modul: App)

Android {
  ...
  kompileoptionen {
    SourceCompatibility Javaversion.version_1_8
    TargetCompatibilität javaversion.version_1_8
  }
  ...
}

Es gibt auch Variablen, die als Manifestplace -Inhaber bezeichnet werden, die wir im nächsten Abschnitt behandeln werden. Fügen wir vorerst Folgendes hinzu, um zu definieren, wo die App gehostet wird, die Standard -URL und den App -Namen:

 // Build.gradle (Modul: App)

Android {
  ...
  defaultConfig {
    ...
    Manifestplace -Helder = [
      Hostname: "Wordguru.netguru.com",
      defaulturl: "https://wordguru.netguru.com",
      Launchername: "Wordguru"
    ]
    ...
  }
  ...
}

Geben Sie App -Details im Android App Manifest an

Jede Android -App verfügt über ein Android -App -Manifest (AndroidManifest.xml), das wesentliche Details zur App enthält, z.

Das, was uns hier wirklich befasst, ist Aktivität (). Dies implementiert die Benutzeroberfläche und ist für die „Aktivitäten“ in „vertrauenswürdigen Webaktivitäten“ erforderlich.

Witzig genug, wir haben die Option „Keine Aktivität hinzufügen“ beim Einrichten unseres Projekts in Android Studio ausgewählt, und das liegt daran, dass unser Manifest leer ist und nur das Anwendungs ​​-Tag enthält.

Beginnen wir zunächst die Manfifest -Datei. Wir werden den vorhandenen Paketnamen durch unsere eigene Anwendungs ​​-ID und das Etikett durch den Wert der im vorherigen Abschnitt definierten Variablen der Manifestplecleders ersetzen.

Dann werden wir die TWA -Aktivität tatsächlich hinzufügen, indem wir ein -Tag in das -Tag hinzufügen.

<!-- manifests/AndroidManifest.xml -->

<manifest xmlns: andro package="com.netguru.wordguru"> // highlight

  <anwendung android: erlaubte="true" icon="@mipmap/ic_launcherer" label="$ {sterverername}" highlight supportsrtl="True" thema="@style/Apptheme">

    <aktivit android: name="android.support.customtabs.Trusted.launcherActivity" label="$ {sterverername}"> // highlight

      <meta-daten android: name="android.support.customtabs.Trusted.default_url" value="$ {defaulturl}"></meta-daten> // Highlight

      <!-- This intent-filter adds the TWA to the Android Launcher -->
      <intent-filter>
        <action android: name="android.intent.action.main"></action>
        <kategorie android: name="android.intent.category.launcher"></kategorie>
      filter>

      <!--
        This intent-filter allows the TWA to handle Intents to open
        our hostName
        -->
      <intent-filter android: autoverify="true">
        <action android: name="android.intent.action.view"></action>
        <kategorie android: name="android.intent.category.Default"></kategorie>
        <kategorie android: name="android.intent.category.Browsable"></kategorie>
        <daten android: scheme="https" host="$ {hostname}"></daten> // highlight
      filter>
    </intent-filter></intent-filter></aktivit>ät>
  
</anwendung></manifest>

Und das, meine Freunde, ist Schritt 1. Lassen Sie uns mit Schritt 2 fortfahren.

Schritt 2: Überprüfen Sie die Beziehung zwischen der Website und der App

TWA S benötigt eine Verbindung zwischen der Android -Anwendung und der PWA. Dazu verwenden wir digitale Asset -Links.

Die Verbindung muss an beiden Enden festgelegt werden, wobei TWA die Anwendung und PWA die Website ist.

Um diese Verbindung herzustellen, müssen wir unsere Manifestplecleders erneut ändern. Dieses Mal müssen wir ein zusätzliches Element namens AssetStatements hinzufügen, das die Informationen über unsere PWA behält.

 // Build.gradle (Modul: App)

Android {
  ...
  defaultConfig {
    ...
    Manifestplace -Helder = [
      ...
      AssetStatements: '[{"Beziehung": ["Delegate_permission/Common.handle_all_urls"],', '  
        '"Ziel": {"Namespace": "Web", "Site": "https://wordguru.netguru.com"}}]'
      ...
    ]
    ...
  }
  ...
}

Jetzt müssen wir unserem Anwendungs-Tag ein neues Meta-Daten-Tag hinzufügen. Dadurch werden die Android -Anwendung informiert, die wir die Verbindung mit dem in den Manifestplecoldern festgelegten Antrag herstellen möchten.

<!-- manifests/AndroidManifest.xml -->

<manifest xmlns: andro package="$ {packageId}">

  <anwendung>
    ...
      <meta-daten android: name="asset_statements" value="$ {assetStatements}"></meta-daten>
    ...
  
</anwendung></manifest>

Das war's! Wir haben gerade die Bewerbung auf Website -Beziehung eingerichtet. Lassen Sie uns nun in die Konvertierung der Website in die Bewerbung wechseln.

Um die Verbindung in die entgegengesetzte Richtung herzustellen, müssen wir eine .json-Datei erstellen, die im Pfad der App der App verfügbar ist. Die Datei kann mit einem Generator erstellt werden, der in Android Studio integriert ist. Sehen Sie, ich habe Ihnen gesagt, dass Android Studio die Entwicklung von Android -Entwicklung hilft!

Wir brauchen drei Werte, um die Datei zu generieren:

• Hosting -Site -Domain: Dies ist unsere PWA -URL (z. B. https://wordguru.netguru.com/).
• App -Paketname: Dies ist unser TWA -Paketname (z. B. com.netguru.wordguru).
• App -Paket -Fingerabdruck (SHA256): Dies ist ein einzigartiger kryptografischer Hash, der basierend auf Keystore von Google Play Store generiert wird.

Wir haben bereits den ersten und zweiten Wert. Wir können den letzten mit Android Studio erhalten.

Zuerst müssen wir signierte APK generieren. Im Android Studio gehen Sie zu: Erstellen → Signiertes Bundle oder APK → APK .

Verwenden Sie als nächstes den vorhandenen Keystore, wenn Sie bereits einen haben. Wenn Sie einen brauchen, besuchen Sie zuerst „Neu…“.

Dann füllen wir das Formular aus. Machen Sie sich unbedingt an die Anmeldeinformationen wie diese, mit denen die Bewerbung unterschrieben wird, und sie bestätigen Ihr Eigentum an der Bewerbung.

Dadurch wird eine Keystore -Datei erstellt, die zum Generieren des App -Paket -Fingerabdrucks (SHA256) erforderlich ist. Diese Datei ist äußerst wichtig, da sie als Beweis dafür funktioniert, dass Sie der Eigentümer der Bewerbung sind. Wenn diese Datei verloren geht, können Sie keine weiteren Aktualisierungen Ihrer Bewerbung im Geschäft durchführen.

Lassen Sie uns als nächstes eine Art Bundle -Art auswählen. In diesem Fall wählen wir "Release", weil es uns ein Produktionsbündel gibt. Wir müssen auch die Signaturversionen überprüfen.

Dadurch wird unsere APK generiert, die später verwendet wird, um eine Version im Google Play Store zu erstellen. Nach dem Erstellen unseres Keystore können wir ihn verwenden, um den erforderlichen App -Paket -Fingerabdruck (der SHA256) zu generieren.

Gehen wir zurück zum Android Studio und gehen Sie zu Tools → App Links Assistant . Dadurch wird eine Seitenleiste geöffnet, in der die Schritte angezeigt werden, die erforderlich sind, um eine Beziehung zwischen Anwendung und Website zu erstellen. Wir möchten zu Schritt 3, „Website -Association deklarieren“ und die erforderlichen Daten einfüllen: Site -Domain und Anwendungs ​​-ID. Wählen Sie dann die im vorherige Schritt generierte Keystore -Datei aus.

Nach dem Ausfüllen des Formulars drücken Sie "Datei" Digital Asset Links ", wodurch unsere Datei assetLinks.json generiert wird. Wenn wir das öffnen, sollte es ungefähr so ​​aussehen:

 [{{{
  "Beziehung": ["Delegate_permission/Common.handle_all_urls"],
  "Ziel": {
    "Namespace": "android_app",
    "package_name": "com.netguru.wordguru",
    "SHA256_CERT_FINGERPRINTS": ["8A: F4: ....: 29:28"]
  }
}]

Dies ist die Datei, die wir in der /.well-Bekannt/Assetlinks.json-Pfad unserer App zur Verfügung stellen müssen. Ich werde nicht beschreiben, wie es auf diesem Weg verfügbar ist, da es zu projektspezifisch und außerhalb des Rahmens dieses Artikels ist.

Wir können die Beziehung testen, indem wir auf die Schaltfläche „Link und überprüfen“ klicken. Wenn alles gut geht, erhalten wir eine Bestätigung mit „Erfolg!“

Yay! Wir haben eine Zwei-Wege-Beziehung zwischen unserer Android-Anwendung und unserer PWA aufgebaut. Von hier aus ist alles bergab, also fahren wir es nach Hause.

Schritt 3: Erhalten Sie die erforderlichen Vermögenswerte

Google Play erfordert einige Vermögenswerte, um sicherzustellen, dass die App im Geschäft gut präsentiert wird. Insbesondere hier ist, was wir brauchen:

• App -Symbole: Wir benötigen eine Vielzahl von Größen, darunter 48 × 48, 72 × 72, 96 × 96, 144 × 144, 192 × 192… oder wir können ein adaptives Symbol verwenden.
• Hochauflösender Symbol: Dies ist ein 512 × 512 PNG-Bild, das im gesamten Geschäft verwendet wird.
• Feature-Grafik: Dies ist ein 1024 × 500 JPG- oder 24-Bit-PNG-Banner (No Alpha), das Google Play in der App-Detail-Ansicht verwendet.
• Screenshots: Google Play verwendet diese, um verschiedene Ansichten der App anzuzeigen, die Benutzer vor dem Herunterladen überprüfen können.

Mit all dem können wir mit der Google Play Store Developers Console fortfahren und die Anwendung veröffentlichen!

Schritt 4: Veröffentlichen Sie bei Google Play!

Gehen wir zum letzten Schritt und schieben wir unsere App schließlich in den Laden.

Mit dem zuvor generierten APK (das sich im Verzeichnis von Androidstudioprojects befindet) müssen wir in die Google Play -Konsole gehen, um unsere Anwendung zu veröffentlichen. Ich werde den Prozess der Veröffentlichung einer Anwendung im Geschäft nicht beschreiben, da der Assistent es ziemlich unkompliziert macht und wir während des gesamten Prozesses Schritt-für-Schritt-Anleitung zur Verfügung stellen.

Es kann nur wenige Stunden dauern, bis der Antrag überprüft und genehmigt wird, aber wenn dies der Fall ist, erscheint es schließlich im Geschäft.

Wenn Sie die APK nicht finden können, können Sie eine neue erstellen, indem Sie → Signiertes Bundle / APK → APK erstellen , unsere vorhandene Keystore -Datei übergeben und den Alias ​​und das Kennwort füllen, das wir bei der Generierung des Keystore verwendet haben. Nachdem die APK generiert wurde, sollte ein Hinweis angezeigt werden und Sie können zur Datei gelangen, indem Sie auf den Link „Suchen“ klicken.

Herzlichen Glückwunsch, Ihre App ist in Google Play!

Das war's! Wir haben gerade unsere PWA in den Google Play Store gebracht. Der Prozess ist nicht so intuitiv, wie wir es gerne hätten, aber mit ein wenig Anstrengung ist es definitiv machbar, und glauben Sie mir, es gibt diese großartige Füllung am Ende, wenn Sie Ihre App in freier Wildbahn sehen.

Es ist darauf hinzuweisen, dass diese Funktion immer noch sehr früh ist, und ich würde es für einige Zeit als experimentell betrachten. Ich würde nicht empfehlen, eine Produktionsveröffentlichung Ihrer Anwendung vorerst zu machen, da dies nur mit Chrome 72 und oben funktioniert - jede Version, die die App installieren kann, aber die App selbst wird sofort abstürzen, was nicht die beste Benutzererfahrung ist.

Auch die offizielle Veröffentlichung von Custom-Tabs-Client unterstützt TWA noch nicht. Wenn Sie sich gefragt haben, warum wir anstelle der offiziellen Veröffentlichung der Bibliothek Raw Github Link verwendet haben, ist das der Grund.

Das obige ist der detaillierte Inhalt vonSo holen Sie eine progressive Web -App in den Google Play Store. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!