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.
- Informationen dazu, wann Ihre Signaturschlüssel verwendet werden
- Sie müssen feststellen können, mit welcher Signatur Ihre Android-App erstellt wird.
- Wir zeigen dir, wie du eine einfache Digital Asset Links-Datei erstellst.
Um dieser Anleitung folgen zu können, 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 starten. 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 funktioniert. Dieser Vorgang wird als Verifizierung 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, wird angeboten, die erforderlichen externen Abhängigkeiten automatisch herunterzuladen und zu installieren. Wir empfehlen, dies mit dem Tool erledigen zu lassen, da es garantiert, dass die Abhängigkeiten korrekt 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, generieren Sie mit dem folgenden Befehl ein APK:
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 App sollte jetzt im Geräte-Launcher verfügbar sein. Wenn Sie die Anwendung öffnen, werden Sie feststellen, dass Ihre Website als benutzerdefinierter Tab und nicht als vertrauenswürdige Webaktivität gestartet wird. Das liegt daran, dass wir die Validierung von Digital Asset Links noch nicht eingerichtet haben, aber zuerst...
GUI-Alternativen 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 App erstellt, wird im Schritt init ein APK erstellt, bei dem ein Schlüssel eingerichtet wird. 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 ihrem Zusammenhang mit 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 zur Beziehung zwischen deinem Signaturschlüssel und Digital Asset Links 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. Standardmäßig wird 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 Überprüfung 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.