Wie man eine Progressive Web App in den Google Play Store bekommt

PWAs (Progressive Web Apps) gibt es schon seit einiger Zeit. Dennoch taucht jedes Mal, wenn ich versuche, sie Kunden zu erklären, dieselbe Frage auf: „Können meine Nutzer die App über App Stores installieren?“ Die Antwort war traditionell nein, aber das hat sich mit Chrome 72 geändert, das eine neue Funktion namens TWA (Trusted Web Activities) eingeführt hat.

Trusted Web Activities sind eine neue Möglichkeit, Ihre Web-App-Inhalte wie Ihre PWA mit Ihrer Android-App über ein auf Custom Tabs basierendes Protokoll zu integrieren.

In diesem Artikel werde ich die bestehende PWA von Netguru (Wordguru) verwenden und Schritt für Schritt erklären, was getan werden muss, damit die Anwendung verfügbar und direkt aus dem Google Play App Store installierbar ist.

Einige der hier behandelten Punkte mögen für jeden Android-Entwickler albern klingen, aber dieser Artikel ist aus der Sicht eines Frontend-Entwicklers geschrieben, insbesondere eines, der noch nie Android Studio verwendet oder eine Android-Anwendung erstellt hat. Bitte beachten Sie auch, dass vieles von dem, was wir hier behandeln, noch extrem experimentell ist, da es auf Chrome 72 beschränkt ist.

Schritt 1: Eine Trusted Web Activity einrichten

Die Einrichtung einer TWA erfordert keine Java-Programmierung, aber Sie benötigen Android Studio. Wenn Sie zuvor iOS- oder Mac-Software entwickelt haben, ist dies dem Xcode sehr ähnlich, da es eine gute Entwicklungsumgebung bietet, die zur Vereinfachung der Android-Entwicklung konzipiert ist. Also, schnappen Sie sich das und treffen Sie mich hier wieder.

Erstellen Sie ein neues TWA-Projekt in Android Studio

Haben Sie Android Studio? Nun, ich kann Sie weder hören noch sehen, also gehe ich davon aus, dass Sie es haben. Öffnen Sie es und klicken Sie auf „Start a new Android Studio project“. Von dort wählen wir die Option „Add No Activity“, die es uns ermöglicht, das Projekt zu konfigurieren.

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

• Name Der Name der Anwendung (aber das wussten Sie wahrscheinlich).
• Paketname: Eine Kennung für Android-Anwendungen im Play Store. Sie muss eindeutig sein, daher empfehle ich, die URL der PWA in umgekehrter Reihenfolge zu verwenden (z. B. com.netguru.wordguru).
• Speicherort: Wo das Projekt lokal existieren wird.
• Sprache: Hier können wir eine bestimmte Codierungssprache auswählen, aber das ist nicht nötig, da unsere App bereits geschrieben ist. Wir können dies bei Java belassen, was die Standardauswahl ist.
• Mindest-API-Level: Dies ist die Version der Android-API, mit der wir arbeiten, und sie wird von der Support-Bibliothek (die wir als Nächstes behandeln werden) benötigt. Verwenden wir API 19.

Es gibt ein paar Kontrollkästchen unter diesen Optionen. Diese sind hier für uns irrelevant, also lassen Sie sie alle deaktiviert und fahren Sie dann mit „Finish“ fort.

Fügen Sie die TWA-Supportbibliothek hinzu

Für TWAs ist eine Support-Bibliothek erforderlich. Die gute Nachricht ist, dass wir nur zwei Dateien ändern müssen, um diese Anforderung zu erfüllen, und beide befinden sich im selben Projektverzeichnis: Gradle Scripts. Beide heißen build.gradle, aber wir können sie anhand der Beschreibung in den Klammern unterscheiden.

Es gibt einen Git-Paketmanager namens JitPack, der speziell für Android-Apps entwickelt wurde. Er ist ziemlich robust, aber im Grunde macht er die Veröffentlichung unserer Web-App zum Kinderspiel. Es ist ein kostenpflichtiger Dienst, aber ich würde sagen, es lohnt sich, wenn dies das erste Mal ist, dass Sie etwas in den Google Play Store bringen.

Hinweis des Redakteurs: Dies ist keine gesponserte Werbung für JitPack. Es lohnt sich, darauf hinzuweisen, da dieser Beitrag wenig bis keine Vorkenntnisse über Android-Apps oder die Einreichung von Apps bei Google Play voraussetzt und weniger Reibungsverluste für die Verwaltung eines Android-App-Repos hat, das direkt mit dem Store verbunden ist. Das gesagt, es ist absolut keine Voraussetzung.

Sobald Sie sich bei JitPack befinden, verbinden wir unser Projekt damit. Öffnen Sie die Datei build.gradle (Project: Wordguru), die wir gerade betrachtet haben, und weisen Sie sie an, JitPack für das App-Repository zu verwenden.

allprojects {
  repositories {
    ...
    maven { url 'https://jitpack.io' }
    ...
  }
}

OK, öffnen wir nun die andere Datei build.gradle. Hier können wir alle erforderlichen Abhängigkeiten für das Projekt hinzufügen, und wir haben tatsächlich eine.

// build.gradle (Module: app)

dependencies {
  ...
  implementation 'com.github.GoogleChrome:custom-tabs-client:a0f7418972'
  ...
}

TWA-Bibliotheken verwenden Java 8-Funktionen, daher müssen wir Java 8 aktivieren. Dazu müssen wir compileOptions zur selben Datei hinzufügen.

// build.gradle (Module: app)

android {
  ...
  compileOptions {
    sourceCompatibility JavaVersion.VERSION_1_8
    targetCompatibility JavaVersion.VERSION_1_8
  }
  ...
}

Es gibt auch Variablen namens manifestPlaceholders, die wir im nächsten Abschnitt behandeln werden. Fügen wir für jetzt Folgendes hinzu, um anzugeben, wo die App gehostet wird, die Standard-URL und den App-Namen.

// build.gradle (Module: app)

android {
  ...
  defaultConfig {
    ...
    manifestPlaceholders = [
      hostName: "wordguru.netguru.com",
      defaultUrl: "https://wordguru.netguru.com",
      launcherName: "Wordguru"
    ]
    ...
  }
  ...
}

App-Details im Android App-Manifest bereitstellen

Jede Android-App verfügt über ein Android App-Manifest (AndroidManifest.xml), das wesentliche Details über die App liefert, wie z. B. das Betriebssystem, mit dem sie verknüpft ist, Paketinformationen, Gerätekompatibilität und viele andere Dinge, die Google Play helfen, die Anforderungen der App anzuzeigen.

Das, worauf wir uns hier wirklich konzentrieren, ist die Activity (<activity>). Diese implementiert die Benutzeroberfläche und ist für die „Activities“ in „Trusted Web Activities“ erforderlich.

Lustigerweise haben wir bei der Einrichtung unseres Projekts in Android Studio die Option „Add No Activity“ gewählt, und das liegt daran, dass unser Manifest leer ist und nur das Anwendungs-Tag enthält.

Beginnen wir mit dem Öffnen der Manifestdatei. Wir ersetzen den vorhandenen package-Namen durch unsere eigene Anwendungs-ID und das label durch den Wert aus den manifestPlaceholders-Variablen, die wir im vorherigen Abschnitt definiert haben.

Dann fügen wir tatsächlich die TWA-Aktivität hinzu, indem wir ein <activity>-Tag innerhalb des <application>-Tags einfügen.

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

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

    <activity
      android:name="android.support.customtabs.trusted.LauncherActivity"
      android:label="${launcherName}"> // highlight

      <meta-data
        android:name="android.support.customtabs.trusted.DEFAULT_URL"
        android:value="${defaultUrl}" /> // highlight

      
      <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>

      
      <intent-filter android:autoVerify="true">
        <action android:name="android.intent.action.VIEW"/>
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE"/>
        <data
          android:scheme="https"
          android:host="${hostName}"/> // highlight
      </intent-filter>
    </activity>
  </application>
</manifest>

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

Schritt 2: Die Beziehung zwischen Website und App überprüfen

TWAs erfordern eine Verbindung zwischen der Android-Anwendung und der PWA. Dazu verwenden wir Digital Asset Links.

Die Verbindung muss auf beiden Seiten hergestellt werden, wobei die TWA die Anwendung und die PWA die Website ist.

Um diese Verbindung herzustellen, müssen wir unsere manifestPlaceholders erneut ändern. Diesmal müssen wir ein zusätzliches Element namens assetStatements hinzufügen, das die Informationen über unsere PWA enthält.

// build.gradle (Module: app)

android {
  ...
  defaultConfig {
    ...
    manifestPlaceholders = [
      ...
      assetStatements: '[{ "relation": ["delegate_permission/common.handle_all_urls"], ' +
        '"target": {"namespace": "web", "site": "https://wordguru.netguru.com"}}]'
      ...
    ]
    ...
  }
  ...
}

Nun müssen wir ein neues meta-data-Tag zu unserem application-Tag hinzufügen. Dies informiert die Android-Anwendung, dass wir die Verbindung mit der in den manifestPlaceholders angegebenen Anwendung herstellen möchten.

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

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

Das war's! Wir haben gerade die Beziehung zwischen Anwendung und Website hergestellt. Springen wir nun zur Konvertierung von Website zu Anwendung.

Um die Verbindung in umgekehrter Richtung herzustellen, müssen wir eine .json-Datei erstellen, die unter dem Pfad /.well-known/assetlinks.json der App verfügbar ist. Die Datei kann mit einem Generator erstellt werden, der in Android Studio integriert ist. Sehen Sie, ich sagte Ihnen, dass Android Studio die Android-Entwicklung vereinfacht!

Wir benötigen drei Werte, um die Datei zu generieren

• Hosting-Site-Domain: Das ist unserePWA-URL (z. B. https://wordguru.netguru.com/).
• App-Paketname: Das ist unser TWA-Paketname (z. B. com.netguru.wordguru).
• App-Paket-Fingerabdruck (SHA256): Dies ist ein eindeutiger kryptografischer Hash, der auf dem Google Play Store-Schlüsselatore basiert.

Die ersten beiden Werte haben wir bereits. Den letzten erhalten wir mit Android Studio.

Zuerst müssen wir eine signierte APK generieren. Gehen Sie in Android Studio zu: Build → Generate Signed Bundle or APK → APK.

Verwenden Sie als Nächstes den vorhandenen Schlüsselatore, falls Sie bereits einen haben. Wenn Sie einen benötigen, gehen Sie zuerst zu „Create new…“.

Füllen wir dann das Formular aus. Achten Sie darauf, sich die Anmeldedaten zu merken, da die Anwendung damit signiert wird und sie Ihren Besitz der Anwendung bestätigen.

Dadurch wird eine Schlüsselatore-Datei erstellt, die zur Generierung des App-Paket-Fingerabdrucks (SHA256) erforderlich ist. Diese Datei ist äußerst wichtig, da sie als Nachweis Ihres Besitzes der Anwendung dient. Wenn diese Datei verloren geht, können Sie keine weiteren Updates für Ihre Anwendung im Store vornehmen.

Als Nächstes wählen wir den Bundle-Typ aus. In diesem Fall wählen wir „release“, da dies ein Produktions-Bundle ergibt. Wir müssen auch die Signaturversionen überprüfen.

Dadurch wird unsere APK generiert, die später zur Erstellung eines Releases im Google Play Store verwendet wird. Nachdem wir unseren Schlüsselatore erstellt haben, können wir ihn zur Generierung des erforderlichen App-Paket-Fingerabdrucks (SHA256) verwenden.

Gehen wir zurück zu Android Studio und wählen Sie Tools → App Links Assistant. Dies öffnet eine Seitenleiste, die die Schritte zum Erstellen einer Beziehung zwischen Anwendung und Website anzeigt. Wir möchten zu Schritt 3 „Declare Website Association“ gehen und die erforderlichen Daten eingeben: Site domain und Application ID. Wählen Sie dann die im vorherigen Schritt generierte Schlüsselatore-Datei aus.

Nachdem Sie das Formular ausgefüllt haben, klicken Sie auf „Generate Digital Asset Links file“, wodurch unsere Datei assetlinks.json generiert wird. Wenn wir sie öffnen, sollte sie 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 im Pfad /.well-known/assetlinks.json unserer App verfügbar machen müssen. Ich werde nicht beschreiben, wie man sie dort verfügbar macht, da dies projektspezifisch ist und außerhalb des Rahmens dieses Artikels liegt.

Wir können die Beziehung testen, indem wir auf die Schaltfläche „Link and Verify“ klicken. Wenn alles gut geht, erhalten wir eine Bestätigung mit „Success!“.

Juhu! Wir haben eine zweiseitige Beziehung zwischen unserer Android-Anwendung und unserer PWA hergestellt. Von hier an geht es nur noch bergab, also fahren wir fort.

Schritt 3: Erforderliche Assets besorgen

Der Google Play Store benötigt einige Assets, um sicherzustellen, dass die App gut im Store präsentiert wird. Genauer gesagt, benötigen wir Folgendes:

• App-Icons: Wir benötigen eine Vielzahl von Größen, einschließlich 48×48, 72×72, 96×96, 144×144, 192×192… oder wir können ein adaptives Icon verwenden.
• Hochauflösendes Icon: Dies ist ein 512×512 PNG-Bild, das im gesamten Store verwendet wird.
• Feature-Grafik: Dies ist ein 1024×500 JPG oder ein 24-Bit-PNG (ohne Alpha) Banner, das Google Play in der App-Detailansicht verwendet.
• Screenshots: Google Play verwendet diese, um verschiedene Ansichten der App zu zeigen, die Benutzer vor dem Download ansehen können.

Wenn wir all das haben, können wir zum Google Play Store Entwicklerkonsole gehen und die Anwendung veröffentlichen!

Schritt 4: Veröffentlichung bei Google Play!

Gehen wir zum letzten Schritt und laden unsere App endlich in den Store hoch.

Mithilfe der zuvor generierten APK (die sich im Verzeichnis AndroidStudioProjects befindet) müssen wir zur Google Play Konsole gehen, um unsere Anwendung zu veröffentlichen. Ich werde den Prozess der Veröffentlichung einer Anwendung im Store nicht beschreiben, da der Assistent ihn ziemlich einfach macht und wir Schritt-für-Schritt-Anleitungen erhalten.

Es kann einige Stunden dauern, bis die Anwendung überprüft und genehmigt wird, aber dann wird sie endlich im Store erscheinen.

Wenn Sie die APK nicht finden können, können Sie eine neue erstellen, indem Sie zu Build → Generate signed bundle / APK → Build APK gehen, unsere vorhandene Schlüsselatore-Datei übergeben und den Alias und das Passwort eingeben, die wir bei der Generierung der Schlüsselatore verwendet haben. Nach der Generierung der APK sollte eine Benachrichtigung erscheinen und Sie können über den Link „Locate“ zur Datei gelangen.

Glückwunsch, Ihre App ist im Google Play Store!

Das ist es! Wir haben unsere PWA gerade in den Google Play Store hochgeladen. Der Prozess ist nicht so intuitiv, wie wir es uns wünschen würden, aber mit etwas Mühe ist er definitiv machbar, und glauben Sie mir, es gibt ein großartiges Gefühl am Ende, wenn Sie Ihre App in freier Wildbahn sehen.

Es ist erwähnenswert, dass sich diese Funktion noch in einer sehr frühen Phase befindet und ich sie für einige Zeit als experimentell betrachten würde. Ich würde eine Produktionsfreigabe Ihrer Anwendung derzeit nicht empfehlen, da dies nur mit Chrome 72 und höher funktioniert – jede frühere Version kann die App installieren, aber die App selbst stürzt sofort ab, was keine gute Benutzererfahrung ist.

Außerdem unterstützt die offizielle Veröffentlichung von custom-tabs-client TWA noch nicht. Wenn Sie sich gefragt haben, warum wir einen rohen GitHub-Link anstelle der offiziellen Bibliotheksveröffentlichung verwendet haben, dann ist das der Grund.