Die Einrichtung von Trusted Web Activities kann eine Herausforderung sein, insbesondere wenn Sie nur Ihre Website anzeigen möchten. In diesem Leitfaden erfahren Sie, wie Sie ein kleines Projekt erstellen, in dem Trusted Web Activities verwendet werden.
Nachdem Sie diesen Leitfaden durchgearbeitet haben, können Sie Folgendes:
- Sie haben Bubblewrap verwendet, um eine Anwendung zu erstellen, die eine vertrauenswürdige Web-Aktivität verwendet und die Bestätigung besteht.
- Sie wissen, wann Ihre Signaturschlüssel verwendet werden.
- Sie können die Signatur bestimmen, mit der Ihre Android-Anwendung erstellt wird.
- Sie wissen, wie Sie eine einfache Digital Asset Links-Datei erstellen.
Für diesen Leitfaden benötigen Sie Folgendes:
- Node.js 10 oder höher
- Ein Android-Smartphone oder einen Android-Emulator, der verbunden und für die Entwicklung eingerichtet ist Aktivieren Sie das USB-Debugging wenn Sie ein physisches Smartphone verwenden.
- Einen mobilen Browser, der vertrauenswürdige Web-Aktivitäten unterstützt
- Eine Website, die Sie in der vertrauenswürdigen Web-Aktivität anzeigen möchten.
Sie können eine vertrauenswürdige Web-Aktivität für Ihre Android-App verwenden, um einen Vollbild-Browsertab ohne Browser-UI zu starten. Diese Funktion ist auf Websites beschränkt, deren Inhaber Sie sind. Sie weisen das Eigentum nach, indem Sie Digital Asset Links einrichten.
Wenn Sie eine vertrauenswürdige Web-Aktivität starten, überprüft der Browser die Digital Asset Links. Wenn die Bestätigung fehlschlägt, zeigt der Browser Ihre Website als benutzerdefinierten Tab an.
Bubblewrap installieren und konfigurieren
Bubblewrap ist eine Reihe von Bibliotheken und ein Befehlszeilentool (CLI) für Node.js, mit dem Entwickler Progressive Web Apps in Android-Anwendungen erstellen, entwickeln und ausführen können. Dabei wird die vertrauenswürdige Web-Aktivität verwendet.
Installieren Sie die CLI mit diesem Befehl:
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, automatische Downloads zuzulassen, da so sichergestellt wird, dass die Abhängigkeiten richtig konfiguriert sind. In der Bubblewrap-Dokumentation erfahren Sie, wie Sie ein vorhandenes Java Development Kit (JDK) oder eine vorhandene Installation der Android-Befehlszeilentools verwenden.
Projekt initialisieren und erstellen
Initialisieren Sie ein Android-Projekt, das eine PWA umschließt:
bubblewrap init --manifest=https://my-twa.com/manifest.json
Bubblewrap liest das Web-Manifest, fordert Entwickler auf, die in Android-Projekten zu verwendenden Werte zu bestätigen, und generiert das Projekt mit diesen Werten.
Nachdem das Projekt generiert wurde, generieren Sie ein APK mit folgendem Befehl:
bubblewrap build
Ausführen
Im Build-Schritt wird eine Datei mit dem Namen app-release-signed.apk ausgegeben. Diese Datei kann auf einem Entwicklungsgerät zum Testen installiert oder in den Google Play Store hochgeladen werden.
Bubblewrap bietet einen Befehl zum Installieren und Testen der Anwendung auf einem lokalen Gerät. Führen Sie diesen Befehl aus, wenn das Entwicklungsgerät mit dem Computer verbunden ist:
bubblewrap install
Alternativ kann das adb Tool verwendet werden.
adb install app-release-signed.apk
Die Anwendung sollte jetzt im App-Launcher des Geräts verfügbar sein.
Wenn Sie die Anwendung öffnen, wird Ihre Website als benutzerdefinierter Tab und nicht als vertrauenswürdige Web-Aktivität gestartet. Das liegt daran, dass wir die Digital Asset Links-Bestätigung noch nicht eingerichtet haben.
Alternativen zur grafischen Benutzeroberfläche (GUI) für Bubblewrap
PWA Builder bietet eine GUI-Oberfläche, die die Bubblewrap-Bibliothek verwendet, um die Generierung von Projekten für vertrauenswürdige Web-Aktivitäten zu ermöglichen. Hier finden Sie eine Anleitung zum Erstellen einer Android-App mit PWA Builder, die Ihre PWA öffnet .
Signaturschlüssel
Bei Digital Asset Links wird der Schlüssel berücksichtigt, mit dem ein APK signiert wurde. Eine häufige Ursache für das Scheitern der Bestätigung ist die Verwendung der falschen Signatur. Wenn die Bestätigung fehlschlägt, wird Ihre Website als benutzerdefinierter Tab mit der Browser-UI oben auf der Seite gestartet. Wenn Bubblewrap die Anwendung erstellt, wird ein APK mit einem Schlüssel erstellt, der im Schritt init eingerichtet wurde. Wenn Sie Ihre App jedoch bei Google Play veröffentlichen, wird möglicherweise ein anderer Schlüssel für Sie erstellt, je nachdem, wie Sie mit Signaturschlüsseln umgehen möchten. Weitere Informationen zu Signaturschlüsseln und ihrer Beziehung zu Bubblewrap und Google Play
Asset-Link-Datei 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 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 ordnungsgemäß bestätigt werden kann. Weitere Informationen zu Digital Asset Links und ihrer Beziehung zu Ihrem Signaturschlüssel finden Sie in diesem ausführlichen Artikel.
Browser prüfen
Eine vertrauenswürdige Web-Aktivität versucht, die Standardauswahl des Browsers des Nutzers zu berücksichtigen. Wenn der Standardbrowser des Nutzers Trusted Web Activities unterstützt, wird er gestartet. Andernfalls wird ein installierter Browser ausgewählt, der Trusted Web Activities unterstützt. Schließlich wird standardmäßig auf den Modus „Benutzerdefinierte Tabs“ zurückgegriffen.
Wenn Sie also etwas im Zusammenhang mit Trusted Web Activities debuggen, 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 diesem Leitfaden gefolgt sind, haben Sie hoffentlich eine funktionierende Trusted Web Activity und genügend Wissen, um Fehler zu beheben, wenn die Bestätigung fehlschlägt. Andernfalls finden Sie hier weitere Android-Konzepte für Webentwickler.
Erstellen Sie als Nächstes ein Symbol für Ihre App. Anschließend können Sie Ihre App im Google Play Store bereitstellen.