Diese Seite wurde von der Cloud Translation API übersetzt.

Integrationsleitfaden

André Cipriani Bandarra

Twitter GitHub Glitch Mastodon Startseite

Zum Einrichten 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 in der Dokumentation zur Installation nach.

Trusted Web Activity-Projekt erstellen

Wenn Sie Trusted Web Activitys 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).

In Android Studio werden Sie aufgefordert, einen Aktivitätstyp auszuwählen. Da vertrauenswürdige Web-Aktivitäten eine Aktivität verwenden, die von der Support Library bereitgestellt wird, wählen Sie Keine Aktivität hinzufügen aus und klicken Sie auf Weiter.

Im nächsten Schritt fordert der Assistent die Konfiguration des Projekts auf. Hier eine kurze Beschreibung jedes Feldes:

Name:Der Name, der für Ihre App im Android Launcher verwendet wird.
Paketname:Eine eindeutige Kennung für Android-Apps im Play Store und auf Android-Geräten. Weitere Informationen zu Anforderungen und Best Practices für das Erstellen von Paketnamen für Android-Apps finden Sie in der Dokumentation.
Speicherort speichern: Der Ort, an dem Android Studio das Projekt im Dateisystem erstellt.
Sprache:Für das Projekt muss kein Java- oder Kotlin-Code geschrieben werden. Wählen Sie Java als Standardeinstellung aus.
Minimales API-Level:Für die Supportbibliothek ist mindestens API-Level 16 erforderlich. Wählen Sie oben eine beliebige API-Version 16 aus.

Lassen Sie die restlichen Kästchen deaktiviert, da wir keine Instant Apps oder AndroidX-Artefakte verwenden werden, und klicken Sie auf Finish (Fertigstellen).

Support Library für vertrauenswürdige Webaktivitäten abrufen

Zum Einrichten der Trusted Web Activity-Bibliothek im Projekt müssen Sie die Build-Datei für die Anwendung bearbeiten. Suchen Sie im Project Navigator nach dem Abschnitt Gradle Scripts (Gradle-Skripts). Es gibt zwei Dateien namens build.gradle, die etwas verwirrend sein können. Die Beschreibungen in Klammern helfen bei der Identifizierung der richtigen Datei.

Die gesuchte Datei enthält das Modul Module neben dem Namen.

Die Trusted Web Activity Library verwendet Java 8-Funktionen. Mit der ersten Ä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 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 werden Sie aufgefordert, das Projekt noch einmal zu synchronisieren. Klicken Sie auf den Link Jetzt synchronisieren und synchronisieren Sie ihn.

Vertrauenswürdige Web-Aktivitäten starten

Die Einrichtung der vertrauenswürdigen Webaktivität erfolgt durch Bearbeiten des Android App Manifests.

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

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

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

Die in die XML-Datei eingefügten Tags entsprechen dem standardmäßigen Android App Manifest. Es gibt zwei relevante Informationen für den Kontext von vertrauenswürdigen Webaktivitäten:

Das meta-data-Tag teilt der vertrauenswürdigen Webaktivität mit, 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 Attribut android:host im Tag data muss auf die Domain verweisen, die von der vertrauenswürdigen Webaktivität geöffnet wird.

Im nächsten Abschnitt erfahren Sie, wie Sie Digital AssetLinks einrichten, um die Beziehung zwischen der Website und der App zu überprüfen, und die URL-Leiste entfernen.

URL-Leiste entfernen

Damit die URL-Leiste entfernt werden kann, muss eine Verknüpfung zwischen der Android-App und der Website hergestellt werden.

Diese Verknüpfung wird über Digital Asset Links erstellt und muss auf beide Arten hergestellt werden: von der App mit der Website und von der Website zur App.

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

Verknüpfung zwischen App und Website herstellen

Öffnen Sie die String-Ressourcendatei app > res > values > strings.xml und fügen Sie 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 dem Schema und der Domain entspricht, die von der vertrauenswürdigen Web-Aktivität geöffnet wurden.

Kehren Sie zur Android-App-Manifestdatei AndroidManifest.xml zurück und verknüpfen Sie die Anweisung. Fügen Sie dazu ein neues meta-data-Tag hinzu, 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 nun eine Beziehung zwischen der Android-Anwendung und der Website aufgebaut. Es ist hilfreich, diesen Teil der Beziehung zu debuggen, ohne die Website-zu-Anwendungsvalidierung zu erstellen.

So testen Sie dies auf einem Entwicklungsgerät:

Debug-Modus 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 und ändern Sie es zu AKTIVIERT. Starten Sie dann den Browser neu.
Verwenden Sie als Nächstes in der Terminal-Anwendung Ihres Betriebssystems die Android Debug Bridge, die mit Android Studio installiert wurde, 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.

Eine Verknüpfung zwischen der Website und der App herstellen

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

Paketname:Die erste Information ist der Paketname für die App. Es handelt sich um den Paketnamen, der beim Erstellen der App generiert wurde. Sie finden ihn auch im Modul build.gradle unter Gradle-Skripts > build.gradle (Module: app). Sie ist der Wert des Attributs applicationId.
SHA-256-Fingerabdruck:Android-Apps müssen signiert sein, 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 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, da Sie diese im nächsten Schritt benötigen.

Extrahieren Sie den SHA-256-Fingerabdruck mithilfe des 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 ausgegeben. 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

Rufen Sie den Asset-Links-Generator auf, füllen Sie die Felder aus und klicken Sie auf Anweisung generieren. Kopieren Sie die generierte Anweisung und stellen Sie sie über die URL /.well-known/assetlinks.json aus Ihrer Domain bereit.

Symbole erstellen

Wenn Android Studio ein neues Projekt erstellt, hat es ein Standardsymbol. Als Entwickler möchten Sie wahrscheinlich Ihr eigenes Symbol erstellen, um Ihre App von anderen Apps im Android Launcher abzuheben.

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

Rufe in Android Studio File > New > Image Asset auf, wähle Launcher Icons (Adaptative and Legacy) aus und folge der Anleitung im Assistenten, um ein benutzerdefiniertes Symbol für die App zu erstellen.

Signiertes APK generieren

Nachdem die Datei assetlinks in Ihrer Domain vorhanden ist und das in der Android-App konfigurierte Tag asset_statements vorhanden ist, besteht der nächste Schritt darin, eine signierte App zu generieren. Auch die entsprechenden Schritte sind umfassend dokumentiert.

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

adb install app-release.apk

Wenn der Verifizierungsschritt fehlschlägt, können Sie mithilfe der Android Debug Bridge im Terminal Ihres Betriebssystems und mit dem verbundenen Testgerät nach Fehlermeldungen suchen.

adb logcat | grep -e OriginVerifier -e digital_asset_links

Mit dem generierten Upload-APK können Sie die App jetzt in den Play Store hochladen.

Ladebildschirm hinzufügen

Ab Chrome 75 unterstützen Trusted Web Activity Ladebildschirme. Zum Einrichten des Ladebildschirms können 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 Trusted Web Activity Support Library.

Bilder für den Ladebildschirm werden generiert

Android-Geräte können unterschiedliche Bildschirmgrößen und Pixeldichten haben. Damit der Ladebildschirm auf allen Geräten gut aussieht, muss das Bild für jede Pixeldichte generiert werden.

Eine vollständige Erläuterung displayunabhängiger Pixel (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 2 x 2 Zoll auf einem Gerätebildschirm mit beliebiger Dichte darstellt und der mdpi-Dichte entspricht: 320 x 320 Pixel.

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

Dichte Multiplikator Größe Projektspeicherort

mdpi (Referenz) 1,0-fach 320x320 px /res/drawable-mdpi/

ldpi 0,75-fach 240x240 px /res/drawable-ldpi/

HDPI 1,5-fach 480x480 px /res/drawable-hdpi/

XHDPI 2,0-fach 640x640 px /res/drawable-xhdpi/

xxhdpi 3,0x 960x960 px /res/drawable-xxhdpi/

xxxhdpi 4,0x 1.280 x 1.280 px /res/drawable-xxxhdpi/

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

Anwendung aktualisieren

Nachdem die Images für den Ladebildschirm erstellt wurden, müssen Sie dem Projekt die erforderlichen Konfigurationen hinzufügen.

Fügen Sie dem Android-Manifest zuerst einen Content-Anbieter (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>
Hinweis: Achten Sie darauf, das android:authorities-Attribut beim Erstellen des Anbieters zu ändern, da zwei Anwendungen nicht dieselbe Berechtigung auf einem Gerät 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 meta-tags zum 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>

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

LauncherActivity transparent machen

Achte außerdem darauf, dass die LauncherActivity transparent ist, damit vor dem Splash kein weißer Bildschirm erscheint, indem du ein durchscheinendes Design für die LauncherActivity festlegst:

<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. Wenn Sie Feedback geben möchten, kontaktieren Sie uns unter @ChromiumDev.

Dichte	Multiplikator	Größe	Projektspeicherort
mdpi (Referenz)	1,0-fach	320x320 px	/res/drawable-mdpi/
ldpi	0,75-fach	240x240 px	/res/drawable-ldpi/
HDPI	1,5-fach	480x480 px	/res/drawable-hdpi/
XHDPI	2,0-fach	640x640 px	/res/drawable-xhdpi/
xxhdpi	3,0x	960x960 px	/res/drawable-xxhdpi/
xxxhdpi	4,0x	1.280 x 1.280 px	/res/drawable-xxxhdpi/