Vertraust du mir?
Seit einiger Zeit lassen sich Webanwendungen je nach Komplexität der App mit geringem Aufwand in eine native App überführen. Frameworks wie Capacitor.js oder Cordova bieten beispielsweise solche Funktionen und sind ebenfalls Open-Source-Software. Um eine Web-App als native anzubieten, müssen Sie die Web-Anwendung lokal erstellen, dem Framework mitteilen, wo sich diese Build-Ausgabe befindet, und grundsätzlich warten, bis die Apps erstellt wurden. Das Kernkonzept besteht darin, dass Ihre Website nur in einer eingebetteten Webansicht ausgeführt wird. Nun, mit der Einführung von „Trusted Web Activity“ von Google soll sich jetzt wieder etwas ändern.
PWA++
Was ist „Trusted Web Activity“ (TWA)? Hier ist das Wesentliche:
- Eine „Trusted Web Activity“ wird im Kontext von Google Play Store und einer nativen Android-App verwendet, die aus einer PWA generiert wird
- Sie können die Inhaberschaft Ihrer PWA für die Android-App überprüfen, indem Sie einen Berechtigungsnachweis namens „assetlinks“ erstellen – hier wird Google Play benötigt
- Durch das Hochladen dieser „Assetlinks“-Datei in das öffentliche Verzeichnis Ihrer Web-App kann Google den Besitz der PWA überprüfen, wenn die native Android-App ankommt, sodass niemand außer Ihnen sie erstellen kann
Okay, das war ein kurzer Überblick über das Konzept hinter TWA. Um es noch einmal zusammenzufassen, der Teil „Vertrauen“ bezieht sich auf die Überprüfung des Eigentums an Ihrer PWA.
Eine neue TWA bitte!
Okay, aber wie funktioniert das eigentlich? Die Einrichtung ist eigentlich ganz einfach und sollte nicht länger als eine Stunde dauern. So wird's gemacht:
Stellen Sie zunächst sicher, dass Ihre PWA richtig eingerichtet ist:
- manifest.json ist verfügbar und validiert
- Symbol + Name sind korrekt
- Sie können diese Änderungen schnell in DevTools überprüfen
Die Hauptbibliothek, die die ganze schwere Arbeit übernimmt, heißt „bubblewrap“, ein Node.js-Paket, das eine CLI bereitstellt, die während des gesamten Tutorials verwendet wird.
Erstellen Sie zunächst ein neues Verzeichnis für die TWA namens „twa“. Innerhalb von „twa“ erstellen wir ein weiteres Verzeichnis namens „android“. „twa“ selbst enthält die node_modules und „android“ die eigentliche native Android-App.
Stellen Sie sicher, dass Sie sich jetzt in "twa" befinden, um ein neues npm-Projekt zu initiieren:
npm init -y
Fügen wir nun die CLI als Dev-Abhängigkeit hinzu:
npm i -D @bubblewrap/cli
Das ist alles, was wir jetzt brauchen. Lassen Sie uns dann das „Bubblewrap“-Projekt initiieren. Ersetzen Sie einfach die Domain durch Ihre und prüfen Sie, wo sich die „manifest.json“ befindet. Sie werden nach den Speicherorten für Java SDK + Android SDK gefragt, die Sie wiederverwenden können, wenn sie bereits installiert sind:
npx bubblewrap init --manifest=https://your-pwa.com/manifest.json
Im weiteren Verlauf ist es an der Zeit, einige Fragen und Antworten mit der „Bubblewrap“-CLI durchzugehen. Abhängig von den verfügbaren Metadaten in Ihrer PWA sind die meisten Felder bereits vorausgefüllt:
npx bubblewrap build
Nachdem Ihre PWA identifiziert und die Android-App erstellt wurde, ist es Zeit für einen schnellen Rauchtest. Starten Sie entweder einen Emulator oder verwenden Sie das Testgerät Ihrer Wahl:
npx bubblewrap install
Wenn alles gut funktioniert, sehen Sie Ihre Web-App als funktionierende native Android-App. Super, das Schwierigste ist schon geschafft!
Was bleibt, ist die Erstellung der Verifizierungsdatei namens „assetlinks.json“. Da ich davon ausgegangen bin, dass Sie das App Bundle bei Google Play hochladen möchten, ist es wichtig zu beachten, wie das Signieren tatsächlich verwaltet wird:
- Google Play verwaltet die Signaturschlüssel für Sie, was bedeutet, dass wir den entsprechenden SHA-256-Wert in der Google Play Console nachschlagen müssen
- „bubblewrap“ hat möglicherweise bereits mit einem Eintrag eine „assetlinks“-Datei erstellt, die einen anderen SHA-256-Hash enthält - keine Sorge, wir verwenden beide Schlüssel von Google Play und den generierten
Wenn keine „assetlinks“-Datei erstellt wurde, habe ich das „Asset Links Tool“ (von Google empfohlen, Link im Anhang) auf mein Testgerät heruntergeladen und den SHA-256 aus der installierten signierten Test-App erstellt und per "Bubblewrap" installiert. Dieses Json kann dann von Ihnen verwendet werden. Stellen Sie einfach sicher, dass Sie den ersten Eintrag duplizieren und den SHA-256 durch den von Google Play ersetzen, was zu einer „Assetlinks“-Datei mit 2 Einträgen führt, die sich nur in ihren Signaturschlüsseln unterscheiden.
Fast fertig, Sie müssen jetzt nur noch ein neues Verzeichnis im öffentlichen Ordner Ihrer bestehenden PWA erstellen und die App einmal hochladen:
.well-known/assetlinks.json
Jetzt kann Google es lesen und die Inhaberschaft bestätigen.
Noch ein Schritt...
Jetzt müssen Sie nur noch das Release-Bundle bei Google Play hochladen und veröffentlichen! Ja, es ist eigentlich so einfach. Google pusht wirklich, was im Web möglich ist und scheut sich nicht, neue Dinge auszuprobieren. „Trusted Web Activity“ ist eine neue Möglichkeit, die Lücke zwischen Web und Native noch weiter zu schließen, obwohl sie derzeit auf Android beschränkt ist.
Oh, und ja: Natürlich ist diese Web-App eine PWA und eine TWA. Sie können die Android-App in Google Play ausprobieren, der Link befindet sich unten im Anhang.
- Tom
