Diese Seite wurde von der Cloud Translation API übersetzt.

Integrationsleitfaden

André Cipriani Bandarra

Für die Einrichtung einer Trusted Web Activity müssen Entwickler keinen Java-Code schreiben, aber Android Studio ist erforderlich. Diese Anleitung wurde mit Android Studio 3.3 erstellt. Hier finden Sie eine Anleitung zur Installation.

Projekt für vertrauenswürdige Web-Aktivität erstellen

Wenn Sie Trusted Web Activities verwenden, muss das Projekt auf API 16 oder höher ausgerichtet sein.

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

Sie werden in Android Studio aufgefordert, einen Aktivitätstyp auszuwählen. Da vertrauenswürdige Web-Aktivitäten eine von der Support-Bibliothek bereitgestellte Aktivität verwenden, wählen Sie Add No Activity (Keine Aktivität hinzufügen) aus und klicken Sie auf Next (Weiter).

Im nächsten Schritt werden Sie vom Assistenten aufgefordert, Konfigurationen für das Projekt anzugeben. Hier finden Sie eine kurze Beschreibung der einzelnen Felder:

Name:Der Name, der für Ihre Anwendung im Android Launcher verwendet wird.
Paketname:Eine eindeutige Kennung für Android-Anwendungen im Play Store und auf Android-Geräten. Weitere Informationen zu den Anforderungen und Best Practices für das Erstellen von Paketnamen für Android-Apps finden Sie in der Dokumentation.
Speicherort:Hier wird das Projekt im Dateisystem von Android Studio erstellt.
Sprache:Für das Projekt muss kein Java- oder Kotlin-Code geschrieben werden. Wählen Sie Java als Standard aus.
Mindest-API-Level:Für die Support Library ist mindestens API-Level 16 erforderlich. Wählen Sie API 16 oder eine höhere Version aus.

Lassen Sie die übrigen Kästchen deaktiviert, da wir keine Instant-Apps oder AndroidX-Artefakte verwenden, und klicken Sie auf Fertigstellen.

Unterstützungsbibliothek für vertrauenswürdige Web-Aktivitäten

Wenn Sie die Bibliothek für vertrauenswürdige Web-Aktivitäten im Projekt einrichten möchten, müssen Sie die Build-Datei der Anwendung bearbeiten. Suchen Sie im Project Navigator (Projektnavigator) nach dem Abschnitt Gradle Scripts (Gradle-Scripts). Es gibt zwei Dateien mit dem Namen build.gradle. Das kann etwas verwirrend sein. Die Beschreibungen in Klammern helfen Ihnen, die richtige Datei zu finden.

Wir suchen nach der Datei, neben deren Namen das Modul Module steht.

Die Bibliothek für vertrauenswürdige Web-Aktivitäten verwendet Java 8-Funktionen. Mit der ersten Änderung wird Java 8 aktiviert. Fügen Sie unten im Abschnitt android einen Abschnitt compileOptions ein, wie unten dargestellt:

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

Im nächsten Schritt wird dem Projekt die Trusted Web Activity Support Library hinzugefügt. Fügen Sie dem Abschnitt dependencies eine neue Abhängigkeit hinzu:

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

In Android Studio wird eine Aufforderung angezeigt, das Projekt noch einmal zu synchronisieren. Klicken Sie auf den Link Jetzt synchronisieren, um die Synchronisierung zu starten.

Vertrauenswürdige Web-Aktivität starten

Die Einrichtung der Trusted Web Activity erfolgt durch Bearbeiten des Android-App-Manifests.

Maximieren Sie im Project Navigator (Projektnavigator) den Bereich app und dann manifests. Doppelklicken Sie auf AndroidManifest.xml, um die Datei zu öffnen.

Da wir Android Studio beim Erstellen des Projekts aufgefordert haben, keine Activity hinzuzufügen, ist das Manifest leer und enthält nur das application-Tag.

Fügen Sie die Trusted Web Activity ein, 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>

Die dem XML hinzugefügten Tags sind Standard-Android-App-Manifeste. Im Kontext von Trusted Web Activities sind zwei Informationen relevant:

Mit dem meta-data-Tag wird der vertrauenswürdigen Web-Aktivität mitgeteilt, welche URL geöffnet werden soll. Ändern Sie das Attribut android:value in die URL der PWA, die Sie öffnen möchten. In diesem Beispiel ist das https://airhorner.com.
Mit dem zweiten intent-filter-Tag kann die vertrauenswürdige Web-Aktivität Android-Intents abfangen, die https://airhorner.com öffnen. Das Attribut android:host im data-Tag muss auf die Domain verweisen, die von der Trusted Web Activity geöffnet wird.

Im nächsten Abschnitt wird beschrieben, wie Sie Digital Asset Links einrichten, um die Beziehung zwischen der Website und der App zu bestätigen und die URL-Leiste zu entfernen.

URL-Leiste entfernen

Für vertrauenswürdige Web-Aktivitäten muss eine Verknüpfung zwischen der Android-Anwendung und der Website hergestellt werden, damit die URL-Leiste entfernt werden kann.

Diese Verknüpfung wird über Digital Asset Links erstellt und muss in beide Richtungen erfolgen, also von der App zur Website und von der Website zur App.

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

Verknüpfung von der App zur Website herstellen

Öffnen Sie die Datei mit String-Ressourcen app > res > values > strings.xml und fügen Sie die Digital Asset Links-Anweisung unten ein:

<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 dem Schema und der Domain entspricht, die von der vertrauenswürdigen Web-Aktivität geöffnet werden.

Verlinken Sie in der Android-App-Manifestdatei AndroidManifest.xml auf die Erklärung, indem Sie ein neues meta-data-Tag hinzufügen, diesmal jedoch als untergeordnetes Element des application-Tags:

<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 zwischen der Android-App und der Website hergestellt. Es ist hilfreich, diesen Teil der Beziehung zu debuggen, ohne die Website-zu-App-Validierung zu erstellen.

So testen Sie das auf einem Entwicklungsgerät:

Fehlerbehebungsmodus aktivieren

Öffnen Sie Chrome auf dem Entwicklungsgerät, rufen Sie chrome://flags auf, suchen Sie nach dem Element Enable command line on non-rooted devices (Befehlszeile auf nicht gerooteten Geräten aktivieren) und ändern Sie es in ENABLED. Starten Sie dann den Browser neu.
Verwenden Sie als Nächstes in der Terminalanwendung Ihres Betriebssystems die 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 Ihre Anwendung in Android Studio neu. Die Anwendung sollte jetzt im Vollbildmodus angezeigt werden.

Verknüpfung von der Website zur App herstellen

Der Entwickler muss zwei Informationen aus der App erfassen, um die Verknüpfung zu erstellen:

Paketname:Die erste Information ist der Paketname für die App. Das ist derselbe Paketname, der beim Erstellen der App generiert wurde. Er befindet sich auch im Modul build.gradle unter Gradle-Scripts > build.gradle (Modul: app) und ist der Wert des Attributs applicationId.
SHA-256-Fingerabdruck:Android-Anwendungen müssen signiert werden, damit sie in den Play Store hochgeladen werden können. Dieselbe Signatur wird verwendet, um die Verbindung zwischen der Website und der App über den SHA-256-Fingerabdruck des Uploadschlüssels herzustellen.

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

Extrahieren Sie den SHA-256-Fingerabdruck mit dem 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 im Abschnitt Zertifikat-Fingerabdrücke ausgegeben. Hier ein Beispiel für die Ausgabe:

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

Rufen Sie den Generator für assetlinks auf, füllen Sie die Felder aus und klicken Sie auf Erklärung generieren. Kopieren Sie die generierte Erklärung und stellen Sie sie über Ihre Domain unter der URL /.well-known/assetlinks.json bereit.

Symbol erstellen

Wenn Android Studio ein neues Projekt erstellt, wird ein Standardsymbol verwendet. Als Entwickler möchten Sie Ihr eigenes Symbol erstellen und Ihre Anwendung von anderen im Android-Launcher abheben.

Android Studio enthält Image Asset Studio, das die erforderlichen Tools zum Erstellen der richtigen Symbole für jede Auflösung und Form bietet, die für Ihre Anwendung benötigt werden.

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

Signiertes APK generieren

Nachdem Sie die Datei assetlinks in Ihrer Domain und das asset_statements-Tag in der Android-Anwendung konfiguriert haben, müssen Sie als Nächstes eine signierte App generieren. Die Schritte dazu sind ausführlich dokumentiert.

Das ausgegebene APK kann mit adb auf einem Testgerät installiert werden:

adb install app-release.apk

Wenn der Bestätigungsschritt fehlschlägt, können Sie im Terminal Ihres Betriebssystems und bei angeschlossenem Testgerät mit der Android Debug Bridge nach Fehlermeldungen suchen.

adb logcat | grep -e OriginVerifier -e digital_asset_links

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

Begrüßungsbildschirm hinzufügen

Ab Chrome 75 werden Startbildschirme in Trusted Web Activities unterstützt. Der Splash-Screen kann eingerichtet werden, indem dem Projekt einige neue Bilddateien und Konfigurationen hinzugefügt werden.

Aktualisieren Sie auf Chrome 75 oder höher und verwenden Sie die aktuelle Version der Trusted Web Activity Support Library.

Bilder für den Begrüßungsbildschirm werden generiert

Android-Geräte können unterschiedliche Displaygrößen und Pixeldichten haben. Damit der Splash-Screen auf allen Geräten gut aussieht, müssen Sie das Bild für jede Pixeldichte generieren.

Eine vollständige Erklärung von anzeigeunabhängigen Pixeln (dp oder dip) würde den Rahmen dieses Artikels sprengen. Ein Beispiel wäre jedoch, ein Bild mit 320 × 320 dp zu erstellen. Dies entspricht einem Quadrat von 2 × 2 Zoll auf einem Gerätebildschirm mit beliebiger Dichte und 320 × 320 Pixeln bei der Dichte mdpi.

Daraus können wir die Größen für andere Pixeldichten ableiten. Unten finden Sie eine Liste mit den Pixeldichten, dem Multiplikator für die Basisgröße (320 × 320 dp), der resultierenden Größe in Pixeln und dem Speicherort, an dem das Bild im Android Studio-Projekt hinzugefügt werden sollte.

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

Anwendung aktualisieren

Nachdem die Bilder für den Splash-Screen generiert wurden, müssen Sie dem Projekt die erforderlichen Konfigurationen hinzufügen.

Fügen Sie zuerst einen content-provider zum Android-Manifest (AndroidManifest.xml) hinzu.

<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>

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

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

Fügen Sie schließlich meta-tags dem Android-Manifest 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 des android.support.customtabs.trusted.FILE_PROVIDER_AUTHORITY-Tags mit dem Wert des Attributs android:authorities im provider-Tag übereinstimmt.

LauncherActivity transparent machen

Außerdem muss die LauncherActivity transparent sein, damit vor dem Splashscreen kein weißer Bildschirm angezeigt wird. Dazu müssen Sie ein durchscheinendes Theme für die LauncherActivity festlegen:

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

Wir sind gespannt, was Entwickler mit Trusted Web Activities entwickeln werden. Wenn Sie Feedback geben möchten, können Sie uns unter @ChromiumDev kontaktieren.