Questa pagina è stata tradotta dall'API Cloud Translation.

Guida all'integrazione

André Cipriani Bandarra

La configurazione di un'attività web attendibile non richiede agli sviluppatori di creare Java, ma Android Studio è obbligatorio. Questa guida è stata creata utilizzando Android Studio 3.3. Consulta la documentazione su come installarlo.

Crea un progetto di attività web attendibile

Quando si utilizzano attività web attendibili, il progetto deve avere come target l'API 16 o versioni successive.

Apri Android Studio e fai clic su Start a new Android Studio project (Avvia un nuovo progetto Android Studio).

Android Studio chiederà di scegliere un tipo di attività. Poiché le attività web attendibili utilizzano Attività fornita dalla libreria di assistenza, scegli Aggiungi nessuna attività e fai clic su Avanti.

Nel passaggio successivo, la procedura guidata richiederà le configurazioni per il progetto. Ecco un breve descrizione di ciascun campo:

Nome: il nome che verrà utilizzato per la tua applicazione nella Avvio app Android.
Nome del pacchetto: un identificatore univoco per le app Android nella Play Store e sui dispositivi Android. Controlla il documentazione per ulteriori informazioni sui requisiti e sulle best practice per la creazione di pacchetti nomi per le app Android.
Posizione di salvataggio: posizione in cui Android Studio creerà il progetto nel file di un sistema operativo completo.
Linguaggio: il progetto non richiede la scrittura di codice Java o Kotlin. Seleziona Java come impostazione predefinita.
Livello API minimo: la libreria di assistenza richiede almeno il livello API 16. Seleziona l'API 16 con qualsiasi versione qui sopra.

Lascia deselezionate le caselle di controllo rimanenti, poiché non utilizzeremo le app istantanee. o gli artefatti AndroidX e fai clic su Fine.

Scarica la Libreria di supporto per le attività web attendibili

Per configurare la libreria delle attività web attendibili nel progetto, devi modificare l'applicazione di configurazione del deployment. Cerca la sezione Gradle Script nel Navigatore progetti. Esistono due file chiamati build.gradle, che potrebbero creare confusione e le descrizioni tra parentesi aiutano a identificare quella corretta.

Il file che stiamo cercando è quello con il modulo Modulo accanto .

La raccolta Attività web attendibili utilizza Funzionalità di Java 8 e la prima modifica abilita Java 8. Aggiungi una sezione compileOptions a in fondo alla sezione android, come indicato di seguito:

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

Nel passaggio successivo verrà aggiunta al progetto la libreria di supporto per le attività web attendibili. Aggiungi un nuovo elemento alla sezione dependencies:

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

In Android Studio verrà visualizzato un messaggio che chiede di sincronizzare ancora una volta il progetto. Fai clic sul link Sync Now (Sincronizza ora) e sincronizzalo.

Avvia l'Attività web attendibile

La configurazione dell'attività web attendibile si ottiene modificando File manifest dell'app per Android.

In Navigatore progetto, espandi la sezione dell'app, seguita dalla manifests e fai doppio clic su AndroidManifest.xml per aprire il file.

Dato che abbiamo chiesto ad Android Studio di non aggiungere alcuna attività al nostro progetto quando la creazione, il file manifest è vuoto e contiene solo il tag dell'applicazione.

Aggiungi l'Attività web attendibile inserendo un tag activity nel tag application:

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

I tag aggiunti al file XML sono standard File manifest dell'app per Android. Esistono due informazioni pertinenti per il contesto di Trusted Web Attività:

Il tag meta-data indica all'attività web attendibile quale URL deve aprire. Cambia L'attributo android:value con l'URL della PWA che vuoi aprire. Nella in questo esempio è https://airhorner.com.
Il secondo tag intent-filter consente all'attività web attendibile di intercettare Android Intent che aprono https://airhorner.com. Attributo android:host all'interno del tag data deve rimandare al dominio aperto dall'attività web attendibile.

La prossima sezione mostrerà come configurare Link agli asset digitali per verificare la relazione tra il sito web e l'app e rimuovere la barra dell'URL.

Rimuovi la barra dell'URL

Le attività web attendibili richiedono un'associazione tra l'applicazione Android e il sito web da creare per rimuovere la barra dell'URL.

Questa associazione viene creata tramite Link agli asset digitali e l'associazione deve essere stabilita in entrambi i modi, il collegamento dall'app al sito web e dal sito web all'app.

È possibile configurare l'app per la convalida del sito web e impostare Chrome in modo che ignori dal sito web alla convalida dell'app, a scopo di debug.

Stabilire un'associazione dall'app al sito web

Apri il file di risorse della stringa app > res > values > strings.xml e aggiungi il token Dichiarazione di Digital AssetLinks riportata di seguito:

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

Modifica i contenuti dell'attributo site in modo che corrispondano allo schema e al dominio aperta dall'Attività web attendibile.

Torna al file manifest dell'app per Android, AndroidManifest.xml, link a aggiungendo un nuovo tag meta-data, ma questa volta come elemento secondario Tag 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>

Ora abbiamo stabilito una relazione dall'applicazione Android al sito web. È utile eseguire il debug di questa parte della relazione senza creare dal sito web alla convalida dell'applicazione.

Per eseguire il test su un dispositivo di sviluppo:

Abilita modalità di debug

Apri Chrome sul dispositivo di sviluppo, vai a chrome://flags, cerca per l'elemento denominato Abilita riga di comando sui dispositivi non rooted e modificalo su ENABLED e poi riavviare il browser.
Quindi, nell'applicazione Terminale del tuo sistema operativo, utilizza Android Debug Bridge (installata con Android Studio) ed esegui questo comando:

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

Chiudi Chrome e riavvia l'applicazione da Android Studio. La dovrebbe essere visualizzata a schermo intero.

Stabilire un'associazione dal sito web all'app

Lo sviluppatore deve raccogliere due informazioni per creare l'associazione:

Package Name (Nome pacchetto): la prima informazione è il nome del pacchetto dell'app. Questo è lo stesso nome di pacchetto generato durante la creazione dell'app. Puoi anche trovarlo all'interno del Modulo build.gradle, nel Script per Gradle > build.gradle (Module: app), ed è il valore del parametro applicationId.
Impronta SHA-256: le app Android devono essere firmate per poter essere gestite caricati sul Play Store. La stessa firma viene utilizzata per stabilire connessione tra il sito web e l'app tramite l'impronta digitale SHA-256 la chiave di caricamento.

La documentazione di Android spiega in dettaglio come generare una chiave utilizzando Android Studio. Assicurati di prendere nota del percorso, dell'alias e delle password per l'archivio chiavi, ti servirà per il passaggio successivo.

Estrai l'impronta SHA-256 utilizzando il metodo keytool, con il seguente comando:

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

Il valore dell'impronta SHA-256 è stampato sul certificato delle impronte digitali. Ecco un output di esempio:

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

Con entrambe le informazioni a portata di mano, accedi al generatore di assetlink, compila i campi e fai clic su Genera istruzione. Copia l'istruzione generata e pubblicarlo dal tuo dominio, dall'URL /.well-known/assetlinks.json.

Creazione di un'icona

Quando Android Studio crea un nuovo progetto, questo viene fornito con un'icona predefinita. In qualità di sviluppatore, vorrai creare un'icona personalizzata e differenziare di altre app su Android Launcher.

Android Studio contiene Image Asset Studio, che fornisce gli strumenti necessari per creare le icone corrette, e definire le esigenze della tua applicazione.

In Android Studio, vai a File > New > Image Asset, seleziona Launcher Icons (Adaptative and Legacy) e segui i passaggi della procedura guidata. per creare un'icona personalizzata per l'applicazione.

Generazione di un APK firmato

Con il file assetlinks attivo nel dominio e il tag asset_statements configurata nell'applicazione Android, il passaggio successivo sarà generare un'app firmata. Anche in questo caso, i passaggi da seguire sono ampiamente documentato.

L'APK di output può essere installato su un dispositivo di test utilizzando adb:

adb install app-release.apk

Se il passaggio di verifica non va a buon fine, è possibile che non ci siano errori. utilizzando Android Debug Bridge, dal terminale del sistema operativo e tramite dispositivo di test connesso.

adb logcat | grep -e OriginVerifier -e digital_asset_links

Dopo aver generato l'APK di caricamento, ora puoi caricare l'app sul Play Store.

Aggiunta di una schermata iniziale

A partire da Chrome 75, le attività web attendibili supportano le schermate iniziali. La schermata iniziale può essere impostata aggiungendo alcuni nuovi file immagine e configurazioni progetto.

Assicurati di eseguire l'aggiornamento a Chrome 75 o versioni successive e utilizza la l'ultima versione della Libreria di supporto di attività web attendibili.

Generazione delle immagini per la schermata iniziale

I dispositivi Android possono avere dimensioni dello schermo diverse e densità di pixel. Per assicurarti che la schermata iniziale venga visualizzata correttamente su tutti i dispositivi, devi generare l'immagine per ogni densità di pixel.

Una spiegazione completa dei pixel indipendenti dal display (dp o dip) esula dall'ambito di questo articolo, ma un esempio potrebbe essere la creazione di un'immagine che è 320 x 320 dp, che rappresenta un quadrato di 2 x 2 pollici sullo schermo di un dispositivo di qualsiasi densità ed è equivalente a pixel 320 x 320 con densità mdpi.

Da lì possiamo ricavare le dimensioni necessarie per altre densità di pixel. Di seguito è riportato un elenco con le densità dei pixel, il moltiplicatore applicato alla dimensione di base (320 x 320 dp), le dimensioni risultanti in pixel e la posizione in cui deve essere aggiunta l'immagine nel progetto Android Studio.

Densità	Moltiplicatore	Dimensioni	Località progetto
mdpi (base di riferimento)	1x	320x320 px	/res/drawable-mdpi/
ldpi	0,75x	240x240 px	/res/drawable-ldpi/
hdpi	1,5x	480x480 px	/res/drawable-hdpi/
xhdpi	2x	640x640 px	/res/drawable-xhdpi/
xxhdpi	3,0x	960x960 px	/res/drawable-xxhdpi/
xxxhdpi	4,0x	1280x1280 px	/res/drawable-xxxhdpi/

Aggiornamento dell'applicazione

Dopo aver generato le immagini per la schermata iniziale, è il momento di aggiungere gli elementi necessari configurazioni al progetto.

Per prima cosa, aggiungi un content-provider al manifest Android (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>

A questo punto, aggiungi la risorsa res/xml/filepaths.xml e specifica il percorso della schermata iniziale di due opzioni:

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

Infine, aggiungi meta-tags al file manifest Android per personalizzare la funzionalità LauncherActivity:

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

Assicurati che il valore dell'attributo android.support.customtabs.trusted.FILE_PROVIDER_AUTHORITY corrisponde al valore definito dell'attributo android:authorities all'interno della Tag provider.

Impostazione di LauncherActivity trasparente

Inoltre, assicurati che l'attività Avvio app sia trasparente per evitare che venga visualizzata una schermata bianca che viene mostrato prima dello spruzzo impostando un tema traslucido per la LauncherActivity:

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

Non vediamo l'ora di scoprire cosa realizzeranno gli sviluppatori con Trusted Web Attività. Per lasciare un feedback, contattaci all'indirizzo @ChromiumDev.