Kurzanleitung für vertrauenswürdige Webaktivitäten

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 werden Sie:

  • Sie haben mit Bubblewrap eine Anwendung erstellt, die eine vertrauenswürdige Web-Aktivität verwendet und die Überprüfung besteht.
  • So erkennen Sie, wann Ihre Signaturschlüssel verwendet werden.
  • Sie können die Signatur ermitteln, mit der Ihre Android-Anwendung erstellt wird.
  • Du solltest wissen, wie du eine einfache Datei mit Digital Asset Links 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 ist verbunden und für die Entwicklung eingerichtet (USB-Debugging aktivieren, wenn Sie ein physisches Smartphone verwenden)
  • Ein Browser, der vertrauenswürdige Webaktivitäten auf deinem Entwicklungstelefon unterstützt
  • Eine Website, die Sie in den vertrauenswürdigen Webaktivitäten sehen möchten

Mit einer vertrauenswürdigen Webaktivität 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 durch das Einrichten von Digital Asset Links nachweisen. Wir sprechen später noch einmal darüber.

Wenn Sie eine vertrauenswürdige Webaktivität starten, prüft der Browser, ob die Digital Asset Links korrekt sind. Dieser Vorgang wird als Verifizierung bezeichnet. Wenn die Bestätigung 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:

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, dies dem Tool zu überlassen, da so sichergestellt ist, 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 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:

Laufen

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 stellt einen Befehl zum Installieren und Testen der Anwendung auf einem lokalen Gerät bereit. Führen Sie Folgendes aus, während das Entwicklungsgerät mit dem Computer verbunden ist:

Alternativ kann auch das Tool adb verwendet werden.

Hinweis: Das **adb**-Befehlszeilentool befindet sich in **android_sdk/platform-tools/** in den Android-Befehlszeilentools.

Die App ist jetzt im Launcher des Geräts verfügbar. 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 von Digital Asset Links noch nicht eingerichtet haben. Aber zuerst…

Alternativen zur grafischen Benutzeroberfläche (GUI) für Bubblewrap

PWA Builder bietet eine Benutzeroberfläche, mit der mithilfe der Bubblewrap-Bibliothek Trusted Web Activity-Projekte generiert werden. Weitere Informationen zum Erstellen einer Android-App mit PWA Builder, 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 hoch .well-known/assetlinks.json relativ zum Stammverzeichnis), 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:

Nächste Schritte

Wenn Sie dieser Anleitung gefolgt sind, sollten Sie nun Trusted Web Activities nutzen können und genug Wissen haben, um bei einem Fehler bei der Überprüfung zu ermitteln, was das Problem verursacht. Falls nicht, sehen Sie sich weitere Android-Konzepte für Webentwickler an oder melden Sie ein GitHub-Problem in diesen Dokumenten.

Für die nächsten Schritte empfehle ich, ein Symbol für Ihre App zu erstellen. Anschließend können Sie Ihre App im Play Store bereitstellen.