Die Einrichtung vertrauenswürdiger Webaktivitäten kann etwas schwierig sein, insbesondere wenn Sie nur Ihre Website präsentieren möchten. In diesem Leitfaden erfahren Sie, wie Sie ein einfaches Projekt mit vertrauenswürdigen Webaktivitäten erstellen. Dabei werden alle Fallstricke berücksichtigt.
Am Ende dieses Leitfadens können Sie:
- Sie haben mit Bubblewrap eine Anwendung erstellt, die vertrauenswürdige Webaktivitäten verwendet und die Überprüfung besteht.
- Wann werden Ihre Signaturschlüssel verwendet?
- Sie können die Signatur ermitteln, mit der Ihre Android-Anwendung erstellt wird.
- Du solltest wissen, wie du eine einfache Digital Asset Links-Datei erstellst.
Für diese Anleitung benötigen Sie Folgendes:
- Node.js 10 oder höher auf dem Entwicklungscomputer installiert.
- Ein Android-Smartphone oder ‑Emulator, das bzw. der für die Entwicklung verbunden und eingerichtet ist (USB-Debugging aktivieren, wenn Sie ein physisches Smartphone verwenden).
- Einen Browser, der vertrauenswürdige Web-Aktivitäten auf Ihrem Entwicklungs-Smartphone unterstützt. Chrome 72 oder höher funktioniert. Unterstützung in anderen Browsern ist in Vorbereitung.
- Eine Website, die Sie in den vertrauenswürdigen Webaktivitäten sehen möchten.
Mit einer Trusted Web Activity kann Ihre Android-App einen Browsertab im Vollbildmodus ohne Browser-Benutzeroberfläche öffnen. Diese Funktion ist auf Websites beschränkt, deren Inhaber Sie sind. Sie können dies nachweisen, indem Sie Digital Asset Links einrichten. Wir sprechen später noch einmal darüber.
Wenn Sie eine vertrauenswürdige Webaktivität starten, prüft der Browser, ob der Digital Asset Links-Checkout korrekt ist. Dies wird als Bestätigung bezeichnet. Wenn die Überprüfung fehlschlägt, wird Ihre Website im Browser als benutzerdefinierter Tab angezeigt.
Bubblewrap installieren und konfigurieren
Bubblewrap ist eine Reihe von Bibliotheken und ein Befehlszeilentool (CLI) für Node.js, mit dem Entwickler Progressive Web-Apps mithilfe von Trusted Web Activity in Android-Anwendungen generieren, erstellen und ausführen können.
Die Befehlszeile kann mit dem folgenden Befehl installiert werden:
npm i -g @bubblewrap/cli
Umgebung einrichten
Wenn Sie Bubblewrap zum ersten Mal ausführen, werden Sie aufgefordert, die erforderlichen externen Abhängigkeiten automatisch herunterzuladen und zu installieren. Wir empfehlen, dem Tool zu erlauben, dies zu tun, da so sichergestellt ist, dass die Abhängigkeiten richtig konfiguriert sind. Lesen Sie die Bubblewrap-Dokumentation, um eine vorhandene Installation des Java Development Kits (JDK) oder der Android-Befehlszeilentools zu verwenden.
Projekt initialisieren und erstellen
Um ein Android-Projekt zu initialisieren, 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 die Entwickler, die im Android-Projekt zu verwendenden Werte zu bestätigen, und generiert das Projekt mit diesen Werten. Nachdem das Projekt generiert wurde, können Sie ein APK generieren. Führen Sie dazu Folgendes aus:
bubblewrap build
Ausführen
Der Build-Schritt gibt eine Datei mit dem Namen app-release-signed.apk aus. 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 Anwendung auf einem lokalen Gerät. Führen Sie mit dem Entwicklungsgerät, das mit dem Computer verbunden ist, Folgendes aus:
bubblewrap install
Alternativ kann auch das Tool adb verwendet werden.
adb install app-release-signed.apk
Die Anwendung sollte jetzt im Launcher des Geräts verfügbar sein. Wenn Sie die Anwendung öffnen, wird Ihre Website als benutzerdefinierter Tab und nicht als vertrauenswürdige Webaktivität geöffnet. Das liegt daran, dass wir die Validierung für digitale Asset-Links noch nicht eingerichtet haben. Aber zuerst…
Alternativen zur grafischen Benutzeroberfläche (GUI) für Bubblewrap
PWA Builder bietet eine Benutzeroberfläche, die die Bubblewrap-Bibliothek zur Generierung von Trusted Web Activity-Projekten nutzt. Eine ausführliche Anleitung dazu, wie Sie mit PWA Builder eine Android-App erstellen, die Ihre PWA öffnet, finden Sie in diesem Blogpost.
Hinweis zu Signaturschlüsseln
Bei Digital Asset Links wird der Schlüssel berücksichtigt, mit dem ein APK signiert wurde. Eine häufige Ursache für fehlgeschlagene Überprüfungen ist die Verwendung der falschen Signatur. Wenn die Bestätigung fehlschlägt, wird Ihre Website als benutzerdefinierter Tab mit der Browser-Benutzeroberfläche oben auf der Seite geöffnet. Wenn Bubblewrap die Anwendung erstellt, wird während des Schritts init ein APK mit einer Schlüsseleinrichtung erstellt. Wenn Sie Ihre App jedoch bei Google Play veröffentlichen, wird möglicherweise ein weiterer Schlüssel für Sie erstellt, je nachdem, wie Sie mit Signaturschlüsseln umgehen. Weitere Informationen zu Signaturschlüsseln und ihrer Beziehung zu Bubblewrap und Google Play
Asset-Linkdatei einrichten
Digital Asset Links bestehen im Wesentlichen aus einer Datei auf Ihrer Website, die auf Ihre App verweist, und einigen Metadaten in Ihrer App, die auf Ihre Website verweisen.
Nachdem Sie die assetlinks.json-Datei 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 dazu, wie sich das auf deinen Signaturschlüssel auswirkt, findest du in unserem Detaillierten Artikel zu Digital Asset Links.
Browser prüfen
Bei einer vertrauenswürdigen Web-Aktivität wird versucht, den Standardbrowser des Nutzers zu verwenden. Wenn der Standardbrowser des Nutzers vertrauenswürdige Webaktivitäten unterstützt, wird er gestartet. Andernfalls wird ein installierter Browser ausgewählt, der vertrauenswürdige Webaktivitäten unterstützt. Schließlich wird standardmäßig auf den Modus „Benutzerdefinierte Tabs“ zurückgegriffen.
Wenn Sie also Probleme mit vertrauenswürdigen Webaktivitäten beheben, sollten Sie darauf achten, dass Sie den Browser verwenden, den Sie verwenden möchten. 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 dieser Anleitung gefolgt sind, sollten Sie nun vertrauenswürdige Webaktivitäten nutzen können und genug Wissen haben, um bei einem Fehler bei der Bestätigung zu ermitteln, was los ist. Falls nicht, sehen Sie sich weitere Android-Konzepte für Webentwickler an oder erstellen Sie ein GitHub-Problem zu diesen Dokumenten.
Als Nächstes sollten Sie ein Symbol für Ihre App erstellen. Anschließend können Sie Ihre App im Play Store veröffentlichen.