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. 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. Im Folgenden finden Sie eine kurze Beschreibung der einzelnen Felder:

Name:Der Name, der für Ihre App 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 speichern: Hier wird das Projekt von Android Studio im Dateisystem erstellt.
Sprache:Für das Projekt muss kein Java- oder Kotlin-Code geschrieben werden. Wählen Sie als Standardeinstellung Java 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, und klicken Sie 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 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 Trusted Web Activities-Bibliothek verwendet Java 8-Funktionen und durch die erste Änderung wird Java 8 aktiviert. Fügen Sie unten im Abschnitt android einen compileOptions-Abschnitt hinzu:

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

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 sind zwei Informationen relevant:

Das Tag meta-data teilt der vertrauenswürdigen Webaktivität mit, 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 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.

Die Verknüpfung wird über Digital Asset Links erstellt und muss auf beide Arten hergestellt werden: 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 Appüberprüfung einzurichten, um die Website zu überspringen.

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 durch die vertrauenswürdige Webaktivität geöffnet werden.

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 dies 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 App ü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 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 anschließend den Assetlinks Generator auf, fülle die Felder aus und klicke auf Generate Statement. Kopieren Sie die generierte Anweisung und stellen Sie sie aus Ihrer Domain aus 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 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. Der Splashscreen 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 generieren

Android-Geräte können verschiedene 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 Erläuterung von displayunabhängigen Pixeln (dp oder dip) würde den Rahmen dieses Artikels sprengen. Ein Beispiel wäre aber die Erstellung eines Bildes mit einer Größe von 320 × 320 dp, das ein Quadrat von 2 × 2 Zoll auf einem Gerätebildschirm mit einer beliebigen Dichte darstellt und einer mdpi-Dichte von 320 × 320 Pixeln 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 (ursprüngliche Variante)	1,0-fach	320x320 px	/res/drawable-mdpi/
ldpi	0,75-fach	240x240 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-fach	960 × 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 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ü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.