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. Diese Anleitung wurde mit Android Studio 3.3 erstellt. Weitere Informationen 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 aufgefordert, Konfigurationen für das Projekt anzugeben. Im Folgenden 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 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 übrigen Kästchen deaktiviert, da wir keine Instant Apps oder AndroidX-Artefakte verwenden. Klicken Sie dann auf Fertigstellen.

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

Um die Trusted Web Activity-Bibliothek im Projekt einzurichten, müssen Sie die Build-Datei der Anwendung bearbeiten. Suchen Sie im Project Navigator (Projektnavigator) nach dem Bereich Gradle Scripts (Gradle-Scripts). Es gibt zwei Dateien mit dem Namen build.gradle. Das kann etwas verwirrend sein. Die Beschreibungen in Klammern helfen, die richtige Datei zu identifizieren.

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

Die Bibliothek „Trusted Web Activities“ verwendet Java 8-Funktionen. Mit der ersten Änderung wird Java 8 aktiviert. 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 Webaktivitä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

Die Einrichtung der vertrauenswürdigen Web-Aktivitäten erfolgt durch Bearbeiten des Android-App-Manifests.

Maximieren Sie im Project Navigator (Projektnavigator) den Bereich App und dann Manifests 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 gibt es zwei relevante Informationen:

Das meta-data-Tag gibt der Funktion „Vertrauenswürdige Web-Aktivität“ an, welche URL geöffnet werden soll. Ersetzen 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 Funktion „Vertrauenswürdige Web-Aktivitä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 eine Verknüpfung zwischen der Android-App und der Website hergestellt werden, damit die URL-Leiste entfernt wird.

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überprüfung und Chrome für die Überspringung der Websiteüberprüfung zur App-Überprüfung einzurichten, um Fehler zu beheben.

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 site-Attributs so, dass er mit dem Schema und der Domain übereinstimmt, die von der vertrauenswürdigen Web-Aktivität geöffnet wurden.

Erstellen Sie in der Manifestdatei der Android-App (AndroidManifest.xml) einen Link zur 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-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, gehen Sie zu chrome://flags, 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 Terminalanwendung Ihres Betriebssystems die Android Debug Bridge (wird 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 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. Mit derselben Signatur wird über den SHA-256-Fingerabdruck des Uploadschlüssels die Verbindung zwischen der Website und der App hergestellt.

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 Zertifikatfingerabdrücke gedruckt. 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

Rufe dann den Asset-Link-Generator auf, fülle die Felder aus und klicke auf Erklärung erstellen. 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 das Image Asset Studio, das die Tools zum Erstellen der richtigen Symbole für jede Auflösung und die Anforderungen Ihrer Anwendung bietet.

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 über die Android Debug Bridge, über das Terminal Ihres Betriebssystems und bei verbundener Verbindung zum 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. Der Splashscreen kann eingerichtet werden, indem dem Projekt einige neue Bilddateien und Konfigurationen hinzugefügt werden.

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

Bilder für den Begrüßungsbildschirm 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,0-mal	960 x 960 px	/res/drawable-xxhdpi/
xxxhdpi	4,0 x	1.280 x 1.280 Pixel	/res/drawable-xxxhdpi/

Anwendung aktualisieren

Nachdem die Bilder für den Splashscreen generiert wurden, ist es an der Zeit, dem Projekt die erforderlichen Konfigurationen hinzuzufü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 gespannt, was Entwickler mit vertrauenswürdigen Webaktivitäten entwickeln werden. Wenn du uns Feedback geben möchtest, kannst du dich unter @ChromiumDev an uns wenden.