PWA in einer Android-App starten
Progressive Web-Apps (PWAs) sind Webanwendungen, die app-ähnliche Funktionen nutzen, um qualitativ hochwertige, schnelle, zuverlässige und ansprechende Nutzererlebnisse zu schaffen.
Das Web hat eine enorme Reichweite und bietet Nutzern viele Möglichkeiten, neue Inhalte zu entdecken. Nutzer sind es aber auch gewohnt, in ihrem Betriebssystem-Store nach Anwendungen zu suchen. Diese Nutzer kennen in vielen Fällen bereits die Marke oder den Dienst, nach dem sie suchen, und haben eine hohe Intention, was zu überdurchschnittlichen Engagement-Messwerten führt.
Der Google Play Store ist ein Shop für Android-Apps. Entwickler möchten ihre progressiven Web-Apps oft über ihre Android-Apps öffnen.
Vertrauenswürdige Web-Aktivitäten sind ein offener Standard, der es Browsern ermöglicht, einen vollständig mit der Webplattform kompatiblen Container bereitzustellen, in dem PWAs in einer Android-App gerendert werden. Die Funktion ist in Chrome verfügbar und wird in Firefox Nightly entwickelt.
Bestehende Lösungen waren eingeschränkt
Es war schon immer möglich, Weboberflächen in eine Android-App einzubinden, indem Technologien wie Android WebView oder Frameworks wie Cordova verwendet wurden.
Android WebView ist nicht als Browserersatz gedacht. Android WebView ist ein Entwicklertool zur Verwendung von Web-UI in einer Android-App. Es bietet keinen vollständigen Zugriff auf moderne Webplattformfunktionen wie die Kontaktauswahl oder das Dateisystem, um nur einige zu nennen.
Cordova wurde entwickelt, um die Schwächen von WebView auszugleichen. Die APIs sind jedoch auf die Cordova-Umgebung beschränkt. Das bedeutet, dass Sie für die Verwendung von Cordova-APIs für Ihre Android-App eine zusätzliche Codebasis pflegen müssen, 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 darstellen. Bei der Verwendung einer dieser Lösungen benötigen Entwickler zusätzliche Qualitätssicherungsverfahren und es entstehen zusätzliche Entwicklungskosten für die Erkennung und Erstellung von Workarounds.
Vertrauenswürdige Web-Aktivitäten sind ein neuer Container für Web-Apps unter Android
Entwickler können jetzt eine vertrauenswürdige Web-Aktivität als Container verwenden, um eine PWA als Startaktivität für eine Android-App einzubinden. Bei dieser Technologie wird der Browser verwendet, um die PWA im Vollbildmodus zu rendern. So wird sichergestellt, dass die vertrauenswürdige Web-Aktivität dieselbe Kompatibilität mit den Webplattformfunktionen und APIs hat wie der zugrunde liegende Browser. Es gibt auch Open-Source-Tools, die die Implementierung einer Android-App mit 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. Anmeldestatus und Nutzereinstellungen werden nahtlos zwischen den verschiedenen Anwendungen geteilt.
Browserkompatibilität
Die Funktion ist seit Version 75 in Chrome verfügbar. Firefox hat sie in der Nightly-Version implementiert.
Qualitätskriterien
Webentwickler sollten eine vertrauenswürdige Web-Aktivität verwenden, wenn sie Webinhalte in eine Android-App einfügen möchten.
Webinhalte in einer vertrauenswürdigen Web-Aktivität müssen die Kriterien für die Installierbarkeit von PWAs erfüllen.
Außerdem wurde in Chrome 86 eine Änderung eingeführt, um das Verhalten von Android-Anwendungen zu berücksichtigen. Wenn die folgenden Szenarien nicht behandelt werden, gilt dies als Absturz:
- Digital Asset Links werden beim Start der Anwendung nicht überprüft.
- Für eine Anfrage für eine Offlinenetzwerkressource wird kein HTTP 200 zurückgegeben.
- Eine Navigationsanfrage, die einen HTTP‑Fehler vom Typ 404 oder 5xx zurückgibt.“
Wenn eines dieser Szenarien in der vertrauenswürdigen Web-Aktivität eintritt, stürzt die Android-App ab und der Nutzer sieht eine Fehlermeldung. Hier finden Sie Informationen zum Umgang mit diesen Szenarien in Ihrem Service Worker.
Die Anwendung muss außerdem zusätzliche Android-spezifische Kriterien wie die Einhaltung der Richtlinien erfüllen.
Tools
Webentwickler, die die vertrauenswürdige Web-Aktivität nutzen möchten, müssen keine neuen Technologien oder APIs lernen, um ihre PWA in eine Android-Anwendung umzuwandeln. Bubblewrap und PWABuilder bieten zusammen Entwicklertools in Form einer Bibliothek, einer Befehlszeile (Command Line Interface, CLI) und einer grafischen Benutzeroberfläche (Graphical User Interface, GUI).
Luftpolsterfolie
Mit dem Bubblewrap-Projekt werden Android-Apps in Form einer NodeJS-Bibliothek und einer Befehlszeilenschnittstelle (Command Line Interface, CLI) generiert.
Ein neues Projekt wird durch Ausführen des Tools und Übergeben der URL des Webmanifests gestartet:
npx @bubblewrap/cli init --manifest=https://pwa-directory.appspot.com/manifest.json
Das Tool kann das Projekt auch erstellen. Wenn Sie den folgenden Befehl ausführen, wird eine Android-Anwendung ausgegeben, die in den Google Play Store hochgeladen werden kann:
npx @bubblewrap/cli build
Nach dem Ausführen dieses Befehls ist im Stammverzeichnis des Projekts eine Datei mit dem Namen app-release-signed.apk verfügbar. Dies ist die Datei, die in den Google Play Store hochgeladen wird.
PWABuilder
Mit PWABuilder können Entwickler vorhandene Websites in progressive Web-Apps umwandeln. Außerdem ist es in Bubblewrap integriert und bietet eine GUI, um PWAs in Android-Apps zu verpacken. Das PWABuilder-Team hat einen Blogpost dazu veröffentlicht, wie Sie mit dem Tool eine Android-App generieren.
Inhaberschaft der PWA in der Android-App bestätigen
Ein Entwickler, der eine großartige progressive Web-App erstellt, möchte nicht, dass ein anderer Entwickler ohne seine Erlaubnis eine Android-App damit erstellt. Damit dies nicht passiert, muss die Android-Anwendung mithilfe eines Tools namens Digital Asset Links mit der progressiven Web-App verknüpft werden.
Bubblewrap und PWABuilder übernehmen die erforderliche Konfiguration der Android-Anwendung. Es bleibt jedoch ein letzter Schritt: das Hinzufügen der Datei assetlinks.json zur PWA.
Um diese Datei zu generieren, benötigen Entwickler die SHA-256-Signatur des Schlüssels, mit dem das APK signiert wurde, das von den Nutzern heruntergeladen wird.
Der Schlüssel kann auf verschiedene Arten generiert werden. Am einfachsten finden Sie heraus, mit welchem Schlüssel das APK signiert wurde, das Endnutzern bereitgestellt wird, indem Sie es aus dem Google Play Store herunterladen.
Damit Nutzern keine fehlerhafte Anwendung angezeigt wird, stellen Sie die Anwendung in einem geschlossenen Testchannel bereit, installieren Sie sie auf einem Testgerät und verwenden Sie dann Peters Asset Link Tool, um die richtige assetlinks.json-Datei für die App zu generieren. 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 eine hochwertige Weboberfläche. Die vertrauenswürdige Web-Aktivität ist eine neue Möglichkeit, diese hochwertigen Inhalte aus einer Android-App heraus zu öffnen, wenn sie die Mindestqualitätskriterien erfüllen.
Wenn Sie gerade erst mit Progressive Web-Apps beginnen, lesen Sie unsere Anleitung zum Erstellen einer PWA. Entwickler, die bereits eine PWA haben, können mit Lighthouse prüfen, ob sie die Qualitätskriterien erfüllt.
Verwenden Sie dann Bubblewrap oder PWABuilder, um die Android-Anwendung zu generieren, laden Sie die Anwendung in einen geschlossenen Testkanal im Play Store hoch und verknüpfen Sie sie mit der PWA über Peters Asset Link Tool.
Verschieben Sie Ihre Anwendung schließlich vom Channel für geschlossene Tests in die Produktion.