Integrationsleitfaden

André Cipriani Bandarra

Hinweis: Eine einfachere Kurzanleitung zu vertrauenswürdigen Webaktivitäten ist jetzt verfügbar.

Für die Einrichtung einer vertrauenswürdigen Webaktivität müssen Entwickler keine Java-Code, aber Android Studio ist erforderlich. Dieser Leitfaden wurde mit Android Studio 3.3 erstellt. Lesen Sie die Dokumentation zur Installation.

Projekt für vertrauenswürdige Webaktivitäten erstellen

Bei Verwendung von vertrauenswürdigen Webaktivitäten muss das Projekt auf API 16 oder höher ausgerichtet sein.

Hinweis :In diesem Abschnitt erfahren Sie, wie Sie ein neues Projekt unter Android einrichten. Studio Wenn Sie bereits mit dem Tool vertraut sind, können Sie direkt zum Abschnitt „Trusted Web Activity Library“ abrufen

Öffnen Sie Android Studio und klicken Sie auf Start a new Android Studio project (Neues Android Studio-Projekt starten).

Android Studio fordert Sie auf, einen Aktivitätstyp auszuwählen. Da vertrauenswürdige Web-Aktivitäten eine Aktivität aus der Supportbibliothek. Wählen Sie Keine Aktivität hinzufügen aus und klicken Sie auf Weiter.

Im nächsten Schritt werden Sie vom Assistenten zur Eingabe von Konfigurationen für das Projekt aufgefordert. Hier ist ein kurze Beschreibung der einzelnen Felder:

• Name:Der Name, der für Ihre Anwendung auf der Android Launcher
• Paketname:Eine eindeutige Kennung für Android-Anwendungen auf dem Play Store und auf Android-Geräten. Überprüfen Sie die Dokumentation finden Sie weitere Informationen zu Anforderungen und Best Practices für die Paketerstellung. Namen für Android-Apps.
• Speicherort:Hier wird das Projekt in der Datei von Android Studio erstellt. System.
• Sprache:Für das Projekt muss kein Java- oder Kotlin-Code geschrieben werden. Wählen Sie als Standardeinstellung Java aus.
• Mindest-API-Level:Für die Supportbibliothek ist mindestens API-Level 16 erforderlich. Wählen Sie oben API 16 aus.

Lassen Sie die anderen Kästchen deaktiviert, da wir Instant Apps nicht verwenden werden. oder AndroidX-Artefakte aus und klicken Sie auf Fertigstellen.

Holen Sie sich die Supportbibliothek für vertrauenswürdige Web-Aktivitäten

Um die Bibliothek für vertrauenswürdige Web-Aktivitäten im Projekt einzurichten, müssen Sie die Anwendung bearbeiten. Build-Datei. Suchen Sie in der Projektnavigation nach dem Abschnitt Gradle Scripts (Gradle-Skripts). Es gibt zwei Dateien mit dem Namen build.gradle, die etwas verwirrend sein können und der Beschreibungen in Klammern helfen dabei, die richtige zu finden.

Gesucht wird das Modul Module neben der Datei, Namen.

Die Bibliothek für vertrauenswürdige Web-Aktivitäten verwendet Java 8-Funktionen und die erste Änderung aktiviert Java 8. Fügen Sie dem Abschnitt compileOptions unten im android-Abschnitt wie unten gezeigt:

android {
        ...
    compileOptions {
       sourceCompatibility JavaVersion.VERSION_1_8
       targetCompatibility JavaVersion.VERSION_1_8
    }
}

Im nächsten Schritt wird dem Projekt die Supportbibliothek für vertrauenswürdige Web-Aktivitäten hinzugefügt. Neue hinzufügen Abhängigkeit zum Abschnitt dependencies:

dependencies {
    implementation 'com.google.androidbrowserhelper:androidbrowserhelper:2.2.0'
}

In Android Studio werden Sie aufgefordert, das Projekt noch einmal zu synchronisieren. Klicken Sie auf den Link Jetzt synchronisieren und synchronisieren Sie ihn.

Trusted Web-Aktivität starten

Zum Einrichten der Trusted Web-Aktivität bearbeiten Sie die Android App Manifest

Maximieren Sie in der Projektnavigation den Bereich App und dann den manifests und doppelklicke auf AndroidManifest.xml, um die Datei zu öffnen.

Da wir Android Studio gebeten haben, unserem Projekt keine Aktivitäten hinzuzufügen, erstellt wird, ist das Manifest leer und enthält nur das Anwendungs-Tag.

Fügen Sie die Trusted Web-Aktivität hinzu, indem Sie ein activity-Tag in das application-Tag einfügen:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.example.twa.myapplication">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme"
        tools:ignore="GoogleAppIndexingWarning">
        <activity
            android:name="com.google.androidbrowserhelper.trusted.LauncherActivity">

           <!-- Edit android:value to change the url opened by the Trusted Web Activity -->
           <meta-data
               android:name="android.support.customtabs.trusted.DEFAULT_URL"
               android:value="https://airhorner.com" />

           <!-- This intent-filter adds the Trusted Web Activity to the Android Launcher -->
           <intent-filter>
               <action android:name="android.intent.action.MAIN" />
               <category android:name="android.intent.category.LAUNCHER" />
           </intent-filter>

           <!--
             This intent-filter allows the Trusted Web Activity to handle Intents to open
             airhorner.com.
           -->
           <intent-filter>
               <action android:name="android.intent.action.VIEW"/>
               <category android:name="android.intent.category.DEFAULT" />
               <category android:name="android.intent.category.BROWSABLE"/>

               <!-- Edit android:host to handle links to the target URL-->
               <data
                 android:scheme="https"
                 android:host="airhorner.com"/>
           </intent-filter>
        </activity>
    </application>
</manifest>

Bei den Tags, die der XML-Datei hinzugefügt wurden, handelt es sich um Standard-Tags, Android App Manifest Im Zusammenhang mit dem Trusted Web-Programm Aktivitäten:

1. Das Tag meta-data teilt der vertrauenswürdigen Webaktivität mit, welche URL geöffnet werden soll. Ändern das Attribut android:value durch die URL der PWA, die Sie öffnen möchten. In in diesem Beispiel https://airhorner.com.
2. Mit dem zweiten intent-filter-Tag kann die vertrauenswürdige Webaktivität Android abfangen Intents, die https://airhorner.com öffnen. Das Attribut android:host innerhalb des data-Tags muss auf die Domain verweisen, die von der vertrauenswürdigen Webaktivität geöffnet wird.

Hinweis: Wenn das Projekt in dieser Phase ausgeführt wird, zeigt die URL-Leiste von benutzerdefinierten Tabs weiterhin oben auf dem Bildschirm angezeigt. Dies ist kein Programmfehler.

Im nächsten Abschnitt erfahren Sie, wie Sie Digitale Asset-Links um die Beziehung zwischen Website und App zu überprüfen, und entfernen Sie die URL-Leiste.

URL-Leiste entfernen

Für vertrauenswürdige Webaktivitäten ist eine Verknüpfung zwischen der Android-App erforderlich und die zu erstellende Website, um die URL-Leiste zu entfernen.

Diese Verknüpfung wird erstellt über Digitale Asset-Links und die Verknüpfung muss auf beide Arten hergestellt werden. von der App zur Website und von der Website in die App.

Es ist möglich, die App für die Websitevalidierung einzurichten und Chrome so einzurichten, dass dies übersprungen wird. der Website-zu-App-Validierung zu Debugging-Zwecken.

Verknüpfung zwischen App und Website herstellen

Öffnen Sie die String-Ressourcendatei app > res > values > strings.xml und fügen Sie den Parameter Nachfolgende Aussage zu Digital AssetLinks:

<resources>
    <string name="app_name">AirHorner Trusted Web Activity</string>
    <string name="asset_statements">
        [{
            \"relation\": [\"delegate_permission/common.handle_all_urls\"],
            \"target\": {
                \"namespace\": \"web\",
                \"site\": \"https://airhorner.com\"}
        }]
    </string>
</resources>

Ändern Sie den Inhalt des Attributs site so, dass er mit dem Schema und der Domain übereinstimmt durch die vertrauenswürdige Webaktivität geöffnet.

Rufen Sie in der Android App Manifest-Datei AndroidManifest.xml einen Link auf -Anweisung durch Hinzufügen eines neuen meta-data-Tags, das diesmal jedoch als untergeordnetes Element des application-Tag:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.twa.myapplication">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <meta-data
            android:name="asset_statements"
            android:resource="@string/asset_statements" />

        <activity>
            ...
        </activity>

    </application>
</manifest>

Wir haben jetzt eine Beziehung von der Android-App zum Website. Es ist hilfreich, diesen Teil der Beziehung zu debuggen, ohne von der Website bis zur Anwendungsprüfung.

So testen Sie dies auf einem Entwicklungsgerät:

Fehlerbehebungsmodus aktivieren

1. Öffne Chrome auf dem Entwicklungsgerät, rufe chrome://flags auf und suche nach für das Element Befehlszeile auf nicht gerooteten Geräten aktivieren und ändern Sie es. auf AKTIVIERT setzen und den Browser neu starten.
2. Verwenden Sie als Nächstes in der Terminal-Anwendung Ihres Betriebssystems Android Debug Bridge (mit Android Studio installiert) und führen Sie den folgenden Befehl aus:

adb shell "echo '_ --disable-digital-asset-link-verification-for-url=\"https://airhorner.com\"' > /data/local/tmp/chrome-command-line"

Schließen Sie Chrome und starten Sie die App über Android Studio neu. Die App sollte nun im Vollbildmodus angezeigt werden.

Hinweis :Möglicherweise muss das Schließen von Chrome erzwungen werden, damit es mit der korrekten Befehlszeile. Gehen Sie zu Android-Einstellungen > Apps und Benachrichtigungen > Chrome und klicken Sie auf Beenden erzwingen.

Verknüpfung zwischen Website und App herstellen

Es gibt zwei Informationen, die der Entwickler aus dem App verknüpfen, um die Verknüpfung zu erstellen:

• Paketname:Die ersten Informationen sind der Paketname für die App. Dieses ist derselbe Paketname, der beim Erstellen der App generiert wurde. Sie finden sie auch im Modul build.gradle unter Gradle-Scripts > build.gradle (Module: app) und ist der Wert des applicationId.
• SHA-256-Fingerabdruck:Android-Apps müssen signiert sein, damit sie die in den Play Store hochgeladen wurden. Dieselbe Signatur wird verwendet, um die Verbindung zwischen der Website und der App durch den SHA-256-Fingerabdruck von den Uploadschlüssel.

In der Android-Dokumentation wird ausführlich erläutert, wie Sie mit Android Studio einen Schlüssel generieren. Notieren Sie sich den Pfad, den Alias und die Passwörter für den Schlüsselspeicher. Sie benötigen sie für den nächsten Schritt.

Extrahieren Sie den SHA-256-Fingerabdruck mithilfe der keytool, mit dem folgenden Befehl:

keytool -list -v -keystore [path] -alias [alias] -storepass [password] -keypass [password]

Der Wert für den SHA-256-Fingerabdruck wird unter dem Zertifikat angezeigt Fingerabdrücke hinzufügen. Hier ist eine Beispielausgabe:

keytool -list -v -keystore ./mykeystore.ks -alias test -storepass password -keypass password

Alias name: key0
Creation date: 28 Jan 2019
Entry type: PrivateKeyEntry
Certificate chain length: 1
Certificate[1]:
Owner: CN=Test Test, OU=Test, O=Test, L=London, ST=London, C=GB
Issuer: CN=Test Test, OU=Test, O=Test, L=London, ST=London, C=GB
Serial number: ea67d3d
Valid from: Mon Jan 28 14:58:00 GMT 2019 until: Fri Jan 22 14:58:00 GMT 2044
Certificate fingerprints:
   SHA1: 38:03:D6:95:91:7C:9C:EE:4A:A0:58:43:A7:43:A5:D2:76:52:EF:9B
   SHA256: F5:08:9F:8A:D4:C8:4A:15:6D:0A:B1:3F:61:96:BE:C7:87:8C:DE:05:59:92:B2:A3:2D:05:05:A5:62:A5:2F:34
Signature algorithm name: SHA256withRSA
Subject Public Key Algorithm: 2048-bit RSA key
Version: 3

Wenn du beide Informationen zur Hand hast, kannst du den AssetLinks Generator aufrufen. Füllen Sie die Felder aus und klicken Sie auf Generate Statement. Generierte Anweisung kopieren und über Ihre Domain über die URL /.well-known/assetlinks.json bereitstellen.

Hinweis: Die Datei AssetLinks muss sich unter /.well-known/assetlinks.json befinden, Stamm der Domain, da Chrome nur dort sucht.

Symbole erstellen

Wenn Android Studio ein neues Projekt erstellt, wird es mit einem Standardsymbol versehen. Als Entwickler sollten Sie Ihr eigenes Symbol erstellen und von anderen Apps aus dem Android Launcher.

Android Studio enthält Image Asset Studio, Hier finden Sie die Tools, die Sie brauchen, um die richtigen Symbole für jede Auflösung und Gestaltung Ihrer Anwendung.

Gehen Sie in Android Studio zu File > New > Image Asset, wählen Sie Launcher Icons (Adaptative and Legacy) und folgen Sie der Anleitung im Assistenten. um ein benutzerdefiniertes Symbol für die Anwendung zu erstellen.

Signiertes APK generieren

Die Datei assetlinks in Ihrer Domain und das asset_statements-Tag müssen vorhanden sein. der in der Android-App konfiguriert ist, besteht der nächste Schritt darin, eine signierte App zu erstellen. Auch hier sind die Schritte dokumentiert.

Das Ausgabe-APK kann mithilfe von ADB auf einem Testgerät installiert werden:

adb install app-release.apk

Wenn der Bestätigungsschritt fehlschlägt, wird möglicherweise auf Fehler geprüft über Android Debug Bridge, über das Terminal Ihres Betriebssystems Testgerät verbunden.

adb logcat | grep -e OriginVerifier -e digital_asset_links

Nachdem das Upload-APK generiert wurde, können Sie die App in den Play Store hochladen.

Ladebildschirm hinzufügen

Ab Chrome 75 unterstützen vertrauenswürdige Webaktivitäten auch Ladebildschirme. Der Ladebildschirm lässt sich einrichten, indem Sie dem Projekt arbeiten.

Aktualisieren Sie auf Chrome 75 oder höher und verwenden Sie die neueste Version der Supportbibliothek für vertrauenswürdige Web-Aktivitäten.

Bilder für den Ladebildschirm generieren

Android-Geräte können verschiedene Bildschirmgrößen haben und Pixeldichten. Damit der Ladebildschirm auf allen Geräten gut dargestellt wird, müssen Sie das Bild für jede Pixeldichte.

Vollständige Erläuterung zu displayunabhängigen Pixeln (dp oder Dip) über den Rahmen dieses Artikels hinausgeht. Ein Beispiel wäre die Erstellung eines Bildes, Die Größe beträgt 320 x 320 dp, was ein Quadrat von 2 x 2 Zoll auf einem Gerätebildschirm jeder Dichte darstellt. Das entspricht 320 × 320 Pixeln bei der mdpi-Dichte.

Daraus können wir die für andere Pixeldichten benötigten Größen ableiten. Unten sehen Sie eine Liste mit den Pixeldichten, dem Multiplikator auf die Basisgröße (320 x 320 dp), die sich daraus ergebende Größe in Pixeln und die Stelle, an der das Bild hinzugefügt werden soll, Android Studio-Projekt

Dichte	Multiplikator	Größe	Projektspeicherort
mdpi (Baseline)	1,0-fach	320x320 px	/res/drawable-mdpi/
ldpi	0,75-fach	240x240 px	/res/drawable-ldpi/
hdpi	1,5-fach	480 x 480 Pixel	/res/drawable-hdpi/
xhdpi	2,0-fach	640 x 640 Pixel	/res/drawable-xhdpi/
xxhdpi	3,0x	960x960 px	/res/drawable-xxhdpi/
xxxhdpi	4,0x	1280x1280 px	/res/drawable-xxxhdpi/

Hinweis: Statt alle Bildgrößen zu erstellen, können Sie auch ein Vector Drawable verwenden. Vector Asset Studio bietet Tools, mit denen Entwickler SVGs in Android Vector Drawables umwandeln können.

Anwendung aktualisieren

Nachdem die Bilder für den Ladebildschirm generiert wurden, können Sie die erforderlichen Konfigurationen für das Projekt.

Fügen Sie zuerst einen content-provider mit dem Android-Manifest (AndroidManifest.xml) verknüpfen.

<application>
    ...
    <provider
        android:name="androidx.core.content.FileProvider"
        android:authorities="com.example.twa.myapplication.fileprovider"
        android:grantUriPermissions="true"
        android:exported="false">
        <meta-data
            android:name="android.support.FILE_PROVIDER_PATHS"
            android:resource="@xml/filepaths" />
    </provider>
</application>

Hinweis: Ändern Sie beim Erstellen des Anbieters unbedingt das Attribut android:authorities. da zwei Anwendungen auf einem Gerät nicht die gleiche Berechtigung haben können.

Fügen Sie dann die Ressource res/xml/filepaths.xml hinzu und geben Sie den Pfad zum twa-Ladebildschirm an:

<paths>
    <files-path path="twa_splash/" name="twa_splash" />
</paths>

Füge schließlich dem Android-Manifest meta-tags hinzu, um die LauncherActivity anzupassen:

<activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity">
    ...
    <meta-data android:name="android.support.customtabs.trusted.SPLASH_IMAGE_DRAWABLE"
               android:resource="@drawable/splash"/>
    <meta-data android:name="android.support.customtabs.trusted.SPLASH_SCREEN_BACKGROUND_COLOR"
               android:resource="@color/colorPrimary"/>
    <meta-data android:name="android.support.customtabs.trusted.SPLASH_SCREEN_FADE_OUT_DURATION"
               android:value="300"/>
    <meta-data android:name="android.support.customtabs.trusted.FILE_PROVIDER_AUTHORITY"
               android:value="com.example.twa.myapplication.fileprovider"/>
    ...
</activity>

Achten Sie darauf, dass der Wert von android.support.customtabs.trusted.FILE_PROVIDER_AUTHORITY Tag entspricht dem Wert des android:authorities-Attributs im provider.

LauncherActivity transparent machen

Außerdem muss LauncherActivity transparent sein, damit kein weißer Bildschirm angezeigt wird. wird vor dem Splash angezeigt, indem ein durchscheinendes Design für die LauncherActivity festgelegt wird:

<application>
    ...
    <activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity"
              android:theme="@android:style/Theme.Translucent.NoTitleBar">
    ...
    </activity>
</application>

Wir sind schon gespannt darauf, was Entwickler mit dem Trusted Web-Programm Aktivitäten. Wenn du Feedback geben möchtest, wende dich an uns unter @ChromiumDev.