PWA in einer Android-App starten
Progressive Web Apps (PWAs) sind Webanwendungen, die mithilfe von appähnlichen Funktionen schnell, zuverlässig und ansprechend arbeiten und eine hohe Qualität bieten.
Das Internet hat eine unglaubliche Reichweite und bietet Nutzern vielfältige Möglichkeiten, neue Dinge zu entdecken. Nutzer sind jedoch auch daran gewöhnt, im Store ihres Betriebssystems nach Anwendungen zu suchen. Diese Nutzer sind in vielen Fällen bereits mit der Marke oder dem Dienst vertraut, den sie suchen, und haben eine hohe Absichtsbezogenheit, was zu überdurchschnittlichen Interaktionsmesswerten führt.
Der Play Store ist ein Shop für Android-Apps. Entwickler möchten ihre progressiven Web-Apps oft über ihre Android-Apps öffnen.
Trusted Web Activity ist ein offener Standard, mit dem 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 in Firefox Nightly entwickelt.
Bestehende Lösungen waren eingeschränkt
Es war schon immer möglich, Weberfahrungen mithilfe von Technologien wie Android WebView oder Frameworks wie Cordova in eine Android-App einzubinden.
Android WebView ist nicht als Browserersatz gedacht. Android WebView ist ein Entwicklertool für die Verwendung der Web-UI in einer Android-App. Es bietet keinen vollständigen Zugriff auf moderne Webplattformfunktionen wie die Auswahl der Kontakte oder das Dateisystem, unter anderem.
Cordova wurde entwickelt, um die Mängel von WebView zu beheben. Die APIs sind dann jedoch auf die Cordova-Umgebung beschränkt. Das bedeutet, dass Sie eine zusätzliche Codebasis für die Verwendung von Cordova APIs für Ihre Android-App verwalten 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ätssicherungsprozesse und zusätzliche Entwicklungskosten, um Probleme zu erkennen und Lösungen zu finden.
Trusted Web Activity ist ein neuer Container für Webanwendungen auf Android-Geräten
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. Die Technologie nutzt den Browser, um die PWA im Vollbildmodus zu rendern. So ist die vertrauenswürdige Web-Aktivität mit den Funktionen und APIs der Webplattform genauso kompatibel wie der zugrunde liegende Browser. Es gibt auch Open-Source-Dienstprogramme, die die Implementierung einer Android-App mit einer vertrauenswürdigen Web-Aktivität noch einfacher machen.
Ein weiterer Vorteil, der bei 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 Umgebungen geteilt.
Browserkompatibilität
Die Funktion ist in Chrome seit Version 75 verfügbar und wird in Firefox in der Nightly-Version implementiert.
Qualitätskriterien
Webentwickler sollten vertrauenswürdige Webaktivitäten verwenden, wenn sie Webinhalte in einer Android-App einbinden möchten.
Webinhalte in einer vertrauenswürdigen Web-Aktivität müssen die Kriterien für die Installation von PWAs erfüllen.
Um dem Verhalten zu entsprechen, das Nutzer von Android-Apps erwarten, wurde in Chrome 86 eine Änderung eingeführt, bei der die Nichtbewältigung der folgenden Szenarien als Absturz gewertet wird:
- Digitale Asset-Links werden bei der Einführung der App nicht verifiziert.
- Bei einer Offline-Netzwerkressourcenanfrage wird HTTP 200 nicht 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 dies zum sichtbaren Absturz der Android-App für den Nutzer. Weitere Informationen zum Umgang mit diesen Szenarien in Ihrem Service Worker finden Sie in der Anleitung.
Die App muss außerdem zusätzliche Android-spezifische Kriterien erfüllen, z. B. die Richtliniencompliance.
Tools
Webentwickler, die vertrauenswürdige Web-Aktivitäten nutzen möchten, müssen keine neuen Technologien oder APIs erlernen, um ihre PWA in eine Android-App umzuwandeln. Zusammen bieten Bubblewrap und PWABuilder Entwicklertools in Form einer Bibliothek, einer Befehlszeile (Command Line Interface, CLI) und einer grafischen Benutzeroberfläche (Graphical User Interface, GUI).
Luftpolsterfolie
Das Projekt Bubblewrap generiert Android-Apps in Form einer NodeJS-Bibliothek und einer Befehlszeile.
Zum Bootstrapping eines neuen Projekts wird das Tool ausgeführt und die URL des Web-Manifests übergeben:
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 dem Ausführen dieses Befehls ist im Stammverzeichnis des Projekts eine Datei namens app-release-signed.apk verfügbar. Diese Datei wird in den Play Store hochgeladen.
PWABuilder
Mit PWABuilder können Entwickler bestehende Websites in progressive Web-Apps umwandeln. Außerdem ist es mit Bubblewrap kompatibel, um eine GUI-Oberfläche bereitzustellen, mit der diese PWAs in eine Android-App verpackt werden können. Das PWABuilder-Team hat einen tollen Blogpost zum Generieren einer Android-Anwendung mit dem Tool zusammengestellt.
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-Anwendung mit der progressiven Webanwendung über ein Tool namens Digital Asset Links gekoppelt werden.
Bubblewrap und PWABuilder übernehmen die erforderliche Konfiguration der Android-Anwendung. Es bleibt jedoch noch ein letzter Schritt: der PWA die Datei assetlinks.json hinzufügen.
Zum Generieren dieser Datei 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 die APK signiert wurde, die an Endnutzer gesendet wird, indem Sie sie direkt aus dem Play Store 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 mit dem Asset Link Tool von Peter die richtige assetlinks.json-Datei für die App. Stellen Sie die generierte assetlinks.json-Datei in der zu validierenden Domain unter /.well-known/assetlinks.json bereit.
Weitere Informationen
Eine progressive Web-App bietet eine hochwertige Webnutzung. Mit vertrauenswürdigen Web-Aktivitäten können Sie diese hochwertigen Inhalte jetzt auch über eine Android-App öffnen, wenn sie die Mindestqualitätskriterien erfüllen.
Wenn Sie sich noch nicht mit progressiven Web-Apps vertraut machen möchten, lesen Sie unsere Anleitung zum Erstellen einer guten PWA. Entwickler, die bereits eine PWA haben, können mit Lighthouse prüfen, ob sie die Qualitätskriterien erfüllt.
Erstellen Sie dann mit Bubblewrap oder PWABuilder die Android-Anwendung, laden Sie die Anwendung in einen geschlossenen Testkanal im Play Store hoch und verknüpfen Sie sie mit der PWA mithilfe des Asset Link Tools von Peter.
Verschieben Sie Ihre Anwendung schließlich vom Geschlossener-Testkanal in die Produktion.