Deze pagina is vertaald door de Cloud Translation API.

Integratie Gids

André Cipriani Bandarra

Voor het instellen van een vertrouwde webactiviteit hoeven ontwikkelaars geen Java-code te schrijven, maar Android Studio is wel vereist. Deze handleiding is gemaakt met Android Studio 3.3 . Raadpleeg de documentatie voor informatie over de installatie .

Een vertrouwd webactiviteitsproject maken

Bij gebruik van vertrouwde webactiviteiten moet het project API 16 of hoger als doel hebben.

Open Android Studio en klik op Start een nieuw Android Studio-project .

Android Studio vraagt u om een activiteitstype te kiezen. Omdat vertrouwde webactiviteiten een activiteit gebruiken die door de ondersteuningsbibliotheek wordt aangeboden, kiest u 'Geen activiteit toevoegen' en klikt u op 'Volgende' .

De volgende stap is dat de wizard vraagt om configuraties voor het project. Hier is een korte beschrijving van elk veld:

Naam: De naam die wordt gebruikt voor uw applicatie op de Android Launcher .
Pakketnaam: Een unieke identificatie voor Android-apps in de Play Store en op Android-apparaten. Raadpleeg de documentatie voor meer informatie over de vereisten en aanbevolen procedures voor het maken van pakketnamen voor Android-apps.
Opslaglocatie: de locatie waar Android Studio het project in het bestandssysteem maakt.
Taal: Het project vereist geen Java- of Kotlin-code. Selecteer Java als standaard.
Minimaal API-niveau: De ondersteuningsbibliotheek vereist minimaal API-niveau 16. Selecteer API 16 voor elke versie hierboven.

Omdat we geen Instant Apps of AndroidX-artefacten gebruiken, laat u de overige selectievakjes leeg. Klik vervolgens op Voltooien .

Ontvang de vertrouwde Web Activity Support Library

Om de bibliotheek voor vertrouwde webactiviteiten in het project in te stellen, moet u het buildbestand van de toepassing bewerken. Zoek naar de sectie Gradle Scripts in de Project Navigator . Er zijn twee bestanden met de naam build.gradle , wat verwarrend kan zijn. De beschrijvingen tussen haakjes helpen u bij het vinden van het juiste bestand.

Het bestand dat we zoeken is het bestand met module Module naast de naam.

De Trusted Web Activities-bibliotheek maakt gebruik van Java 8-functies en de eerste wijziging schakelt Java 8 in. Voeg een compileOptions sectie toe onderaan de android -sectie, zoals hieronder:

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

De volgende stap is het toevoegen van de Trusted Web Activity Support Library aan het project. Voeg een nieuwe afhankelijkheid toe aan de sectie dependencies :

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

Android Studio vraagt je om het project opnieuw te synchroniseren. Klik op de link 'Nu synchroniseren' en synchroniseer het.

De vertrouwde webactiviteit starten

U kunt de vertrouwde webactiviteit instellen door het Android-appmanifest te bewerken.

Vouw in de Project Navigator het app- gedeelte uit, gevolgd door de manifesten en dubbelklik op AndroidManifest.xml om het bestand te openen.

Omdat we Android Studio hebben gevraagd om geen activiteit aan ons project toe te voegen bij het aanmaken ervan, is het manifest leeg en bevat het alleen de applicatietag.

Voeg de vertrouwde webactiviteit toe door een activity in de application te plaatsen:

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

De tags die aan de XML worden toegevoegd, zijn standaard Android App Manifest . Er zijn twee relevante stukjes informatie voor de context van vertrouwde webactiviteiten:

De meta-data vertelt de Trusted Web Activity welke URL deze moet openen. Vervang het attribuut android:value door de URL van de PWA die u wilt openen. In dit voorbeeld is dat https://airhorner.com .
Met de tweede intent-filter kan de Trusted Web Activity Android-intents onderscheppen die https://airhorner.com openen. Het kenmerk android:host in de data moet verwijzen naar het domein dat door de Trusted Web Activity wordt geopend.

In het volgende gedeelte leest u hoe u Digital AssetLinks instelt om de relatie tussen de website en de app te verifiëren en de URL-balk te verwijderen.

Verwijder de URL-balk

Voor vertrouwde webactiviteiten is het nodig dat er een koppeling tussen de Android-applicatie en de website tot stand wordt gebracht om de URL-balk te verwijderen.

Deze koppeling wordt gemaakt via Digital Asset Links . De koppeling moet op beide manieren tot stand worden gebracht: vanuit de app naar de website en vanuit de website naar de app .

U kunt de app instellen op websitevalidatie en Chrome zo instellen dat deze de website-naar-appvalidatie overslaat voor foutopsporingsdoeleinden.

Maak een koppeling van de app naar de website

Open het bestand met de tekenreeksbronnen app > res > values > strings.xml en voeg de onderstaande Digital AssetLinks-instructie toe:

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

Wijzig de inhoud van het site zodat deze overeenkomt met het schema en domein dat is geopend door de vertrouwde webactiviteit.

In het Android App Manifest-bestand, AndroidManifest.xml , kunt u een koppeling maken naar de verklaring door een nieuwe meta-data toe te voegen, maar dit keer als een onderliggende tag van de application :

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

We hebben nu een relatie tussen de Android-applicatie en de website tot stand gebracht. Het is handig om dit deel van de relatie te debuggen zonder de validatie van de website en de applicatie te hoeven maken.

Hier leest u hoe u dit op een ontwikkelingsapparaat kunt testen:

Debugmodus inschakelen

Open Chrome op het ontwikkelapparaat, ga naar chrome://flags , zoek naar het item ' Opdrachtregel inschakelen op niet-geroote apparaten' en wijzig dit naar 'Ingeschakeld' en start de browser opnieuw op.
Gebruik vervolgens in de Terminal-applicatie van uw besturingssysteem de Android Debug Bridge (geïnstalleerd met Android Studio) en voer de volgende opdracht uit:

adb shell "echo '_ --disable-digital-asset-link-verification-for-url=\"https://airhorner.com\"' > /data/local/tmp/chrome-command-line"

Sluit Chrome en start je app opnieuw vanuit Android Studio. De app zou nu in volledig scherm moeten worden weergegeven.

Maak een koppeling van de website naar de app

De ontwikkelaar moet twee soorten informatie uit de app verzamelen om de koppeling te kunnen maken:

Pakketnaam: De eerste informatie is de pakketnaam voor de app. Dit is dezelfde pakketnaam die is gegenereerd bij het maken van de app. Deze is ook te vinden in Module build.gradle , onder Gradle Scripts > build.gradle (Module: app) , en is de waarde van het kenmerk applicationId .
SHA-256-vingerafdruk: Android-apps moeten ondertekend zijn om te kunnen uploaden naar de Play Store. Dezelfde handtekening wordt gebruikt om de verbinding tussen de website en de app tot stand te brengen via de SHA-256-vingerafdruk van de uploadsleutel.

De Android-documentatie legt gedetailleerd uit hoe je een sleutel genereert met Android Studio . Noteer het pad , de alias en de wachtwoorden voor de sleutelopslag, want die heb je nodig voor de volgende stap.

Extraheer de SHA-256-vingerafdruk met behulp van de keytool , met de volgende opdracht:

keytool -list -v -keystore [path] -alias [alias] -storepass [password] -keypass [password]

De waarde voor de SHA-256-vingerafdruk wordt afgedrukt onder de sectie Certificaatvingerafdrukken . Hier is een voorbeelduitvoer:

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

Met beide gegevens bij de hand, ga naar de assetlinks-generator , vul de velden in en klik op 'Generate Statement' . Kopieer de gegenereerde statement en serveer deze vanaf je domein, via de URL /.well-known/assetlinks.json .

Een pictogram maken

Wanneer Android Studio een nieuw project aanmaakt, wordt dit geleverd met een standaardpictogram. Als ontwikkelaar wilt u waarschijnlijk uw eigen pictogram maken en uw applicatie onderscheiden van andere in de Android Launcher.

Android Studio bevat Image Asset Studio , dat u de tools biedt om de juiste pictogrammen te maken voor elke resolutie en vorm die uw applicatie nodig heeft.

Ga in Android Studio naar File > New > Image Asset , selecteer Launcher Icons (Adaptative and Legacy) en volg de stappen van de wizard om een aangepast pictogram voor de toepassing te maken.

Een ondertekende APK genereren

Nu het assetlinks -bestand in uw domein staat en de asset_statements tag in de Android-app is geconfigureerd, is de volgende stap het genereren van een ondertekende app. De stappen hiervoor zijn uitgebreid gedocumenteerd .

De uitvoer-APK kan met behulp van adb op een testapparaat worden geïnstalleerd:

adb install app-release.apk

Als de verificatiestap mislukt, kunt u met behulp van de Android Debug Bridge controleren op foutmeldingen vanaf de terminal van uw besturingssysteem, terwijl het testapparaat is aangesloten.

adb logcat | grep -e OriginVerifier -e digital_asset_links

Nu de geüploade APK is gegenereerd, kunt u de app uploaden naar de Play Store .

Een opstartscherm toevoegen

Vanaf Chrome 75 biedt Trusted Web Activities ondersteuning voor welkomstschermen. Het welkomstscherm kan worden ingesteld door een paar nieuwe afbeeldingsbestanden en configuraties aan het project toe te voegen.

Zorg ervoor dat u bijwerkt naar Chrome 75 of hoger en de nieuwste versie van Trusted Web Activity Support Library gebruikt.

Het genereren van de afbeeldingen voor het opstartscherm

Android-apparaten kunnen verschillende schermformaten en pixeldichtheden hebben. Om ervoor te zorgen dat het welkomstscherm er op alle apparaten goed uitziet, moet u de afbeelding voor elke pixeldichtheid genereren.

Een volledige uitleg van beeldschermonafhankelijke pixels (dp of dip) valt buiten het bestek van dit artikel, maar een voorbeeld hiervan is het maken van een afbeelding van 320x320dp. Dit vertegenwoordigt een vierkant van 2x2 inch op een apparaatscherm met elke dichtheid en is equivalent aan 320x320 pixels bij de mdpi- dichtheid.

Van daaruit kunnen we de benodigde formaten voor andere pixeldichtheden afleiden. Hieronder vindt u een lijst met de pixeldichtheden, de vermenigvuldigingsfactor die is toegepast op de basisgrootte (320x320dp), de resulterende grootte in pixels en de locatie waar de afbeelding in het Android Studio-project moet worden toegevoegd.

Dikte	Vermenigvuldiger	Maat	Projectlocatie
mdpi (basislijn)	1,0x	320x320 px	/res/tekenbare-mdpi/
ldpi	0,75x	240x240 px	/res/uittekenbare-ldpi/
hdpi	1,5x	480x480 px	/res/uittekenbare-hdpi/
xhdpi	2.0x	640x640 px	/res/uittekenbare-xhdpi/
xxhdpi	3.0x	960x960 px	/res/uittekenbare-xxhdpi/
xxxhdpi	4,0x	1280x1280 px	/res/tekenbare-xxxhdpi/

De applicatie bijwerken

Nu de afbeeldingen voor het startscherm zijn gegenereerd, is het tijd om de benodigde configuraties aan het project toe te voegen.

Voeg eerst een content-provider toe aan het Android Manifest ( AndroidManifest.xml ).

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

Voeg vervolgens de resource res/xml/filepaths.xml toe en geef het pad naar het twee-opstartscherm op:

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

Voeg ten slotte meta-tags toe aan het Android-manifest om de LauncherActivity aan te passen:

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

Zorg ervoor dat de waarde van de tag android.support.customtabs.trusted.FILE_PROVIDER_AUTHORITY overeenkomt met de waarde die is gedefinieerd voor het kenmerk android:authorities in de provider -tag.

De LauncherActivity transparant maken

Zorg er daarnaast voor dat de LauncherActivity transparant is om te voorkomen dat er een wit scherm wordt weergegeven vóór de splash, door een doorschijnend thema in te stellen voor de LauncherActivity:

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

We zijn benieuwd wat ontwikkelaars met Trusted Web Activities gaan bouwen. Voor feedback kunt u contact met ons opnemen via @ChromiumDev .