Integratie Gids

André Cipriani Bandarra

Opmerking: Opmerking: er is nu een eenvoudigere snelstartgids voor vertrouwde webactiviteiten beschikbaar.

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 . Controleer de documentatie over hoe u het kunt installeren .

Maak een vertrouwd webactiviteitsproject

Wanneer u vertrouwde webactiviteiten gebruikt, moet het project API 16 of hoger targeten.

Opmerking: in dit gedeelte wordt u begeleid bij het opzetten van een nieuw project in Android Studio. Als u al bekend bent met de tool, ga dan gerust naar de sectie De vertrouwde webactiviteitenbibliotheek verkrijgen .

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

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

Bij de volgende stap zal de wizard vragen om configuraties voor het project. Hier volgt een korte beschrijving van elk veld:

• Naam: de naam die voor uw toepassing in de Android Launcher wordt gebruikt.
• Pakketnaam: Een unieke identificatie voor Android-applicaties in de Play Store en op Android-apparaten. Raadpleeg de documentatie voor meer informatie over vereisten en best practices voor het maken van pakketnamen voor Android-apps.
• Locatie opslaan: waar Android Studio het project in het bestandssysteem zal maken.
• Taal: Voor het project is het schrijven van Java- of Kotlin-code niet vereist. Selecteer Java als standaard.
• Minimaal API-niveau: De Support Library vereist minimaal API-niveau 16 . Selecteer API 16, elke versie hierboven.

Laat de resterende selectievakjes uitgeschakeld, omdat we geen Instant Apps of AndroidX-artefacten zullen gebruiken, en klik op Voltooien .

Download de Trusted Web Activity Support Library

Om de Trusted Web Activity-bibliotheek in het project in te stellen, moet u het applicatiebuildbestand bewerken. Zoek naar de sectie Gradle-scripts in de Project Navigator . Er zijn twee bestanden genaamd build.gradle , wat een beetje verwarrend kan zijn en de beschrijvingen tussen haakjes helpen bij het identificeren van de juiste.

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

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

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

Bij de volgende stap wordt de Trusted Web Activity Support Library aan het project toegevoegd. Voeg een nieuwe afhankelijkheid toe aan de sectie dependencies :

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

Android Studio zal een prompt tonen met de vraag om het project nogmaals te synchroniseren. Klik op de link Nu synchroniseren en synchroniseer deze.

Start de vertrouwde webactiviteit

Het instellen van de vertrouwde webactiviteit wordt bereikt door het Android App Manifest te bewerken.

Vouw in de Project Navigator de app- sectie 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 maken ervan, is het manifest leeg en bevat het alleen de applicatietag.

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

<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 aan de XML toegevoegde tags zijn standaard Android App Manifest . Er zijn twee relevante stukjes informatie voor de context van vertrouwde webactiviteiten:

1. De meta-data vertelt de vertrouwde webactiviteit welke URL deze moet openen. Wijzig het android:value attribuut met de URL van de PWA die u wilt openen. In dit voorbeeld is dat https://airhorner.com .
2. Met de tweede intent-filter kan de vertrouwde webactiviteit Android-intenties onderscheppen die https://airhorner.com openen. Het android:host attribuut in de data moet verwijzen naar het domein dat wordt geopend door de vertrouwde webactiviteit.

Opmerking: wanneer het project in deze fase wordt uitgevoerd, wordt de URL-balk van aangepaste tabbladen nog steeds bovenaan het scherm weergegeven. Dit is geen bug .

In het volgende gedeelte wordt getoond 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 een koppeling tussen de Android-applicatie en de website vereist om de URL-balk te verwijderen.

Deze koppeling komt tot stand via Digital Asset Links en de koppeling moet op beide manieren tot stand komen, namelijk door te linken vanuit de app naar de website en vanuit de website naar de app .

Het is mogelijk om de app in te stellen op websitevalidatie en Chrome in te stellen om de website over te slaan naar app-validatie, voor foutopsporingsdoeleinden.

Breng een koppeling tot stand van app naar website

Open de stringbronnenbestand- 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.

Terug in het Android App Manifest-bestand, AndroidManifest.xml , linkt u naar de instructie door een nieuwe meta-data toe te voegen, maar deze keer als een onderliggend element 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 opgebouwd van de Android-applicatie naar de website. Het is nuttig om dit deel van de relatie te debuggen zonder de validatie van de website naar de applicatie te maken.

U kunt dit als volgt testen op een ontwikkelapparaat:

Schakel de foutopsporingsmodus in

1. Open Chrome op het ontwikkelapparaat, navigeer naar chrome://flags , zoek naar een item met de naam Opdrachtregel inschakelen op niet-geroote apparaten en wijzig dit in ENABLED en start vervolgens de browser opnieuw.
2. Gebruik vervolgens in de Terminal-toepassing 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 uw applicatie opnieuw vanuit Android Studio. De applicatie zou nu op volledig scherm moeten worden weergegeven.

Opmerking: het kan nodig zijn om Chrome geforceerd te sluiten, zodat het opnieuw opstart met de juiste opdrachtregel. Ga naar Android-instellingen > Apps en meldingen > Chrome en klik op Forceer stop .

Breng een koppeling tot stand tussen de website en de app

Er zijn twee soorten informatie die de ontwikkelaar uit de app moet verzamelen om de koppeling tot stand te brengen:

• Pakketnaam: De eerste informatie is de pakketnaam voor de app. Dit is dezelfde pakketnaam die is gegenereerd bij het maken van de app. Het kan ook worden gevonden in de Module build.gradle , onder Gradle Scripts > build.gradle (Module: app) , en is de waarde van het applicationId attribuut.
• SHA-256 Vingerafdruk: Android-applicaties moeten worden ondertekend om te kunnen worden geüpload 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.

In de Android-documentatie wordt gedetailleerd uitgelegd hoe u met Android Studio een sleutel kunt genereren . Zorg ervoor dat u het pad , de alias en de wachtwoorden voor de sleutelopslag noteert, aangezien u deze nodig heeft voor de volgende stap.

Pak de SHA-256-vingerafdruk uit 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 het gedeelte 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

Terwijl u beide informatie bij de hand heeft, gaat u naar de assetlinks-generator , vult u de velden in en klikt u op Verklaring genereren . Kopieer de gegenereerde instructie en serveer deze vanuit uw domein, vanaf de URL /.well-known/assetlinks.json .

Opmerking: het AssetLinks bestand moet zich onder /.well-known/assetlinks.json bevinden, in de hoofdmap van het domein, omdat Chrome daar alleen naar zoekt.

Een icoon creëren

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

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

Navigeer 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

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

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

adb install app-release.apk

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

adb logcat | grep -e OriginVerifier -e digital_asset_links

Nu de upload-APK is gegenereerd, kunt u de app nu uploaden naar de Play Store .

Een opstartscherm toevoegen

Vanaf Chrome 75 bieden Trusted Web-activiteiten ondersteuning voor opstartschermen. Het Splash Screen kan worden ingesteld door een paar nieuwe afbeeldingsbestanden en configuraties aan het project toe te voegen.

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

Het genereren van de afbeeldingen voor het opstartscherm

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

Een volledige uitleg van weergaveonafhankelijke pixels (dp of dip) valt buiten het bestek van dit artikel, maar een voorbeeld zou zijn het maken van een afbeelding van 320 x 320 dp, wat een vierkant van 2 x 2 inch vertegenwoordigt op een apparaatscherm van welke dichtheid dan ook. gelijk aan 320 x 320 pixels bij de mdpi- dichtheid.

Van daaruit kunnen we de afmetingen afleiden die nodig zijn voor andere pixeldichtheden. Hieronder staat een lijst met de pixeldichtheden, de vermenigvuldiger toegepast op de basisgrootte (320x320dp), de resulterende grootte in pixels en de locatie waar de afbeelding moet worden toegevoegd in het Android Studio-project.

Dikte	Vermenigvuldiger	Maat	Projectlocatie
mdpi (basislijn)	1,0x	320x320px	/res/drawable-mdpi/
ldpi	0,75x	240x240px	/res/drawable-ldpi/
hdpi	1,5x	480x480px	/res/drawable-hdpi/
xhdpi	2,0x	640x640px	/res/drawable-xhdpi/
xxhdpi	3,0x	960x960px	/res/drawable-xxhdpi/
xxxhdpi	4,0x	1280x1280px	/res/tekenbaar-xxxhdpi/

Opmerking: een alternatief voor het maken van alle afbeeldingsformaten is het gebruik van één Vector Drawable . De Vector Asset Studio biedt tools waarmee ontwikkelaars SVG's kunnen omzetten in Android Vector Drawables.

De applicatie bijwerken

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

Voeg eerst een inhoudsprovider 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>

Opmerking: zorg ervoor dat u het kenmerk android:authorities wijzigt wanneer u de provider aanmaakt, aangezien twee applicaties niet dezelfde autoriteit op een apparaat kunnen hebben.

Voeg vervolgens res/xml/filepaths.xml bron toe en specificeer het pad naar het twee-opstartscherm:

<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 android:authorities in de provider .

De LauncherActivity transparant maken

Zorg er bovendien voor dat de LauncherActivity transparant is om te voorkomen dat er een wit scherm wordt weergegeven vóór de plons, 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 kijken ernaar uit om te zien wat ontwikkelaars bouwen met Trusted Web Activity. Als u feedback wilt achterlaten, kunt u contact met ons opnemen via @ChromiumDev .