Die Einrichtung vertrauenswürdiger Webaktivitäten kann etwas kompliziert sein, besonders wenn Sie nur Ihre Website anzuzeigen. Dieser Leitfaden führt Sie durch die Erstellung eines Basisprojekts, das vertrauenswürdige Web-Aktivitäten verwendet, mit allen wichtigen Dingen beschäftigt.
Am Ende dieses Leitfadens werden Sie:
- Ich habe Bubblewrap verwendet, um eine Anwendung zu erstellen. die eine vertrauenswürdige Webaktivität nutzt und die Überprüfung besteht.
- Hier erfahren Sie, 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 ist verbunden und für die Entwicklung eingerichtet Aktivieren Sie USB-Debugging, wenn Sie ein physisches Smartphone verwenden.
- Ein Browser, der vertrauenswürdige Webaktivitäten auf Ihrem Entwicklungstelefon unterstützt Sie können Chrome 72 oder höher verwenden. Weitere Browser werden demnächst unterstützt.
- Eine Website, die Sie in der Trusted Web-Aktivität ansehen möchten.
Eine vertrauenswürdige Webaktivität ermöglicht es Ihrer Android-App, einen Browser-Tab im Vollbildmodus zu starten, mit jeder Browser-Benutzeroberfläche. Diese Funktion ist auf Websites beschränkt, deren Inhaber Sie sind. Dies belegen Sie durch folgende Einstellung: Digital Asset Links einrichten. Wir sehen uns später noch ausführlicher an.
Wenn du eine vertrauenswürdige Webaktivität startest, prüft der Browser, ob die Digital Asset Links-Prüfung Dies wird als Bestätigung bezeichnet. Schlägt die Bestätigung fehl, zeigt der Browser Ihre Website wieder als Benutzerdefinierter Tab:
Bubblewrap installieren und konfigurieren
Bubblewrap besteht aus einer Reihe von Bibliotheken und einem Befehl Line-Tool (CLI) für Node.js, mit dem Entwickler progressive Web-Apps erstellen, erstellen und ausführen können in Android-Apps mithilfe von vertrauenswürdigen Web-Aktivitäten.
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 Ihnen angeboten, den erforderlichen externen Abhängigkeiten. Wir empfehlen, dass Sie dem Tool dies erlauben, da es so garantiert, ob die Abhängigkeiten korrekt konfiguriert sind. In der Bubblewrap-Dokumentation erfahren Sie, wie Sie ein einer vorhandenen Installation von JDK-Tools (Java Development Kit) oder Android-Befehlszeilentools
Projekt initialisieren und erstellen
Mit dem Befehl „init“ können Sie ein Android-Projekt initialisieren, das eine PWA umschließt:
bubblewrap init --manifest=https://my-twa.com/manifest.json
Bubblewrap liest das Webmanifest, Entwickler bitten, Werte zu bestätigen, die im Android-Projekt verwendet werden sollen, und das Projekt mithilfe von für diese Werte. Nachdem das Projekt generiert wurde, generieren Sie mit dem folgenden Befehl ein APK:
bubblewrap build
Ausführen
Mit dem Build-Schritt wird eine Datei mit dem Namen app-release-signed.apk ausgegeben. Diese Datei kann auf einem
Entwicklungsgerät zum Testen 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. Mit der Führen Sie auf dem mit dem Computer verbundenen Entwicklungsgerät folgenden Befehl aus:
bubblewrap install
Alternativ können Sie das adb-Tool verwendet.
adb install app-release-signed.apk
Die App sollte jetzt im Geräte-Launcher verfügbar sein. Beim Öffnen der Anwendung sehen Sie, dass Ihre Website als benutzerdefinierter Tab und nicht als vertrauenswürdige Webaktivität geöffnet ist. weil wir die Digital Asset Links-Validierung noch nicht eingerichtet haben, aber zuerst...
GUI-Alternativen für Bubblewrap
PWA Builder bietet eine grafische Benutzeroberfläche, die Bubblewrap verwendet. zur Generierung von vertrauenswürdigen Web-Aktivitäten. Hier finden Sie weitere Anleitungen dazu, wie Sie Erstellen Sie mit dem PWA Builder eine Android-App, die Ihre PWA in 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 Bestätigungen ist die Verwendung der falschen Signatur. (Zur Erinnerung: Bei einer fehlgeschlagenen Bestätigung wird Ihre Website als benutzerdefinierter Tab mit 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 bei Google Play veröffentlichen, wird jedoch möglicherweise ein anderer Schlüssel für Sie erstellt. Das hängt davon ab, wie Sie die Signaturschlüssel handhaben möchten. Weitere Informationen zu Signaturschlüsseln und ihrem Bezug 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 und einigen Metadaten in Ihrer App, die auf Ihre Website verweisen.
Nachdem Sie die assetlinks.json-Datei erstellt haben, laden Sie sie relativ zum Stammverzeichnis auf Ihre Website unter .well-known/assetlinks.json hoch, damit Ihre App vom Browser richtig bestätigt werden kann. Weitere Informationen dazu, wie der Schlüssel mit Ihrem Signaturschlüssel zusammenhängt, finden Sie in dieser detaillierten Anleitung zu Digital Asset Links.
Browser wird überprüft
Bei einer vertrauenswürdigen Webaktivität wird versucht, die vom Nutzer standardmäßig eingestellte Browsereinstellung einzuhalten. Wenn der Standardbrowser des Nutzers vertrauenswürdige Webaktivitäten unterstützt, wird dieser gestartet. Wenn ein installierter Browser jedoch keine vertrauenswürdigen Web-Aktivitäten unterstützt, wird dieser ausgewählt. Und schließlich wird standardmäßig auf den Modus für benutzerdefinierte Tabs zurückgegriffen.
Bei der Fehlerbehebung für vertrauenswürdige Web-Aktivitäten sollten Sie überprüfen, ob Sie den für Sie relevanten Browser verwenden. 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 hoffentlich über eine funktionierende Trusted Web-Aktivität und um Fehler zu beheben, die bei einer fehlgeschlagenen Überprüfung auftreten. Falls nicht, sieh dir weitere Android-Konzepte für Webentwickler an oder melde ein GitHub-Problem diesen Dokumenten.
Für die nächsten Schritte empfehle ich, Erstellen eines Symbols für Ihre App. Anschließend können Sie Ihre App im Play Store bereitstellen.