PWA in einer Android-App starten
Progressive Web-Apps (PWAs) sind Webanwendungen, die app-ähnliche Funktionen nutzen, um eine hochwertige, schnelle, zuverlässige und ansprechende Nutzererfahrung zu bieten.
Das Web hat eine unglaubliche Reichweite und bietet Nutzern leistungsstarke Möglichkeiten, neue Inhalte zu entdecken. Nutzer sind es aber auch gewohnt, im Store ihres Betriebssystems nach Anwendungen zu suchen. Diese Nutzer sind in vielen Fällen bereits mit der Marke oder dem Dienst vertraut, nach dem sie suchen, und haben eine hohe Absicht, was zu überdurchschnittlichen Interaktionsmesswerten führt.
Der Google Play Store ist ein Shop für Android-Apps und Entwickler möchten ihre progressiven Web-Apps oft über ihre Android-Apps öffnen.
Vertrauenswürdige Web-Aktivität 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 begrenzt
Es war schon immer möglich, Webinhalte in eine Android-App einzubinden, indem Technologien wie Android WebView oder Frameworks wie Cordova verwendet wurden.
Die Einschränkung bei Android WebView besteht darin, dass es nicht als Browserersatz gedacht ist. Android WebView ist ein Entwicklertool, mit dem Web-UI in einer Android-App verwendet werden kann. 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 Mängel von WebView zu beheben. Die APIs sind dann 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 verwalten müssen, die von Ihrer PWA im offenen Web getrennt ist.
Außerdem funktioniert die Auffindbarkeit von Funktionen nicht immer wie erwartet und es kann zu Kompatibilitätsproblemen zwischen Android-Versionen und OEMs kommen. Wenn Entwickler eine dieser Lösungen verwenden, benötigen sie zusätzliche Qualitätssicherungsprozesse und müssen zusätzliche Entwicklungskosten aufwenden, um Problemumgehungen zu finden und zu erstellen.
Vertrauenswürdige Web-Aktivität ist ein neuer Container für Web-Apps 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 wird sichergestellt, dass die vertrauenswürdige Web-Aktivität dieselbe Kompatibilität mit den Funktionen und APIs der Webplattform hat wie der zugrunde liegende Browser. Es gibt auch Open-Source-Dienstprogramme, mit denen sich eine Android-App mit einer vertrauenswürdigen Web-Aktivität noch einfacher implementieren lässt.
Ein weiterer Vorteil, der bei anderen Lösungen nicht verfügbar ist, besteht darin, dass der Container den Speicher mit dem Browser teilt. Anmeldestatus und Nutzereinstellungen werden nahtlos zwischen den verschiedenen Oberflächen synchronisiert.
Browser-Kompatibilität
Die Funktion ist in Chrome seit Version 75 verfügbar. Firefox hat sie in seiner Nightly-Version implementiert.
Qualitätskriterien
Webentwickler sollten eine vertrauenswürdige Web-Aktivität verwenden, wenn sie Webinhalte in eine 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.
Außerdem wurde in Chrome 86 eine Änderung eingeführt, um das Verhalten an die Erwartungen der Nutzer von Android-Apps anzupassen. Wenn die folgenden Szenarien nicht verarbeitet werden, gilt dies als Absturz:
- Die Digital Asset Links konnten bei der Veröffentlichung der App nicht bestätigt werden.
- HTTP 200 wird für eine Offline-Netzwerkressourcenanfrage nicht zurückgegeben.
- Eine Navigationsanfrage, die einen HTTP-Fehler 404 oder 5xx zurückgibt.“
Wenn eines dieser Szenarien in der vertrauenswürdigen Web-Aktivität auftritt, führt dies zu einem für den Nutzer sichtbaren Absturz der Android-App. Hier finden Sie eine Anleitung, wie Sie diese Szenarien in Ihrem Service Worker handhaben können.
Die App muss außerdem zusätzliche Android-spezifische Kriterien erfüllen, z. B. die Einhaltung von Richtlinien.
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 (CLI) und einer grafischen Benutzeroberfläche (GUI).
Luftpolsterfolie
Das Bubblewrap-Projekt generiert Android-Apps in Form einer NodeJS-Bibliothek und einer Befehlszeile (CLI).
Ein neues Projekt wird gestartet, indem das Tool ausgeführt und die URL des Web-Manifests übergeben wird:
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-App 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. Diese Datei wird in den Google Play Store hochgeladen.
PWABuilder
PWABuilder hilft Entwicklern, bestehende Websites in progressive Web-Apps umzuwandeln. Außerdem ist es in Bubblewrap eingebunden, um eine GUI-Schnittstelle bereitzustellen, mit der diese PWAs in eine Android-App verpackt werden können. Das PWABuilder-Team hat einen großartigen Blogpost dazu verfasst, wie mit dem Tool eine Android-App generiert wird.
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. Um dies zu verhindern, muss die Android-App mithilfe des Tools Digital Asset Links mit der progressiven Web-App verknüpft werden.
Bubblewrap und PWABuilder kümmern sich um die erforderliche Konfiguration der Android-App. Es bleibt jedoch ein letzter Schritt: die Datei assetlinks.json zur PWA hinzuzufü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 lässt sich der Schlüssel, mit dem das an Endnutzer ausgelieferte APK signiert wurde, ermitteln, indem du das APK aus dem Google Play Store herunterlädst.
Damit Nutzer keine fehlerhafte Anwendung sehen, stellen Sie die Anwendung in einem geschlossenen Testkanal bereit, installieren Sie sie auf einem Testgerät und verwenden Sie dann das Asset Link Tool von Peter, 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 Web-Anwendung. Trusted Web Activity ist eine neue Möglichkeit, diese hochwertigen Inhalte über eine Android-App zu öffnen, wenn sie die Mindestqualitätskriterien erfüllen.
Wenn Sie mit Progressive Web Apps beginnen, lesen Sie unseren Leitfaden zum Erstellen einer guten PWA. Entwickler, die bereits eine PWA haben, können mit Lighthouse prüfen, ob sie die Qualitätskriterien erfüllt.
Verwende dann Bubblewrap oder PWABuilder, um die Android-App zu generieren, lade die App in einen geschlossenen Testkanal im Google Play Store hoch und verknüpfe sie mit der PWA über Peter's Asset Link Tool.
Verschieben Sie Ihre Anwendung schließlich vom geschlossenen Testkanal in die Produktion.