Progressive Web-App auf Google Play hinzufügen

1. Willkommen

In diesem Lab nehmen Sie eine vorhandene Progressive Web App, die Sie bereitgestellt haben, und verpacken sie in einer App zur Verteilung im Google Play Store.

Lerninhalte

  • Bubblewrap verwenden, um Ihre Progressive Web App für den Google Play Store zu verpacken
  • Was ist ein Signaturschlüssel und wie wird er verwendet?
  • So erstellen Sie eine neue App in der Google Play Console und richten einen Test-Release ein, um Ihre App vor der Veröffentlichung zu testen
  • Was sind Digital Asset Links und wie füge ich sie meiner Web-App hinzu?

Wichtige Informationen

Voraussetzungen

  • Eine progressive Web-App, die im Internet veröffentlicht wurde und an der Sie Änderungen vornehmen können
  • Die Bubblewrap-Befehlszeile ist installiert und einsatzbereit.
  • Ein Google Play-Entwicklerkonto
  • Ihr vorhandener Signaturschlüssel, wenn Sie bereits Apps bei Google Play veröffentlicht haben
  • Ein Android- oder ChromeOS-Gerät zum Testen

Was nicht abgedeckt ist

2. Bubblewrapping Ihrer PWA

Bubblewrap ist ein Tool, mit dem Sie Ihre progressive Web-App ganz einfach in ein Android-App-Bundle verpacken können. Dazu müssen Sie nur einige CLI-Befehle ausführen. Dazu wird ein Android-Projekt generiert, mit dem Ihre PWA als vertrauenswürdige Web-Aktivität gestartet wird.

Erstellen Sie zuerst ein Verzeichnis für Ihr Projekt und wechseln Sie in dieses Verzeichnis:

$ mkdir my-pwa && cd my-pwa

Führen Sie dann das Bubblewrap-Befehlszeilentool aus, um die Konfiguration und das Android-Projekt für das Android App Bundle zu generieren, das Sie bei Google Play hochladen:

$ bubblewrap init --manifest=https://my-pwa.com/manifest.json

Hier wird Bubblewrap mit dem Speicherort der Web-App-Manifestdatei einer PWA initialisiert. Dadurch wird eine Standardkonfiguration aus dem Web-App-Manifest generiert und ein Assistent in der Konsole gestartet, mit dem Sie die Standardkonfiguration ändern können. Folgen Sie dem Assistenten, um die vom Tool generierten Werte zu ändern.

Bubblewrap-CLI-Assistent, der eine Initialisierung von airhorner zeigt, wobei die Domain mit „example.com“ und die Start-URLs überschrieben werden.

Signierschlüssel

Für das Hochladen von Anwendungspaketen in den Google Play Store ist eine digitale Signatur mit einem Zertifikat erforderlich, das oft als Signaturschlüssel bezeichnet wird. Dies ist ein selbst signiertes Zertifikat und unterscheidet sich von dem, das zum Bereitstellen Ihrer Anwendung über HTTPS verwendet wird.

Bubblewrap fragt beim Erstellen der Anwendung nach dem Pfad für den Schlüssel. Wenn Sie einen vorhandenen Play Store-Eintrag für Ihre Anwendung verwenden, müssen Sie den Pfad zum selben Schlüssel hinzufügen, der von diesem Eintrag verwendet wird.

Der Bubblewrap-CLI-Assistent fragt nach dem Speicherort und Namen des vorhandenen Signaturschlüssels des Nutzers.

Wenn Sie keinen vorhandenen Signaturschlüssel haben und einen neuen Eintrag im Play Store erstellen, können Sie den von Bubblewrap bereitgestellten Standardwert verwenden, damit ein neuer Schlüssel für Sie erstellt wird:

Der Bubblewrap-CLI-Assistent fragt, ob der Nutzer einen neuen Signaturschlüssel erstellen möchte.

Bubblewrap-Ausgabe

Nachdem Sie Ihr Bubblewrap-Projekt initialisiert und den Assistenten abgeschlossen haben, wurden die folgenden Elemente erstellt:

  • twa-manifest.json: Die Projektkonfiguration, die die im Bubblewrap-Assistenten ausgewählten Werte widerspiegelt. Sie sollten diese Datei mit Ihrem Versionsverwaltungssystem verfolgen, da sie bei Bedarf zum Regenerieren des gesamten Bubblewrap-Projekts verwendet werden kann.
  • Android-Projektdateien: Die verbleibenden Dateien im Verzeichnis sind das generierte Android-Projekt. Dieses Projekt ist die Quelle, die für den Bubblewrap-Build-Befehl verwendet wird. Optional können Sie diese Dateien auch mit Ihrem Versionsverwaltungssystem verfolgen.
  • (Optional) Signaturschlüssel: Wenn Sie den Signaturschlüssel von Bubblewrap erstellen lassen, wird er an dem im Assistenten beschriebenen Speicherort ausgegeben. Bewahren Sie den Schlüssel an einem sicheren Ort auf und beschränken Sie die Anzahl der Personen, die darauf Zugriff haben. Er wird verwendet, um zu beweisen, dass Apps im Play Store von Ihnen stammen.

Mit diesen Dateien haben wir jetzt alles, was wir zum Erstellen eines Android App Bundles benötigen.

Android App Bundle erstellen

Führen Sie im selben Verzeichnis, in dem Sie den Initialisierungsbefehl von Bubblewrap ausgeführt haben, den folgenden Befehl aus. Sie benötigen die Passwörter für Ihren Signaturschlüssel:

$ bubblewrap build

Bubblewrap-CLI-Ausgabe für das Erstellen eines Projekts, in der nach Passwörtern für den Signaturschlüssel gefragt wird und die Generierung verschiedener Versionen der Android-App angezeigt wird.

Mit dem Build-Befehl werden zwei wichtige Dateien generiert:

  • app-release-bundle.aab: Das Android App Bundle Ihrer PWA. Dies ist die Datei, die Sie im Google Play Store hochladen.
  • app-release-signed.apk: Ein Android-Paketformat, mit dem die Anwendung mit dem Befehl bubblewrap install direkt auf einem Entwicklungsgerät installiert werden kann.

3. Ausprobieren – Bubblewrap

Jetzt sind Sie an der Reihe. Versuchen Sie, die folgenden Aufgaben zu erledigen, und nutzen Sie dabei die Erkenntnisse aus dem vorherigen Schritt:

  1. Erstellen Sie ein Verzeichnis für Ihr generiertes Android-Projekt.
  2. Initialisieren Sie das Verzeichnis mit Bubblewrap und dem Web-App-Manifest Ihrer PWA.
  3. Generieren Sie einen neuen Signaturschlüssel oder verwenden Sie Ihre vorhandenen Schlüssel.
  4. Erstellen Sie Ihr Android App Bundle aus dem generierten Android-Projekt.

4. App im Google Play Store hinzufügen

Nachdem Sie ein Android App Bundle für Ihre PWA haben, können Sie es in den Google Play Store hochladen. Nachdem Sie Ihr Entwicklerkonto registriert haben, können Sie sich in der Play Console anmelden und loslegen.

App erstellen

Nach der Anmeldung wird ein Bildschirm mit allen Ihren Apps angezeigt. Oben auf der Seite befindet sich die Schaltfläche App erstellen. Wenn Sie darauf klicken, wird der folgende Bildschirm angezeigt, der Sie durch das Erstellen eines neuen Android-App-Eintrags führt.

Bildschirm mit dem Formular „App erstellen“ in der Play Console.

Hier müssen Sie eine Reihe von Feldern ausfüllen, darunter den Namen der App, die Standardsprache, ob es sich um eine App oder ein Spiel handelt, ob sie kostenlos oder kostenpflichtig ist, und eine Reihe von Erklärungen. Sie können keine App erstellen, ohne den Erklärungen zuzustimmen. Lesen Sie sie sich daher sorgfältig durch, bevor Sie zustimmen.

Nachdem Sie alle Informationen eingegeben und unten im Formular auf die Schaltfläche App erstellen geklickt haben, werden Sie zum Dashboard für Ihre neue App weitergeleitet. Dort finden Sie Checklisten mit Aufgaben, die Sie erledigen müssen, um Ihre App einzurichten, zu testen und zu veröffentlichen.

Internen Test einrichten

Mit internen Tests können Sie Ihre App schnell und ohne Prüfung für eine Gruppe von Trusted Testern veröffentlichen, die Sie auswählen. Sehen Sie sich die Aufgaben in der Checkliste Jetzt mit dem Testen beginnen an und wählen Sie Tester auswählen aus.

Checkliste für den Start von Tests

Wenn Sie auf diese Aufgabe klicken, gelangen Sie zur Seite Interner Test. Hier verwalten Sie die Testeinrichtung für Ihre App. Sie können diesen Bereich wieder aufrufen, indem Sie in der Seitenleiste im Menü Release den Abschnitt Testen öffnen. Als Erstes müssen Sie eine E-Mail-Liste mit Testern erstellen, die Ihre App testen. Klicken Sie dazu im Bereich Tester der Seite auf den Link E-Mail-Liste erstellen. Daraufhin wird ein Pop-up-Fenster geöffnet, in dem Sie Ihre E-Mail-Liste erstellen können.

Pop-up-Fenster mit dem Formular zum Erstellen einer E‑Mail-Liste, das den Listennamen, E‑Mail-Adressen, einen Link zum Hochladen einer CSV-Datei mit E‑Mail-Adressen und einen Bereich zum Anzeigen der hochgeladenen E‑Mail-Adressen enthält.

In diesem Pop-up-Fenster geben Sie Ihrer E‑Mail-Liste einen Namen. Sie können E‑Mail-Adressen entweder manuell eingeben oder eine CSV-Datei mit E‑Mail-Adressen hochladen. Klicken Sie dann auf die Schaltfläche Änderungen speichern. Sie können jederzeit zu bereits erstellten E‑Mail-Listen zurückkehren, um E‑Mail-Adressen nach Bedarf hinzuzufügen oder zu entfernen. Nachdem Sie Ihre Tester hinzugefügt haben, können Sie ein Testrelease erstellen. Klicken Sie oben auf der Seite auf die Schaltfläche Neuen Release erstellen.

Die Seite „Interner Test“ mit einem Pfeil, der auf die Schaltfläche „Neuen Release erstellen“ zeigt.

Testrelease erstellen

Nachdem Sie auf die Schaltfläche Neuen Release erstellen geklickt haben, werden Sie durch eine Reihe von Abschnitten geführt. Unter App-Integrität können Sie festlegen, wie Sie den Signaturschlüssel Ihrer App verwalten möchten. Die Standardsituation ist, dass Google Ihren Signaturschlüssel verwaltet. Das ist die empfohlene Option, da sie sowohl sicher ist als auch dafür sorgt, dass Ihre App wiederhergestellt werden kann, falls Sie Ihren Uploadschlüssel verlieren.

Play App Signing

Ein Flussdiagramm, das von links nach rechts einen Entwickler und seinen Upload-Schlüssel zeigt, mit dem er seine App signiert und an Google sendet. Google hat dann einen App-Signaturschlüssel, mit dem die App signiert und an den Nutzer gesendet wird.

App-Upload und -Abschluss

Nachdem Sie ausgewählt haben, wie Sie Ihren Signaturschlüssel verwalten möchten, werden Sie aufgefordert, Ihr App-Bundle in Ihren Release hochzuladen. Ziehen Sie dazu die von Bubblewrap generierte Datei app-release-bundle.aab in das Formular. Füllen Sie die restlichen Releasedetails aus und klicken Sie auf die Schaltflächen Speichern, Release überprüfen und Roll-out für internen Test starten, um den Release zu starten. Dadurch wird Ihre App für Ihre internen Tester verfügbar. Zurück auf der Seite Interner Test können Sie auf dem Tab Tester einen Link kopieren, den Sie mit Ihren Testern teilen können, damit diese Zugriff auf Ihre App erhalten.

Seite für interne Tests mit einem Pfeil, der auf den Link zum Kopieren zeigt, um einen Testlink mit Testern zu teilen.

5. Ausprobieren – App erstellen

Jetzt sind Sie an der Reihe. Versuchen Sie, die folgenden Aufgaben zu erledigen, und nutzen Sie dabei die Erkenntnisse aus dem vorherigen Schritt:

  1. Erstellen Sie in der Play Console eine neue App für Ihre PWA.
  2. Richten Sie interne Tests für die App ein und fügen Sie sich selbst als Tester hinzu.
  3. Laden Sie Ihr App-Bundle hoch und erstellen Sie einen Testrelease für Ihre App.
  4. Installieren Sie Ihre App über den Testlink aus dem Play Store auf Ihrem Android- oder ChromeOS-Gerät.

6. Digital Asset Links

Wenn Sie Ihre PWA in Play getestet haben, stellen Sie möglicherweise fest, dass sie nicht im Vollbildmodus ausgeführt wird. Das liegt daran, dass Sie die Inhaberschaft der Website noch nicht über eine Digital Asset Links-Datei bestätigt haben. Bubblewrap kann Ihr Android-App-Bundle konfigurieren und erstellen, aber Sie müssen den Link durch Aktualisieren Ihrer Webanwendung fertigstellen.

SHA-256-Fingerabdruck Ihrer App abrufen

Um die Digital Asset Links Ihrer PWA zu konfigurieren, benötigen Sie den SHA-256-Fingerabdruck des Zertifikats, mit dem das Paket signiert wurde, das der Nutzer auf seinem Smartphone erhält.

Mit Play App-Signatur

Wenn Sie die Play-App-Signatur für Ihre App beim Erstellen des Releases eingerichtet haben (was früher empfohlen wurde), finden Sie den SHA-256-Fingerabdruck in der Play Console. Dieses Zertifikat unterscheidet sich von dem, das zum Hochladen Ihrer Anwendung verwendet wurde. Um den Fingerabdruck zu erhalten, rufen Sie in Ihrer Anwendung in der Play Console Releases > Einrichtung > App-Integrität auf. Dort sehen Sie unter Zertifikat für App-Signaturschlüssel mehrere Optionen. Kopieren Sie den Wert des SHA-256-Zertifikatfingerabdrucks.

Bildschirm „App-Integrität“ mit hervorgehobenem SHA-256-Zertifikat-Fingerabdruck

Ohne Play App-Signatur

Wenn Sie die Play App-Signatur deaktiviert haben, ist der Schlüssel, mit dem die endgültige Anwendung signiert wird, derselbe, den Sie zum Hochladen der Anwendung in die Play Console verwenden. Sie können den Fingerabdruck mit dem keytool von Java extrahieren:

$ keytool -list -v \
    -keystore <keystore-file-path> \
    -alias <key-alias> \
    -keypass <key-password> \
    -storepass <store-password> | grep SHA256

$     SHA256: BD:92:64:B0:1A:B9:08:08:FC:FE:7F:94:B2...

Dazu benötigen Sie den Pfad zu Ihrem Signaturschlüssel und die entsprechenden Passwörter. Kopieren Sie die hexadezimalen Werte des SHA256-Schlüssels.

Bubblewrap kann die von Ihnen abgerufenen Signatur-Fingerabdrücke verwalten und die richtige Digital Asset Links-Datei für Sie generieren. Wenn Sie mit Bubblewrap einen Fingerabdruck hinzufügen möchten, führen Sie den folgenden Befehl im selben Verzeichnis aus, das beim Bubblewrapping Ihrer PWA erstellt wurde. Ersetzen Sie dabei <fingerprint> durch den im vorherigen Schritt kopierten Fingerabdruck.

$ bubblewrap fingerprint add <fingerprint>

Mit diesem Befehl wird der Fingerabdruck der Fingerabdruckliste der Anwendung hinzugefügt und eine assetlinks.json-Datei generiert. Laden Sie diese Datei in das Verzeichnis .well-known auf dem gleichen Ursprung wie Ihre PWA hoch.

7. Ausprobieren – Digital Asset Links

Jetzt sind Sie an der Reihe. Versuchen Sie, die folgenden Aufgaben zu erledigen, und nutzen Sie dabei die Erkenntnisse aus dem vorherigen Schritt:

  1. SHA-256-Fingerabdruck Ihrer App ermitteln
  2. Erstellen Sie eine Digital Asset Links-Datei für Ihre App.
  3. Laden Sie die Digital Asset Links-Datei in Ihre PWA hoch.
  4. Prüfen Sie mit der API und Ihrer Test-App, ob Ihre Digital Asset Links-Datei richtig eingerichtet ist.

8. Testen Sie Ihr Wissen

Bevor Sie fortfahren, können Sie Ihr Wissen testen und sehen, was Sie gelernt haben, indem Sie die folgenden Fragen beantworten. Schauen Sie nicht nach den Antworten!

Nachdem Sally ihr Android-Projekt mit Bubblewrap generiert hat, committet sie die generierte ______-Datei in ihr Versionsverwaltungssystem, damit sie sie bei Bedarf neu erstellen kann.

twa-manifest.json Signierschlüssel app-release-bundle.aab build.gradle

Jack möchte, dass sein QA-Team seine PWA-Android-App testet. Er ______ sein Android App Bundle in einem internen Test-Track.

Uploads Builds und Uploads Releases Signieren und Hochladen

Die PWA-Android-App von Oogie Boogie wird nicht im Vollbildmodus ausgeführt. Um das Problem zu beheben, ruft er den SHA-256-Zertifikatfingerabdruck für seine ______ ab und lädt ihn in seine Digital Asset Links-Datei hoch, die sich unter ______ auf demselben Ursprung wie seine PWA befindet.

Upload-Schlüssel, /.well-known/assetlinks.json Upload-Schlüssel, /assetlinks.json Signierschlüssel, /.well-known/assetlinks.json Signierschlüssel, /assetlinks.json

9. Wissen testen – Antworten

Antworten auf die Fragen im Quiz

  1. Nachdem Sally ihr Android-Projekt mit Bubblewrap generiert hat, committet sie die generierte ______-Datei in ihr Versionsverwaltungssystem, damit sie sie bei Bedarf neu erstellen kann.
  2. Jack möchte, dass sein QA-Team seine PWA-Android-App testet. Er ______ sein Android App Bundle in einem internen Test-Track.
  3. Die PWA-Android-App von Oogie Boogie wird nicht im Vollbildmodus ausgeführt. Um das Problem zu beheben, ruft er den SHA-256-Zertifikatfingerabdruck für seine ______ ab und lädt ihn in seine Digital Asset Links-Datei hoch, die sich unter ______ auf demselben Ursprung wie seine PWA befindet.

10. Glückwunsch!

Glückwunsch! Sie haben gelernt, wie Sie Ihre PWA dem Google Play Store hinzufügen.

Wenn Sie sich bereit fühlen, können Sie die folgenden Schritte selbst ausprobieren:

Viel Spaß beim Programmieren!