Diese Seite wurde von der Cloud Translation API übersetzt.

Integrationsleitfaden

André Cipriani Bandarra

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

Projekt für vertrauenswürdige Webaktivitäten erstellen

Wenn Sie vertrauenswürdige Webaktivitäten verwenden, muss das Projekt auf API 16 oder höher ausgerichtet sein.

Öffnen Sie Android Studio und klicken Sie auf Neues Android Studio-Projekt starten.

Sie werden von Android Studio aufgefordert, einen Aktivitätstyp auszuwählen. Da für vertrauenswürdige Webaktivitäten eine Aktivität aus der Supportbibliothek verwendet wird, 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 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 erstellt Android Studio das Projekt im Dateisystem.
Sprache:Für das Projekt muss kein Java- oder Kotlin-Code geschrieben werden. Wählen Sie „Java“ als Standard aus.
Mindest-API-Ebene: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 anderen Kästchen deaktiviert, da wir keine Instant-Apps- oder AndroidX-Artefakte verwenden werden, und klicken Sie auf Finish (Fertigstellen).

Supportbibliothek für vertrauenswürdige Web-Aktivitäten abrufen

Zum Einrichten der Bibliothek für vertrauenswürdige Web-Aktivitäten im Projekt müssen Sie die Build-Datei der Anwendung bearbeiten. 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. Die Beschreibungen in Klammern helfen dabei, die richtige zu ermitteln.

Die gesuchte Datei ist diejenige, neben deren Namen das Modul Module steht.

Die Bibliothek der vertrauenswürdigen Webaktivitäten verwendet Java 8-Funktionen. Die erste Änderung aktiviert Java 8. Fügen Sie am Ende des Abschnitts android einen Abschnitt compileOptions hinzu, wie unten dargestellt:

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. Fügen Sie dem Bereich dependencies eine neue Abhängigkeit hinzu:

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 die Daten.

Vertrauliche Webaktivitäten starten

Zum Einrichten der „Vertrauenswürdige Web-Aktivität“ muss das Android App Manifest bearbeitet werden.

Maximieren Sie in Project Navigator den Abschnitt app, gefolgt von den Manifesten und doppelklicken Sie auf AndroidManifest.xml, um die Datei zu öffnen.

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

Fügen Sie die vertrauenswürdigen Webaktivitäten 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>

Die XML-Datei enthält standardmäßige Android-App-Manifest-Tags. Für den Kontext vertrauenswürdiger Webaktivitäten sind zwei Informationen relevant:

Das meta-data-Tag gibt der Funktion „Vertrauenswürdige Web-Aktivität“ an, welche URL geöffnet werden soll. Ändern Sie das Attribut android:value durch 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 Webaktivität Android-Intents abfangen, die https://airhorner.com öffnen. Das android:host-Attribut im data-Tag muss auf die Domain verweisen, die durch die vertrauenswürdigen Webaktivitäten geöffnet wird.

Im nächsten Abschnitt wird beschrieben, wie du Digital AssetLinks einrichtest, 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 Webaktivitäten muss zum Entfernen der URL-Leiste eine Verknüpfung zwischen der Android-App und der Website hergestellt werden.

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.

Sie können die App für die Websitevalidierung einrichten und Chrome so einrichten, dass die Website-zu-App-Überprüfung zu Fehlerbehebungszwecken übersprungen wird.

Verknüpfung zwischen App und Website herstellen

Öffne die Datei mit den Stringressourcen app > res > values > strings.xml und füge die folgende Digital AssetLinks-Anweisung hinzu:

<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, die von der vertrauenswürdigen Web-Aktivität geöffnet wurden.

Verknüpfe in der Android App Manifest-Datei AndroidManifest.xml eine Verknüpfung zur Anweisung. Füge dazu ein neues meta-data-Tag hinzu, diesmal jedoch als untergeordnetes Tag 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-Anwendung und der Website hergestellt. Es ist hilfreich, diesen Teil der Beziehung zu debuggen, ohne die Website für die Anwendungsvalidierung 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 Befehlszeile auf nicht gerooteten Geräten aktivieren, ändern Sie es in AKTIVIERT und starten Sie den Browser neu.
Verwenden Sie als Nächstes in der Terminal-Anwendung Ihres Betriebssystems die mit Android Studio installierte Android Debug Bridge 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 Anwendung über Android Studio neu. Die Anwendung sollte jetzt im Vollbildmodus angezeigt werden.

Verknüpfung zwischen Website und App herstellen

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

Paketname:Die erste Information ist der Paketname der App. Dies ist derselbe Paketname, der beim Erstellen der App generiert wurde. Sie finden ihn auch im Modul build.gradle unter Gradle-Scripts > build.gradle (Modul: app). Er ist der Wert des Attributs applicationId.
SHA-256-Fingerabdruck:Android-Anwendungen müssen signiert sein, um in den Play Store hochgeladen zu werden. Es wird dieselbe Signatur 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 path, alias und die passwords für den Schlüsselspeicher, da Sie diese 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 Fingerabdruckbereich Zertifikat angezeigt. 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

Rufe anschließend den Assetlinks Generator auf, fülle die Felder aus und klicke auf Generate Statement. Kopieren Sie die generierte Erklärung und stellen Sie sie über Ihre Domain unter der URL /.well-known/assetlinks.json bereit.

Symbol erstellen

Wenn in Android Studio ein neues Projekt erstellt wird, wird es mit einem Standardsymbol versehen. Als Entwickler sollten Sie ein eigenes Symbol erstellen und Ihre App von anderen im Android-Launcher abheben.

Android Studio enthält Image Asset Studio mit den erforderlichen Tools zum Erstellen der richtigen Symbole für jede Auflösung und Form, die deine App benötigt.

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

Signiertes APK generieren

Nachdem Sie die assetlinks-Datei in Ihrer Domain platziert und das asset_statements-Tag in der Android-Anwendung konfiguriert haben, besteht der nächste Schritt darin, eine signierte App zu generieren. Die dazu erforderlichen Schritte sind ausführlich dokumentiert.

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

adb install app-release.apk

Wenn der Bestätigungsschritt fehlschlägt, können Sie mithilfe der Android Debug Bridge auch über das Terminal Ihres Betriebssystems und mit dem angeschlossenen Testgerät 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

Seit Chrome 75 werden Startbildschirme von Trusted Web Activities unterstützt. Sie können den Ladebildschirm einrichten, indem Sie dem Projekt einige neue Bilddateien und Konfigurationen hinzufügen.

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 unterschiedliche Bildschirmgrößen und Pixeldichten haben. Damit der Splashscreen auf allen Geräten gut aussieht, müssen Sie das Bild für jede Pixeldichte generieren.

Eine vollständige Erklärung von displayunabhängigen Pixeln (dp oder dip) würde den Rahmen dieses Artikels sprengen. Ein Beispiel wäre jedoch ein Bild mit 320 x 320 dp, das ein Quadrat von 5,1 x 5,1 cm auf einem Display mit beliebiger Dichte darstellt und 320 x 320 Pixel bei einer Dichte von mdpi entspricht.

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

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

Anwendung aktualisieren

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

Fügen Sie zuerst dem Android-Manifest (AndroidManifest.xml) einen Content-Anbieter 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-Startbildschirm an:

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

Fügen Sie dem Android-Manifest abschließend 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>

Der Wert des android.support.customtabs.trusted.FILE_PROVIDER_AUTHORITY-Tags muss mit dem Wert des Attributs android:authorities im provider-Tag übereinstimmen.

LauncherActivity transparent machen

Achten Sie außerdem darauf, dass die LauncherActivity transparent ist, damit vor dem Splashscreen kein weißer Bildschirm angezeigt wird. Legen Sie dazu ein halbtransparentes Design für die LauncherActivity fest:

<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 Trusted Web Activities entwickeln. Wenn du Feedback geben möchtest, kannst du uns eine E-Mail an @ChromiumDev senden.