PWA in einer Android-App starten
Progressive Web-Apps (PWAs) sind Webanwendungen, die App-ähnliche Funktionen verwenden, um hochwertige Apps zu schaffen, die schnell, zuverlässig und ansprechend sind.
Das Web hat eine enorme Reichweite und bietet Nutzern hervorragende Möglichkeiten, neue Erfahrungen zu entdecken. Nutzer sind jedoch auch daran gewöhnt, in ihrem Betriebssystemspeicher nach Anwendungen zu suchen. Diese Nutzer sind in vielen Fällen bereits mit der gesuchten Marke oder der gesuchten Dienstleistung vertraut und haben eine hohe Kaufabsicht, sodass die Engagement-Messwerte über dem Durchschnitt liegen.
Der Play Store ist ein Store für Android-Apps und Entwickler möchten ihre progressiven Web-Apps oft über ihre Android-Apps öffnen.
„Vertrauenswürdige Webaktivitäten“ ist ein offener Standard, über den Browser einen vollständig mit der Webplattform kompatiblen Container bereitstellen können, der PWAs in einer Android-App rendert. Die Funktion ist in Chrome verfügbar und wird derzeit in Firefox Nightly entwickelt.
Bestehende Lösungen waren eingeschränkt
Mithilfe von Technologien wie Android WebView oder Frameworks wie Cordova war es schon immer möglich, Web-Erlebnisse in eine Android-App einzubinden.
Die Einschränkung von Android WebView besteht darin, dass es nicht als Browserersatz gedacht ist. Android WebView ist ein Entwicklertool zur Verwendung der Web-UI in einer Android-App. Es bietet keinen vollständigen Zugriff auf Funktionen der modernen Webplattform wie die Kontaktauswahl oder das Dateisystem.
Cordova wurde entwickelt, um die Mängel von WebView zu ergänzen, aber die APIs sind dann auf die Umgebung von Cordova beschränkt. Das bedeutet, dass Sie für die Verwendung von Cordova APIs für Ihre Android-App eine zusätzliche Codebasis benötigen, die von Ihrer PWA im offenen Web getrennt ist.
Außerdem funktioniert die Auffindbarkeit von Funktionen oft nicht wie erwartet und Kompatibilitätsprobleme zwischen Android-Versionen und OEMs können ebenfalls ein Problem sein. Wenn Entwickler eine dieser Lösungen verwenden, benötigen sie zusätzliche Qualitätssicherungsprozesse und es fallen zusätzliche Entwicklungskosten an, um Behelfslösungen zu erkennen und zu erstellen.
Vertrauenswürdige Web-Aktivitäten sind ein neuer Container für Web-Apps unter Android
Entwickler können jetzt eine vertrauenswürdige Webaktivität als Container verwenden, um eine PWA als Startaktivität für eine Android-App einzubinden. Die Technologie nutzt den Browser, um die PWA im Vollbildmodus zu rendern. So ist sichergestellt, dass die vertrauenswürdige Webaktivität genauso mit den Funktionen und APIs der Webplattform kompatibel ist wie der zugrunde liegende Browser. Es gibt auch Open-Source-Dienstprogramme, die die Implementierung einer Android-App mithilfe einer vertrauenswürdigen Web-Aktivität noch einfacher machen.
Ein weiterer Vorteil, der in anderen Lösungen nicht verfügbar ist, besteht darin, dass der Container Speicherplatz mit dem Browser teilt. Der Anmeldestatus und die Einstellungen der Nutzer werden nahtlos in allen Oberflächen geteilt.
Browserkompatibilität
Die Funktion ist seit Version 75 in Chrome verfügbar und wurde von Firefox in der Nachtversion implementiert.
Qualitätskriterien
Webentwickler sollten eine vertrauenswürdige Webaktivität verwenden, wenn sie Webinhalte in eine Android-App einbinden möchten.
Webinhalte in einer vertrauenswürdigen Webaktivität müssen die Kriterien für die Installierbarkeit von PWAs erfüllen.
Um dem Verhalten gerecht zu werden, das Nutzer von Android-Apps erwarten, wurde in Chrome 86 eine Änderung eingeführt. Wenn die folgenden Szenarien nicht verarbeitet werden, wird dies als Absturz betrachtet:
- Links zu digitalen Assets werden beim Start der App nicht verifiziert.
- Für eine Offline-Netzwerkressourcen-Anfrage wird kein HTTP 200-Fehler zurückgegeben.
- Eine Navigationsanfrage, die einen HTTP 404- oder 5xx-Fehler zurückgibt.
Wenn eines dieser Szenarien in der vertrauenswürdigen Webaktivität eintritt, führt es zum sichtbaren Absturz der Android-App für den Nutzer. Weitere Informationen finden Sie in der Anleitung zum Umgang mit diesen Szenarien in Ihrem Service Worker.
Außerdem muss die App zusätzliche Android-spezifische Kriterien erfüllen, z. B. die Einhaltung der Richtlinien.
Tools
Webentwickler, die Trusted Web Activity nutzen möchten, müssen keine neuen Technologien oder APIs erlernen, um ihre PWA in eine Android-App umzuwandeln. Gemeinsam bieten Bubblewrap und PWABuilder Entwicklertools in Form einer Bibliothek, einer Befehlszeile und einer grafischen Benutzeroberfläche (Graphical User Interface, GUI).
Luftpolsterfolie
Mit dem Projekt Bubblewrap werden Android-Apps in Form einer NodeJS-Bibliothek und einer Befehlszeile generiert.
Um ein neues Projekt zu booten, führen Sie das Tool aus und übergeben die URL des Web-Manifests:
npx @bubblewrap/cli init --manifest=https://pwa-directory.appspot.com/manifest.json
Das Tool kann auch das Projekt erstellen. Wenn Sie den folgenden Befehl ausführen, wird eine Android-App ausgegeben, die in den Play Store hochgeladen werden kann:
npx @bubblewrap/cli build
Nach der Ausführung dieses Befehls ist eine Datei mit dem Namen app-release-signed.apk im Stammverzeichnis des Projekts verfügbar. Diese Datei wird in den Play Store hochgeladen.
PWABuilder
Mit PWABuilder können Entwickler vorhandene Websites in progressive Web-Apps verwandeln. Es lässt sich auch in Bubblewrap einbinden, um eine grafische Benutzeroberfläche bereitzustellen, über die diese PWAs in eine Android-App eingebunden werden können. Das PWABuilder-Team hat einen tollen Blogpost zusammengestellt, in dem beschrieben wird, wie man mit dem Tool eine Android-App erstellt.
Inhaberschaft der PWA in der Android-App bestätigen
Ein Entwickler, der eine großartige progressive Web-App entwickelt, möchte nicht, dass ein anderer Entwickler ohne seine Erlaubnis eine Android-App damit erstellt. Damit dies nicht passiert, muss die Android-App über ein Tool namens Digital Asset Links mit der progressiven Web-App gekoppelt werden.
Bubblewrap und PWABuilder übernehmen die erforderliche Konfiguration in der Android-App. Ein letzter Schritt besteht jedoch darin, der PWA die Datei assetlinks.json hinzuzufügen.
Zum Generieren dieser Datei benötigen Entwickler die SHA-256-Signatur des Schlüssels, mit dem das APK signiert ist, das von den Nutzern heruntergeladen wird.
Der Schlüssel kann auf verschiedene Arten generiert werden. Am einfachsten können Sie herausfinden, welcher Schlüssel das an Endnutzer bereitgestellte APK signiert hat, indem Sie es aus dem Play Store selbst herunterladen.
Damit Nutzern keine fehlerhafte Anwendung angezeigt wird, stellen Sie die Anwendung in einem geschlossenen Testkanal bereit, installieren Sie sie auf einem Testgerät und generieren Sie dann mithilfe von Peters Asset-Link-Tool die richtige assetlinks.json-Datei für die App. Stellen Sie die generierte assetlinks.json-Datei unter /.well-known/assetlinks.json in der zu validierenden Domain zur Verfügung.
Weitere Informationen
Eine progressive Web-App ist ein hochwertiges Weberlebnis. "Vertrauenswürdige Webaktivitäten" ist eine neue Möglichkeit, Android-Apps mit hoher Qualität zu nutzen, wenn sie die Mindestqualitätskriterien erfüllen.
Wenn du gerade erst mit progressiven Web-Apps angefangen hast, findest du in unserer Anleitung zum Erstellen einer guten PWA weitere Informationen. Entwickler, die bereits eine PWA haben, können Lighthouse verwenden, um zu prüfen, ob sie die Qualitätskriterien erfüllt.
Generieren Sie die Android-App dann mit Bubblewrap oder PWABuilder, laden Sie sie in einen geschlossenen Testkanal im Play Store hoch und koppeln Sie sie über Peters Asset-Link-Tool mit der PWA.
Übertragen Sie nun Ihre Anwendung vom geschlossenen Testkanal in die Produktion.