Wie Bekommt man einen Progressiven Web-App in den Google Play Store

0
48

PWA (Progressive Web Apps) haben bei uns seit einiger Zeit. Doch jedes mal, wenn ich versuche zu erklären, es den Kunden, die gleiche Frage auftaucht: “Wird mein Benutzer in der Lage sein, um die app zu installieren über den app-stores?” Die Antwort ist traditionell nicht, aber das änderte sich mit Chrome-72 ausgeliefert eine neue Funktion mit der Bezeichnung TWA (Vertrauenswürdigen Web-Aktivitäten).

Vertrauenswürdige Web-Aktivitäten sind ein neuer Weg, um die Integration Ihrer web-app-Inhalte wie Ihre PWA mit yourAndroid app über ein Protokoll auf der Basis von Benutzerdefinierten Registerkarten.

In diesem Artikel, ich werde Netguru bestehende PWA (Wordguru) und erklären Schritt für Schritt, was getan werden muss, um die Anwendung verfügbar und bereit zur Installation direkt aus dem Google Play app store.

Einige der Dinge, die wir hier behandeln klingt vielleicht albern, zu jeder Android-Entwickler, aber dieser Artikel ist geschrieben aus der Perspektive eines front-end-Entwickler, besonders derjenige, der noch nie verwendet Android Studio oder eine Android-Anwendung. Auch, bitte beachten Sie, dass eine Menge von dem, was wir abdecken, hier ist noch sehr experimentell, da ist es beschränkt auf, Chrom 72.

Schritt 1: einrichten einer Vertrauenswürdigen Web-Aktivität

Die Einrichtung eines TWA nicht verlangen, dass Sie schreiben Java-code, aber Sie müssen Android Studio. Wenn Sie entwickelt haben, die iOS-oder Mac-software vor, dies ist ein viel wie Xcode in, dass es bietet eine schöne Entwicklungsumgebung entworfen, um zu rationalisieren Android-Entwicklung. Also, schnappen Sie sich und treffen Sie mich wieder hier.

Erstellen Sie eine neue TWA-Projekt in Android Studio

Hast du Android Studio? Gut, ich kann nicht wirklich hören oder sehen Sie, so nehme ich an, dass du getan hast. Gehen Sie voran und knacken Sie zu öffnen, dann klicken Sie auf “Start a new Android Studio project.” Von dort aus, wählen Sie den “Add No Activity” – option, die es uns ermöglicht, konfigurieren Sie das Projekt.

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

  • Name der name Der Anwendung (aber ich Wette, Sie wussten, dass).
  • Paket-name: Ein Bezeichner für Android-Anwendungen auf dem Play Store. Es muss eindeutig sein, so schlage ich vor, den URL für die PWA in umgekehrter Reihenfolge (z.B. com.netguru.wordguru).
  • Speicherort: Wo wird das Projekt vor Ort existieren.
  • Sprache: ermöglicht die Auswahl eines bestimmten code-Sprache, aber es gibt keine Notwendigkeit für, da unsere app bereits haben, wissen Sie, geschrieben. Wir können diesen auf Java, was ist die Standard-Auswahl.
  • Minimum-API-level: Dies ist die version von der Android-API, mit der wir arbeiten, und es ist erforderlich, die von der Bibliothek unterstützt (die wir ‘ ll cover nächsten). Wir verwenden API-19.

Es gibt nur wenige Checkboxen unterhalb dieser Optionen. Diese sind irrelevant für uns hier, also lassen Sie Sie alle nicht aktiviert, bewegen Sie dann auf Fertig stellen.

Hinzufügen TWA-Support-Bibliothek

Eine support-Bibliothek ist erforderlich für TWAs. Die gute Nachricht ist, wir brauchen Sie nur zu ändern, zwei Dateien zu füllen, die Anforderung und die Leben beide in der gleichen Projekt-Verzeichnis: Gradle-Skripte. Beide sind benannt bauen.gradle, aber können wir unterscheiden, was was ist, indem man die Beschreibung in der Klammer.

Es gibt ein Git-Paket-manager namens JitPack, die speziell für Android-apps. Es ist ziemlich robust, aber die Quintessenz ist, dass es macht die Veröffentlichung unseres web-app ein Kinderspiel. Es ist ein Kostenpflichtiger Dienst, aber ich würde sagen, es lohnt sich die Kosten, wenn dies Ihre erste Zeit immer etwas in den Google Play store.

Editor Hinweis: Dies ist nicht ein sponsored-Stecker für JitPack. Es lohnt sich, den Aufruf, weil dieser post ist davon wenig-zu-keine Vertrautheit mit Android-Apps oder die Einreichung von apps an Google Play und es hat weniger Reibung für die Verwaltung eine Android-App repo, die verbindet, direkt an der Filiale. Das heißt, es ist absolut nicht erforderlich.

Sobald Sie in JitPack, schließen wir unser Projekt. Öffnen, erstellen.gradle (Projekt: Wordguru) – Datei, die wir gerade angeschaut und sagen, es zu betrachten JitPack für die app-repository:

allprojects {
repositories {

maven { url “https://jitpack.io’ }

}
}

OK, jetzt lassen Sie uns eröffnen, dass andere bauen.gradle-Datei. Dies ist, wo wir können, fügen Sie die erforderlichen Abhängigkeiten für das Projekt und wir in der Tat haben eine:

// bauen.gradle (Module: app)

Abhängigkeiten {

– Implementierung ” com.github.GoogleChrome:custom-tabs-client:a0f7418972′

}

TWA-Bibliothek, verwendet Java-8-features, so dass wir gehen zu müssen, aktivieren Sie Java 8. Dazu müssen wir hinzufügen compileOptions auf dieselbe Datei:

// bauen.gradle (Module: app)

android {

compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}

}

Es gibt auch Variablen genannt manifestPlaceholders, werden wir im nächsten Abschnitt behandeln. Für nun, lassen Sie ‘ s fügen Sie den folgenden zu definieren, wo die app gehostet ist, wird die Standard-URL und der name der app:

// bauen.gradle (Module: app)

android {

defaultConfig {

manifestPlaceholders = [
hostName: “wordguru.netguru.com”,
defaultUrl: “https://wordguru.netguru.com”,
launcherName: “Wordguru”
]

}

}
Bieten app-details-in der Android App-Manifest

Jede Android-app hat ein Android-App-Manifest (AndroidManifest.xml), die wesentlichen details über die app, wie das Betriebssystem es ist verbunden mit der Paket-Informationen, Geräte-Kompatibilität, und viele andere Dinge, die helfen, die Google-Play-display die app-Anforderungen.

Die Sache, wir sind wirklich besorgt, hier ist die Aktivität (<activity>). Dies ist, was implementiert die Benutzeroberfläche und ist erforderlich für die “Aktivitäten” in “Vertrauenswürdige Web-Aktivitäten.”

Lustig genug, wählten wir den “Add No Activity” – option beim einrichten unser Projekt in Android Studio und das ist, weil unser manifest ist leer und enthält nur den application-tag.

Beginnen wir mit der öffnung des manfifest-Datei. Wir werden ersetzen Sie das vorhandene package-Namen mit eigenen Applikations-ID und das label mit dem Wert aus der manifestPlaceholders Variablen, die wir im vorherigen Abschnitt definiert.

Dann, wir gehen, um tatsächlich fügen Sie die TWA-Aktivität, indem ein <activity> – tag innerhalb des <application> – tag.

<manifest
xmlns:android=”http://schemas.android.com/apk/res/android”
package=”com.netguru.wordguru”> // highlight

<Anwendung
android:allowBackup=”true”
android:icon=”@mipmap – /ic_launcher”
android:label=”${launcherName}” // highlight
android:supportsRtl=”true”
android:theme=”@style/AppTheme”>

<Aktivität
android:name=”android.Unterstützung.customtabs.vertrauenswürdigen.LauncherActivity”
android:label=”${launcherName}”> // highlight

<meta-Daten
android:name=”android.Unterstützung.customtabs.vertrauenswürdigen.DEFAULT_URL”
android:value=”${defaultUrl}” /> // highlight

<intent-filter>
<action android:name=”android.Absicht.Aktion.MAIN” />
<Kategorie android:name=”android.Absicht.Kategorie.LAUNCHER” />
</intent-filter>

<intent-filter android:autoVerify=”true”>
<action android:name=”android.Absicht.Aktion.VIEW”/>
<Kategorie android:name=”android.Absicht.Kategorie.STANDARD” />
<Kategorie android:name=”android.Absicht.Kategorie.BROWSABLE”/>
<data
android:scheme=”https”
android:host=”${hostName}”/> // highlight
</intent-filter>
</activity>
</application>
</manifest>

Und das, meine Freunde, ist Schritt 1. Gehen wir weiter zu Schritt 2.

Schritt 2: Überprüfen Sie die Beziehung zwischen der website und der app

Es war erforderlich, eine Verbindung zwischen der Android-Anwendung und die PWA. Um das zu tun, wir verwenden das Digital-Asset-Links.

Die Verbindung muss auf beiden enden, wo die TWA ist die Anwendung und die PWA ist die website.

Festzustellen, dass die Verbindung, die wir ändern müssen unsere manifestPlaceholders wieder. Diese Zeit brauchen wir ein zusätzliches element namens assetStatements hält, dass die Informationen über unsere PWA.

// bauen.gradle (Module: app)

android {

defaultConfig {

manifestPlaceholders = [

assetStatements: ‘[{ “relation”: [“delegate_permission/common.handle_all_urls”], ‘ +
‘”target”: {“namespace”: “web”, “Website”: “https://wordguru.netguru.com”}}]’

]

}

}

Nun, wir müssen zum hinzufügen einer neuen meta-Daten-tag, um unsere Anwendung tag. Dieser informiert Sie die Android-Anwendung, die wir wollen, um die Verbindung mit der angegebenen Anwendung in der manifestPlaceholders.

<manifest
xmlns:android=”http://schemas.android.com/apk/res/android”
package=”${packageId}”>

<Anwendung>

<meta-Daten
android:name=”asset_statements”
android:value=”${assetStatements}” />

</application>
</manifest>

Das ist es! wir haben gerade festgestellt der Anwendung der website-Beziehung. Jetzt springen wir in den Umbau der website, Anwendung.

Legen Sie die Verbindung in die entgegengesetzte Richtung, die wir brauchen, zu erstellen .json-Datei, die in der app verfügbar ist /sind.bekannte/assetlinks.json-Pfad. Die Datei kann erstellt werden mit einem generator, der sich in Android Studio. Siehe, ich habe dir Android Studio optimiert die Android-Entwicklung!

Brauchen wir drei Werte, um die Datei zu generieren:

  • Hosting-Website-domain: Das ist unsere PWA-URL (z.B. https://wordguru.netguru.com/).
  • App package name: Das ist unsere TWA Paketname (z.B. com.netguru.wordguru).
  • App-Paket-fingerprint (SHA256): Dies ist eine eindeutige kryptografische hash, die generiert wird, basierend auf den Google Play Store keystore.

Wir haben bereits erste und der zweite Wert. Wir können die Letzte one mit Android Studio.

Zunächst müssen wir generieren, signierte APK. In der Android-Studio gehen Sie zu: Build – → Erzeugen Unterzeichnet Bundle oder APK – → APK.

Verwenden Sie als Nächstes die vorhandenen Schlüsselspeicher, wenn Sie bereits eine haben. Falls Sie eine brauchen, gehen Sie zu “neu Erstellen…”.

Dann lassen Sie uns füllen Sie das Formular aus. Merken Sie sich die Anmeldeinformationen als diejenigen sind, welche die Anwendung signiert werden und bestätigen Sie Ihre Inhaberschaft der Anwendung.

So erstellen Sie eine keystore-Datei, die ist erforderlich, um die app-Paket-fingerprint (SHA256). Diese Datei ist extrem wichtig , da es funktioniert wie ein Beweis, dass Sie der Inhaber der Anwendung. Wenn diese Datei verloren geht, werden Sie nicht in der Lage zu tun, alle weiteren updates, die auf Ihre Anwendung in der Filiale.

Als Nächstes, lassen Sie uns wählen Sie die Art des bundle. In diesem Fall werden wir die Wahl “freigeben”, denn es gibt uns die Produktion bündeln. Wir müssen auch prüfen, ob die Signatur-Versionen.

Dies erzeugt unsere APK-wird später verwendet, um zu erstellen ein release im Google Play store. Nach der Erstellung unserer keystore, wir können es verwenden, um die Generierung von app-Paket-fingerprint (SHA256).

Lassen Sie den Kopf wieder zu Android Studio und gehen Sie zu Extras → App Links-Assistenten. Dadurch öffnet sich eine Seitenleiste, die zeigt die Schritte, die erforderlich sind, um eine Beziehung zwischen der Anwendung und der website. Wir wollen, gehen Sie zu Schritt 3, “Erklären Website Association” und füllen Sie die erforderlichen Daten: Website, domain-und Application-ID. Dann wählen Sie die keystore-Datei im vorherigen Schritt generiert haben.

Nach dem ausfüllen des Formulars drücken Sie “Generieren Sie Digital-Asset-Links-Datei” zu erzeugen, unsere assetlinks.json-Datei. Wenn wir uns öffnen, dass bis, es sollte in etwa so Aussehen:

[{
“relation”: [“delegate_permission/common.handle_all_urls”],
“target”: {
“namespace”: “android_app”,
“package_name”: “com.netguru.wordguru”,
“sha256_cert_fingerprints”: [“8A:F4:….:29:28”]
}
}]

Dies ist die Datei, die wir brauchen, um machen, finden Sie in unserer app /.bekannte/assetlinks.json-Pfad. Ich will nicht beschreiben, wie stellen Sie es auf diesem Weg, wie es auch Projekt-spezifisch und außerhalb des Geltungsbereichs dieses Artikels.

Wir testen die Beziehung durch einen Klick auf das “- Link und Überprüfen” – button. Wenn alles gut geht, bekommen wir eine Bestätigung mit “Erfolg!”

Yay! Wir haben wurde ein zwei-Wege-Beziehung zwischen unseren Android-Anwendung und unsere / PWA. Es ist alles bergab von hier, also lassen Sie ‘ s fahren Sie nach Hause.

Schritt 3: Holen Sie die erforderlichen Elemente

Google Play, erfordert ein paar Vermögenswerte um sicherzustellen, dass die app präsentiert sich sehr schön in den store. Speziell hier ist, was wir brauchen:

  • App Icons: Wir brauchen eine Vielzahl von Größen, einschließlich 48×48, 72×72, 96×96, Größe von 144 x 144, 192×192… oder wir verwenden eine adaptive Symbol.
  • High-res-Icon: Dies ist eine 512×512 Pixel große PNG-Bild, das in der gesamten Filiale.
  • Feature Grafik: Dies ist eine 1024×500 JPG oder 24-bit-PNG (kein alpha) banner -, Google-Play-Anwendungen auf dem app-details-Ansicht.
  • Screenshots: Google Play verwenden Sie diese, um zu zeigen verschiedenen Ansichten der app, Benutzer können überprüfen, vor dem Download.

Nachdem alle, wir können gehen Sie zu Google Play Store Entwickler-Konsole und die Anwendung veröffentlichen!

Schritt 4: Veröffentlichung auf Google Play!

Gehen wir zum letzten Schritt, und schließlich schieben Sie unsere app in den store.

Über die APK, die wir zuvor erstellt haben (die sich in der AndroidStudioProjects Verzeichnis), wir gehen müssen, um die Google-Play-Konsole veröffentlichen, um unsere Anwendung. Ich will nicht beschreiben, der Prozess der Veröffentlichung einer Anwendung im store, da der Assistent macht es ziemlich einfach, und wir sind Schritt-für-Schritt-Anleitung während des gesamten Prozesses.

Es dauert einige Stunden, damit der Antrag geprüft und genehmigt werden, aber wenn es soweit ist, wird es endlich erscheinen in der Filiale.

Wenn Sie nicht finden können die APK-Datei zu erhalten, können Sie eine neue erstellen, indem Sie auf Build → Generieren unterzeichnet bundle / APK → Build APK, vorbei an unseren vorhandenen keystore-Datei und füllen das alias und das Passwort, dass wir, wenn wir einen keystore. Nach der APK-erzeugt eine Benachrichtigung erscheinen soll und Sie können die Datei durch klicken auf den “Suchen” link.

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

Das ist es! Wir haben gerade geschoben unsere PWA an den Google Play store. Der Prozess ist nicht intuitiv, wie wir es gerne wären, aber immer noch, mit ein bisschen Mühe ist es auf jeden Fall machbar, und glauben Sie mir, es gibt dieses große Füllung am Ende, wenn Sie sehen, dass Ihre app angezeigt, in der wildnis.

Es ist darauf hinzuweisen, dass sich diese Funktion noch sehr frühen phase und ich würde es experimentell für einige Zeit. Ich würde nicht empfehlen, geht mit einer Freigabe für die Produktion der Anwendung für jetzt, weil das funktioniert nur mit Chrome-72 und höher — jede version vor, wird in der Lage sein, um die app zu installieren, aber die app stürzt sofort, das ist nicht die beste Nutzer-Erfahrung.

Auch der offizielle release von custom-tabs-client nicht unterstützt TWA noch. Wenn Sie wurden gefragt, warum wir roh verwendet GitHub-link anstelle der offiziellen Bibliothek-release -, gut, das ist, warum.