Die Einrichtung von vertrauenswürdigen Webaktivitäten kann etwas kompliziert sein, insbesondere wenn Sie lediglich Ihre Website anzeigen möchten. In dieser Anleitung erfahren Sie, wie Sie ein grundlegendes Projekt erstellen, das Trusted Web-Aktivitäten verwendet. Dabei werden alle Probleme abgedeckt.
Am Ende dieses Leitfadens werden Sie:
- Sie haben Bubblewrap zum Erstellen einer App verwendet, die eine vertrauenswürdige Webaktivität verwendet und die Überprüfung besteht.
- Hier erfahren Sie, wann Ihre Signaturschlüssel verwendet werden.
- Sie müssen die Signatur ermitteln können, mit der Ihre Android-App erstellt wird.
- Informieren Sie sich, wie Sie eine einfache Datei mit Digital Asset Links erstellen.
Um dieser Anleitung zu folgen, benötigen Sie Folgendes:
- Node.js 10 oder höher, die auf dem Entwicklungscomputer installiert ist
- Ein Android-Smartphone oder -Emulator, das für die Entwicklung angeschlossen und eingerichtet ist (USB-Debugging aktivieren, wenn Sie ein physisches Smartphone verwenden)
- Ein Browser, der Trusted Web Activity auf Ihrem Entwicklungstelefon unterstützt. Es funktioniert Chrome 72 oder höher. Unterstützung in anderen Browsern ist demnächst geplant.
- Eine Website, die du in der vertrauenswürdigen Webaktivität anzeigen lassen möchtest.
Mit vertrauenswürdigen Webaktivitäten kann in Ihrer Android-App ein Browser-Tab im Vollbildmodus ohne Benutzeroberfläche des Browsers gestartet werden. Diese Funktion ist auf Websites beschränkt, deren Inhaber Sie sind. Dies beweisen Sie durch die Einrichtung von Digital Asset Links. Darüber sprechen wir später.
Wenn Sie eine vertrauenswürdige Webaktivität starten, prüft der Browser, ob die Digital Asset Links ausgecheckt wird. Dies wird als Verifizierung bezeichnet. Wenn die Überprüfung fehlschlägt, wird die Website im Browser als benutzerdefinierter Tab angezeigt.
Bubblewrap installieren und konfigurieren
Bubblewrap besteht aus einer Reihe von Bibliotheken und einem Befehlszeilentool für Node.js, mit dem Entwickler mithilfe von vertrauenswürdigen Webaktivitäten progressive Web-Apps in Android-Apps generieren, erstellen und ausführen können.
Die Befehlszeile kann mit dem folgenden Befehl installiert werden:
npm i -g @bubblewrap/cli
Umgebung einrichten
Wenn Bubblewrap zum ersten Mal ausgeführt wird, wird angeboten, die erforderlichen externen Abhängigkeiten automatisch herunterzuladen und zu installieren. Wir empfehlen, dies dem Tool zuzulassen, da es garantiert, dass die Abhängigkeiten richtig konfiguriert sind. Lesen Sie in der Bubblewrap-Dokumentation nach, um eine vorhandene Installation des Java Development Kits (JDK) oder der Android-Befehlszeilentools zu verwenden.
Initialisieren und Projekt erstellen
Zum Initialisieren eines Android-Projekts, das eine PWA umschließt, führen Sie den Befehl „init“ aus:
bubblewrap init --manifest=https://my-twa.com/manifest.json
Bubblewrap liest das Web Manifest, bittet Entwickler, die Werte zu bestätigen, die im Android-Projekt verwendet werden sollen, und generiert das Projekt mit diesen Werten. Generieren Sie nach dem Generieren des Projekts ein APK, indem Sie folgenden Befehl ausführen:
bubblewrap build
Sie können jetzt
Im Build-Schritt wird eine Datei mit dem Namen app-release-signed.apk ausgegeben. Diese Datei kann zum Testen auf einem Entwicklungsgerät installiert oder zur Veröffentlichung in den Play Store hochgeladen werden.
Bubblewrap bietet einen Befehl zum Installieren und Testen der App auf einem lokalen Gerät. Führen Sie mit dem Entwicklungsgerät, das mit dem Computer verbunden ist, folgenden Befehl aus:
bubblewrap install
Alternativ können Sie das Tool adb verwenden.
adb install app-release-signed.apk
Die App sollte jetzt in der Geräteübersicht verfügbar sein. Wenn Sie die Anwendung öffnen, werden Sie feststellen, dass Ihre Website als benutzerdefinierter Tab und nicht als vertrauenswürdige Webaktivität geöffnet ist. Das liegt daran, dass wir unsere Digital Asset Links-Validierung noch nicht eingerichtet haben, aber zuerst...
Alternativen für die grafische Benutzeroberfläche (GUI) für Bubblewrap
PWA Builder bietet eine grafische Benutzeroberfläche, die die Bubblewrap-Bibliothek verwendet, um das Generieren von Trusted Web Activity-Projekten zu unterstützen. Weitere Informationen zum Erstellen einer Android-App, mit der Ihre PWA geöffnet wird, mit dem PWA-Builder finden Sie in diesem Blogpost.
Hinweis zu Signaturschlüsseln
Digital Asset Links berücksichtigen den Schlüssel, mit dem ein APK signiert wurde. Eine häufige Ursache für Fehler bei der Bestätigung ist die Verwendung der falschen Signatur. (Denken Sie daran: Wenn die Überprüfung fehlschlägt, wird Ihre Website als benutzerdefinierter Tab mit einer Browser-Benutzeroberfläche oben auf der Seite gestartet.) Beim Erstellen der App mit Bubblewrap wird ein APK mit einem Schlüsseleinrichtung im Schritt init erstellt. Wenn Sie Ihre App bei Google Play veröffentlichen, wird jedoch möglicherweise ein anderer Schlüssel für Sie erstellt, je nachdem, wie Sie mit Signaturschlüsseln umgehen. Weitere Informationen zum Signieren von Schlüsseln und dazu, wie sie mit Bubblewrap und Google Play zusammenhängen
Asset-Link-Datei einrichten
Digital Asset Links bestehen im Wesentlichen aus einer Datei auf Ihrer Website, die auf Ihre App verweist, sowie aus einigen Metadaten in Ihrer App, die auf Ihre Website verweisen.
Nachdem Sie die Datei assetlinks.json erstellt haben, laden Sie sie auf Ihre Website unter .well-known/assetlinks.json relativ zum Stammverzeichnis hoch, damit Ihre App vom Browser richtig überprüft werden kann. Weitere Informationen zum Zusammenhang mit dem Signaturschlüssel finden Sie hier.
Überprüfen des Browsers
Bei einer vertrauenswürdigen Webaktivität wird versucht, die standardmäßige Browserauswahl des Nutzers einzuhalten. Wenn der Standardbrowser des Nutzers vertrauenswürdige Webaktivitäten unterstützt, wird es gestartet. Andernfalls wird er ausgewählt, falls ein installierter Browser Trusted Web-Aktivitäten unterstützt. Schließlich wird standardmäßig auf den Modus „Benutzerdefinierte Tabs“ zurückgegriffen.
Wenn du also Fehler beheben möchtest, die mit vertrauenswürdigen Webaktivitäten zusammenhängen, solltest du darauf achten, dass du den Browser verwendest, von dem du denkst, dass du ihn nutzt. Mit dem folgenden Befehl können Sie prüfen, welcher Browser verwendet wird:
> adb logcat -v brief | grep -e TWAProviderPicker
D/TWAProviderPicker(17168): Found TWA provider, finishing search: com.google.android.apps.chrome
Nächste Schritte
Wenn Sie diese Anleitung befolgt haben, verfügen Sie über eine vertrauenswürdige Webaktivität und verfügen über ausreichend Wissen, um Fehler zu beheben, die auftreten können, wenn die Bestätigung fehlschlägt. Falls nicht, sehen Sie sich weitere Android-Konzepte für Webentwickler an oder melden Sie ein GitHub-Problem mit diesen Dokumenten.
Für Ihre nächsten Schritte empfehlen wir Ihnen, zuerst ein Symbol für Ihre App zu erstellen. Anschließend können Sie Ihre App im Play Store bereitstellen.