PWA in einer Android-App starten
Progressive Web-Apps (PWAs) sind Webanwendungen, die App-ähnliche Funktionen nutzen, um eine qualitativ hochwertige, schnelle, zuverlässige und ansprechende Nutzererfahrung zu bieten.
Das Web 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.
Vorhandene Lösungen waren begrenzt
Es war schon immer möglich, Webinhalte in eine Android-App einzubinden, z. B. mithilfe von Technologien wie Android WebView oder Frameworks wie Cordova.
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. Dabei wird der Browser genutzt, 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, ist, dass der Container den Speicherplatz mit dem Browser teilt. Anmeldestatus und Nutzereinstellungen werden nahtlos über alle Plattformen hinweg geteilt.
Browserkompatibilität
Die Funktion ist in Chrome seit Version 75 verfügbar und wurde in Firefox in der Nightly-Version implementiert.
Qualitätskriterien
Webentwickler sollten vertrauenswürdige Web-Aktivitäten 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 Installierbarkeit von PWAs erfüllen.
Außerdem wurde in Chrome 86 eine Änderung eingeführt, damit das Verhalten von Android-Apps den Erwartungen der Nutzer entspricht. Wenn die folgenden Szenarien nicht verarbeitet werden, wird dies als Absturz betrachtet:
- Die Digital Asset Links konnten beim Start der Anwendung nicht bestätigt werden.
- HTTP 200 wird nicht für eine Anfrage nach einer Offline-Netzwerkressource zurückgegeben.
- Eine Navigationsanfrage, die einen HTTP-404- oder 5xx-Fehler zurückgibt.“
Wenn eines dieser Szenarien in der Funktion „Vertrauenswürdige Webaktivitäten“ auftritt, führt dies zu einem für den Nutzer sichtbaren Absturz der Android-Anwendung. Weitere Informationen zum Umgang mit diesen Szenarien in Ihrem Service Worker finden Sie in der Anleitung.
Die Anwendung muss außerdem zusätzliche Android-spezifische Kriterien erfüllen, z. B. die Richtlinienkonformität.
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 Bubblewrap-Projekt generiert Android-Apps in Form einer NodeJS-Bibliothek und einer Befehlszeilenschnittstelle (Command Line Interface, CLI).
Um ein neues Projekt zu erstellen, führen Sie das Tool aus und geben Sie die URL des Webmanifests an:
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-Anwendung 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 vorhandene 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 gerade erst mit Progressiven Web-Apps beginnen, lesen Sie unseren Leitfaden zum Erstellen einer erfolgreichen 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 abschließend aus dem geschlossenen Test-Channel in die Produktion.