Progressive Web-App bei Google Play hinzufügen

1. Willkommen

In diesem Lab werden Sie eine vorhandene progressive Web-App verwenden, die Sie bereitgestellt haben, und sie dann in einer App für den Vertrieb im Google Play Store zusammenfassen.

Lerninhalte

  • Progressive Web-App für den Google Play Store mit Bubblepack verpacken
  • Was ein Signaturschlüssel ist und wie er verwendet wird
  • So erstellen Sie eine neue App in der Google Play Console und richten einen Testrelease ein, um Ihre App vor der Veröffentlichung zu testen
  • Was sind digitale Asset-Links und wie können sie Ihrer Webanwendung hinzugefügt werden?

Wichtige Informationen

Voraussetzungen

  • Eine progressive Web-App, die live im Internet veröffentlicht wird und in der Sie Änderungen vornehmen können
  • Die Bubblepack-Befehlszeile ist installiert und einsatzbereit
  • Ein Google Play-Entwicklerkonto.
  • Dein bestehender Signaturschlüssel, wenn du bereits Apps bei Google Play gestartet hast
  • Ein Android- oder Chrome OS-Gerät zum Testen

Was nicht abgedeckt ist

  • PWAs werden nur auf Android- oder nur Chrome OS-Geräte beschränkt.
  • Bereitstellen einer PWA für Chrome OS und eine Android-App für Mobilgeräte unter derselben App.
  • Einhaltung der Zahlungsrichtlinie für Google Play in Ihrer PWA

2. PWAs zusammenfassen

Mit Bubblepack können Sie Ihre Progressive Web-App ganz einfach in ein Android App Bundle verpacken und dafür einige Befehlszeilenbefehle ausführen. Dazu wird ein Android-Projekt erstellt, das Ihre PWA als vertrauenswürdige Web-Aktivität startet.

Erstellen Sie zuerst ein Verzeichnis, in dem Ihr Projekt gespeichert werden soll, und verschieben Sie es:

$ mkdir my-pwa && cd my-pwa

Führe dann das Blas-Befehlszeilentool aus, um die Konfiguration und das Android-Projekt für das Android App Bundle zu generieren, das du bei Google Play hochlädst:

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

In diesem Fall wird Bubblepack mit dem Speicherort einer Web App Manifest-Datei von PWAs 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.

Assistenten für das BubbleWrap-Kommando, das eine Initialisierung von Airhorner zeigt, wobei die Domain mit beispiel.de überschrieben und die Start-URLs überschrieben werden

Signierschlüssel

Im Google Play Store müssen Anwendungspakete beim Upload digital mit einem Zertifikat signiert werden. Oft wird dies als Signaturschlüssel bezeichnet. Dies ist ein selbst signiertes Zertifikat, das sich von dem unterscheidet, das zum Bereitstellen Ihrer Anwendung über HTTPS verwendet wird.

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

Assistenten für das Infofeld-CLI nach dem Speicherort des vorhandenen Signaturschlüssels und des Namens des Nutzers fragen.

Wenn Sie keinen vorhandenen Signaturschlüssel haben und einen neuen Eintrag im Play Store erstellen, können Sie den mit BubbleWrap gelieferten Standardwert verwenden, damit er einen neuen Schlüssel für Sie erstellt:

Assistent für das Infofeld für die Befehlszeile, in dem gefragt wird, ob der Nutzer einen neuen Signaturschlüssel erstellen möchte

Bubble-Wrapping-Ausgabe

Nachdem du das BubbleWrap-Projekt initialisiert und den Assistenten abgeschlossen hast, werden die folgenden Elemente erstellt:

  • twa-manifest.json: Die Projektkonfiguration mit den im BubbleWrap-Assistenten ausgewählten Werten. Sie sollten diese Datei mit Ihrem Versionsverwaltungssystem verfolgen, da sie bei Bedarf dazu verwendet werden kann, das gesamte Bubblepack-Projekt neu zu generieren.
  • Android-Projektdateien: Die verbleibenden Dateien im Verzeichnis sind die generierten Android-Projekte. Dieses Projekt ist die Quelle, die für den Build-Befehl „Bubblepack“ verwendet wird. Sie können diese Dateien auch mit Ihrem Versionsverwaltungssystem erfassen.
  • Signaturschlüssel (optional): Wenn Sie sich für den Signaturschlüssel von Bubblepack entscheiden, wird der Schlüssel an die im Assistenten angegebene Position ausgegeben. Bewahren Sie den Schlüssel an einem sicheren Ort auf und beschränken Sie die Anzahl der Personen, die Zugriff auf ihn haben. Damit wird bestätigt, dass Apps im Play Store von Ihnen stammen.

Mit diesen Dateien haben wir jetzt alles, was wir für das Erstellen eines Android App Bundle brauchen.

Android App Bundle erstellen

Führen Sie innerhalb desselben Verzeichnisses, den Sie den Initialisierungsbefehl für Bubblepack ausgeführt haben, den folgenden Befehl aus (Sie benötigen die Passwörter für Ihren Signaturschlüssel):

$ bubblewrap build

Bubblepack-Befehlszeile beim Erstellen eines Projekts, mit der nach Passwörtern für den Signaturschlüssel gefragt und die Generierung verschiedener Versionen der Android-App angezeigt wird.

Mit dem Build-Befehl werden zwei wichtige Dateien generiert:

  • app-release-bundle.aab – Ihr PWA-Android App Bundle Dies ist die Datei, die Sie in den Google Play Store hochladen.
  • app-release-signed.apk: Ein Android-Verpackungsformat, mit dem die App mithilfe des Befehls bubblewrap install direkt auf einem Entwicklungsgerät installiert werden kann.

3. Jetzt ausprobieren – Bubblepack

Jetzt sind Sie an der Reihe. Versuchen Sie Folgendes auf Grundlage des Wissens aus dem vorherigen Schritt:

  1. Erstellen Sie ein Verzeichnis für Ihr generiertes Android-Projekt.
  2. Initialisieren Sie dieses Verzeichnis mit BubbleWrap und Ihrem PWA-Web-Manifest.
  3. Generieren Sie einen neuen Signaturschlüssel oder verwenden Sie vorhandene Schlüssel.
  4. Erstelle dein Android App Bundle aus dem generierten Android-Projekt.

4. App zum Google Play Store hinzufügen

Da du jetzt ein Android App Bundle für deine PWA hast, kannst du sie in den Google Play Store hochladen. Sobald Sie Ihr Entwicklerkonto registriert haben, können Sie sich in der Play Console anmelden und sich anmelden.

Anwendung erstellen

Sobald du dich angemeldet hast, siehst du einen Bildschirm mit allen deinen Apps. Oben ist die Schaltfläche App erstellen zu sehen, auf der Sie nach dem Klick auf das Symbol zum Erstellen eines neuen Android-App-Eintrags klicken.

Bildschirm mit dem Play Console-Formular zum Erstellen eines Play Console-Kontos.

Es gibt eine Reihe von Feldern, die ausgefüllt werden müssen, darunter der App-Name, die Standardsprache, ob die App oder ein Spiel verfügbar ist, ob sie kostenlos oder kostenpflichtig ist, und eine Reihe von Deklarationen. Solange du den Erklärungen nicht zustimmst, kannst du keine App erstellen. Lies sie dir deshalb bitte sorgfältig durch.

Sobald Sie alle Informationen eingegeben haben und unten im Formular auf die Schaltfläche App erstellen klicken, werden Sie zum Dashboard für Ihre neue App weitergeleitet. Dort finden Sie Checklisten für die Schritte zum Einrichten, Testen und Veröffentlichen Ihrer App.

Interne Tests einrichten

Interne Tests sind eine gute Möglichkeit, um Ihre App schnell und ohne von Ihnen ausgewählte Gruppe vertrauenswürdiger Tester freizugeben. Sehen Sie sich die Aufgaben in der Checkliste Jetzt testen an und wählen Sie Tester auswählen aus.

Checkliste zum Testen jetzt starten

Wenn Sie darauf klicken, gelangen Sie zur Seite Interner Test. Hier verwalten Sie die Testeinrichtung für Ihre App. Sie können sie über den Bereich Test im Menü Release der Seitenleiste wieder aufrufen. Zuerst müssen Sie dazu eine E-Mail-Liste mit Testern erstellen, die Ihre App testen. Klicken Sie dazu auf der Seite Tester 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 mit Formular zum Erstellen einer E-Mail-Liste, das den Listennamen, die E-Mail-Adressen, einen Link zum Hochladen einer CSV-Datei mit E-Mail-Adressen sowie einen Bereich mit den hochgeladenen E-Mail-Adressen enthält

In diesem Pop-up-Fenster benennen Sie Ihre E-Mail-Liste und können entweder E-Mail-Adressen manuell eingeben oder eine CSV-Datei mit hochzuladenden E-Mail-Adressen hochladen. Klicken Sie abschließend auf Änderungen speichern. Sie können E-Mail-Listen, die Sie bereits erstellt haben, aufrufen und E-Mail-Adressen bei Bedarf hinzufügen oder entfernen. Nachdem Sie Ihre Tester hinzugefügt haben, können Sie einen Testrelease erstellen. Klicken Sie oben auf der Seite auf die Schaltfläche Neuen Release erstellen.

Interne Testseite mit einem Pfeil, der auf die Schaltfläche „Neue Version erstellen“ verweist.

Test-Release erstellen

Nachdem Sie auf die Schaltfläche Neuen Release erstellen geklickt haben, werden Sie durch mehrere Abschnitte geführt. Beim ersten Schritt App-Integrität wählen Sie aus, wie der Signaturschlüssel Ihrer App verwaltet werden soll. Die Standardoption besteht darin, dass Google Ihren Signaturschlüssel verwalten kann. Das ist die empfohlene Option, da sie sicher ist und Ihre App für den Fall, dass Sie Ihren Uploadschlüssel verlieren, wiederherstellen kann.

Play App Signing

Ein Flussdiagramm zeigt von links nach rechts einen Entwickler und seinen Uploadschlüssel, mit dem er seine App signiert und an Google sendet. Google hat dann einen App-Signaturschlüssel und signiert die App mit diesem Schlüssel. Anschließend sendet er diesen an den Nutzer.

App-Upload und Abschluss

Nachdem Sie festgelegt haben, wie Sie Ihren Signaturschlüssel verwalten möchten, werden Sie aufgefordert, Ihr App Bundle in Ihren Release hochzuladen. Ziehen Sie dazu die von App-Release-Bundle.aab erstellte Datei app-release-bundle.aab per Drag-and-drop in das Formular. Geben Sie zum Abschluss des Release die erforderlichen Informationen ein und klicken Sie auf Speichern. Klicken Sie anschließend auf Release überprüfen und schließlich auf Einführung in internen Tests starten. Dadurch wird Ihre App für interne Tester verfügbar. Auf der Seite Interner Test können Sie auf dem Tab Tester einen Link kopieren und an Ihre Tester weitergeben, damit sie Zugriff auf Ihre App erhalten.

Interne Testseite mit einem Pfeil, der auf den Link „Link kopieren“ verweist, über den sich ein Testlink mit Testern teilen lässt.

5. Jetzt ausprobieren – App erstellen

Jetzt sind Sie an der Reihe. Versuchen Sie Folgendes auf Grundlage des Wissens 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 Test-Release für Ihre App.
  4. Installiere deine App über den Testlink aus dem Play Store auf deinem Android- oder Chrome OS-Gerät.

6. Digital Asset Links

Wenn Sie Ihre PWA im Play Store testen möchten, werden Sie möglicherweise feststellen, dass sie nicht im Vollbildmodus ausgeführt wird. Du hast die Inhaberschaft der Website noch nicht über eine Digital Asset Links-Datei bestätigt. Du kannst dein Android-App Bundle zwar mit Bubblepack konfigurieren und erstellen, du musst aber die Verknüpfung abschließen, indem du deine Webanwendung aktualisierst.

SHA-256-Fingerabdruck Ihrer App abrufen

Zum Konfigurieren Ihrer PWAs für digitale Assets benötigen Sie den SHA-256-Fingerabdruck für das Zertifikat, mit dem das Paket signiert wird, das der Nutzer auf seinem Smartphone erhält.

Mit Play App-Signatur

Wenn Sie beim Erstellen Ihres Releases die Play App-Signatur für Ihre App eingerichtet haben (was zuvor empfohlen wurde), finden Sie den SHA-256-Fingerabdruck in der Play Console. Dieses Zertifikat ist nicht das, das zum Hochladen Ihrer Anwendung verwendet wird. Rufen Sie dazu in der App in der Play Console die Seite Releases->Setup->App-Integrität auf. Sie sehen unter App-Signaturschlüssel eine Reihe von Optionen. Kopieren Sie den Wert des SHA-256-Zertifikatfingerabdrucks.

Auf dem Bildschirm „App-Integrität“ ist der SHA-256-Zertifikatfingerabdruck markiert.

Ohne Play App-Signatur

Wenn Sie Play App Signing deaktiviert haben, wird der Schlüssel zum Signieren der endgültigen App und der Schlüssel verwendet, den Sie zum Hochladen der App in die Play Console verwenden. Du kannst 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...

Damit du ihn verwenden kannst, musst du den Pfad zu deinem Signaturschlüssel und die entsprechenden Passwörter kennen. Kopieren Sie die Hexadezimalwerte des SHA256-Schlüssels.

Mit BubbleWrap können Sie Ihre Fingerabdrücke für Signaturen verwalten und die richtige Digital Asset Links-Datei erstellen lassen. Wenn Sie einen Fingerabdruck mit BubbleWrap hinzufügen möchten, führen Sie den folgenden Befehl im selben Verzeichnis aus, das Sie beim Erstellen der Bubble-Wrapping-PWA erstellt haben, und ersetzen Sie dabei <fingerprint> durch den aus dem vorherigen Schritt kopierten Fingerabdruck.

$ bubblewrap fingerprint add <fingerprint>

Durch diesen Befehl wird der Fingerabdruck der Fingerabdruckliste der Anwendung hinzugefügt und eine assetlinks.json-Datei generiert. Laden Sie diese Datei in das .well-known-Verzeichnis mit demselben Ursprung wie Ihre PWA hoch.

7. Jetzt ausprobieren – Links zu digitalen Assets

Jetzt sind Sie an der Reihe. Versuchen Sie Folgendes auf Grundlage des Wissens aus dem vorherigen Schritt:

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

8. Testen Sie Ihr Wissen

Bevor du fortfährst, teste dein Wissen und beantworte die folgenden Fragen, um herauszufinden, was du gelernt hast. Schau dir die Antworten nicht an!

Nachdem sie ihr Android-Projekt mit Bubblepack generiert hat, schreibt sie die erstellte ______-Datei an ihr Versionsverwaltungssystem, damit sie sie bei Bedarf jederzeit neu erstellen kann.

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

Jack möchte, dass sein QA-Team seine PWA-Android-App testen kann und wies sein Android App Bundle in einen internen Test-Track eingereiht wird.

Uploads Builds und Uploads Releases Zeichen und Uploads

Die PWA-Android-App von Oogie Boogie ist nicht im Vollbildmodus. Um dieses Problem zu beheben, erhält der Nutzer seinen SHA-256-Zertifikatfingerabdruck für ______ und lädt ihn in die Digital Asset Links-Datei unter ______ am selben Ursprung wie seine PWA hoch.

Uploadschlüssel, /.well-known/assetlinks.json Uploadschlüssel, /assetlinks.json Signaturschlüssel, /.well-known/assetlinks.json Signaturschlüssel, /assetlinks.json

9. Teste dein Wissen – Antworten

Antworten auf die Fragen unter „Teste dein Wissen“.

  1. Nachdem sie ihr Android-Projekt mit Bubblepack generiert hat, schreibt sie die erstellte ______-Datei an ihr Versionsverwaltungssystem, damit sie sie bei Bedarf jederzeit neu erstellen kann.
  2. Jack möchte, dass sein QA-Team seine PWA-Android-App testen kann und wies sein Android App Bundle in einen internen Test-Track eingereiht wird.
  3. Die PWA-Android-App von Oogie Boogie ist nicht im Vollbildmodus. Um dieses Problem zu beheben, erhält der Nutzer seinen SHA-256-Zertifikatfingerabdruck für ______ und lädt ihn in die Digital Asset Links-Datei unter ______ am selben Ursprung wie seine PWA hoch.

10. Glückwunsch!

Glückwunsch! Du weißt jetzt, wie du deine PWA im Google Play Store hinzufügst.

Wenn Sie bereit sind, können Sie die folgenden Schritte selbst ausführen:

Viel Spaß beim Programmieren!