Configurer une activité Web sécurisée ne nécessite pas que les développeurs créent du code Java, mais Android Studio est requis. Ce guide a été créé avec Android Studio 3.3. Consultez la documentation pour savoir comment l'installer.
Créer un projet d'activité Web fiable
Lors de l'utilisation d'activités Web fiables, le projet doit cibler le niveau d'API 16 ou supérieur.
Ouvrez Android Studio, puis cliquez sur Start a new Android Studio project (Démarrer un nouveau projet Android Studio).
Android Studio vous invite à choisir un type d'activité. Étant donné que les activités Web fiables utilisent une activité fournie par la bibliothèque Support, sélectionnez Add No Activity (N'ajouter aucune activité), puis cliquez sur Next (Suivant).
À l'étape suivante, l'assistant vous invite à renseigner les configurations du projet. Voici une brève description de chaque champ:
- Name (Nom) : nom qui sera utilisé pour votre application dans le lanceur Android.
- Package Name (Nom du package) : identifiant unique pour les applications Android sur le Play Store et sur les appareils Android. Consultez la documentation pour en savoir plus sur les exigences et les bonnes pratiques liées à la création de noms de package pour les applications Android.
- Save location (Emplacement d'enregistrement) : Android Studio crée le projet dans le système de fichiers.
- Langage:le projet ne nécessite pas d'écrire de code Java ou Kotlin. Sélectionnez Java par défaut.
- Niveau d'API minimal:la bibliothèque Support nécessite au moins le niveau d'API 16. Sélectionnez l'API 16 (n'importe quelle version ci-dessus).
Ne cochez pas les autres cases, car nous n'utiliserons pas les artefacts d'applis instantanées ni d'artefacts AndroidX, puis cliquez sur Finish (Terminer).
Obtenir la bibliothèque Trusted Web Activity Support
Pour configurer la bibliothèque d'activités Web fiables dans le projet, vous devez modifier le fichier de compilation de l'application. Recherchez la section Gradle Scripts (Scripts Gradle) dans le Project Navigator (Navigateur de projets).
Deux fichiers appelés build.gradle peuvent prêter à confusion. Les descriptions entre parenthèses aident à identifier le fichier correct.
Le fichier que nous recherchons est celui dont le nom est suivi du module Module.
La bibliothèque des activités Web fiables utilise les fonctionnalités de Java 8, et la première modification active Java 8. Ajoutez une section compileOptions en bas de la section android, comme ci-dessous:
android {
...
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
}
L'étape suivante consiste à ajouter la bibliothèque Trusted Web Activity Support au projet. Ajoutez une dépendance à la section dependencies:
dependencies {
implementation 'com.google.androidbrowserhelper:androidbrowserhelper:2.2.0'
}
Android Studio affiche une invite vous demandant à nouveau de synchroniser le projet. Cliquez sur le lien Sync Now (Synchroniser) et synchronisez-le.
Lancer l'activité Web fiable
Pour configurer l'activité Web fiable, vous devez modifier le fichier manifeste d'application Android.
Dans le Project Navigator, développez la section app, suivie des fichiers manifestes, puis double-cliquez sur AndroidManifest.xml pour ouvrir le fichier.
Comme nous avons demandé à Android Studio de ne pas ajouter d'activité à notre projet lors de sa création, le fichier manifeste est vide et ne contient que la balise de l'application.
Ajoutez l'activité Web fiable en insérant une balise activity dans la balise 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>
Les balises ajoutées au fichier XML sont un fichier manifeste d'application Android standard. Deux informations pertinentes sont disponibles dans le contexte des activités Web fiables:
- La balise
meta-dataindique à l'activité Web fiable quelle URL elle doit ouvrir. Remplacez l'attributandroid:valuepar l'URL de la PWA que vous souhaitez ouvrir. Dans cet exemple, il s'agit dehttps://airhorner.com. - La deuxième balise
intent-filterpermet à l'activité Web fiable d'intercepter les intents Android qui ouvrenthttps://airhorner.com. L'attributandroid:hostdans la balisedatadoit pointer vers le domaine ouvert par l'activité Web fiable.
La section suivante explique comment configurer Digital AssetLinks pour vérifier la relation entre le site Web et l'application, et comment supprimer la barre d'URL.
Supprimer la barre d'URL
Les activités Web fiables nécessitent une association entre l'application Android et le site Web pour supprimer la barre d'URL.
Cette association est créée via Digital Asset Links et doit être établie des deux manières, en créant des liens depuis l'application vers le site Web et depuis le site Web vers l'application.
Vous pouvez configurer l'application pour la validation du site Web et configurer Chrome de manière à passer la validation du site Web à l'application à des fins de débogage.
Associer l'application au site Web
Ouvrez le fichier de ressources de chaîne app > res > values > strings.xml et ajoutez l'instruction Digital AssetLinks ci-dessous:
<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>
Modifiez le contenu de l'attribut site pour qu'il corresponde au schéma et au domaine ouverts par l'activité Web fiable.
Revenez au fichier manifeste de l'application Android, AndroidManifest.xml, créez un lien vers l'instruction en ajoutant une nouvelle balise meta-data, mais cette fois en tant qu'enfant de la balise 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>
Nous avons à présent établi une relation entre l'application Android et le site Web. Il est utile de déboguer cette partie de la relation sans créer la validation du site Web à l'application.
Pour ce faire, procédez comme suit:
Activer le mode débogage
- Ouvrez Chrome sur l'appareil de développement, accédez à
chrome://flags, recherchez l'élément intitulé Enable command line on non root devices (Activer la ligne de commande sur les appareils non rootés), définissez-le sur ACTIVÉ, puis redémarrez le navigateur. - Ensuite, dans l'application Terminal de votre système d'exploitation, utilisez Android Debug Bridge (installé avec Android Studio) et exécutez la commande suivante:
adb shell "echo '_ --disable-digital-asset-link-verification-for-url=\"https://airhorner.com\"' > /data/local/tmp/chrome-command-line"
Fermez Chrome, puis relancez votre application depuis Android Studio. L'application devrait maintenant s'afficher en plein écran.
Associer le site Web à l'application
Le développeur doit collecter deux informations à partir de l'application pour créer l'association:
- Package Name (Nom du package) : la première information correspond au nom du package de l'application. Il s'agit du même nom de package généré lors de la création de l'application. Il se trouve également dans le module
build.gradle, sous Scripts Gradle > build.gradle (Module: app). Il s'agit de la valeur de l'attributapplicationId. - Empreinte SHA-256:les applications Android doivent être signées pour pouvoir être importées sur le Play Store. La même signature est utilisée pour établir la connexion entre le site Web et l'application via l'empreinte SHA-256 de la clé d'importation.
La documentation Android explique en détail comment générer une clé à l'aide d'Android Studio. Veillez à prendre note du chemin d'accès, de l'alias et des mots de passe du magasin de clés, car vous en aurez besoin à l'étape suivante.
Extrayez l'empreinte SHA-256 à l'aide de keytool, à l'aide de la commande suivante:
keytool -list -v -keystore [path] -alias [alias] -storepass [password] -keypass [password]
La valeur de l'empreinte SHA-256 est affichée dans la section des empreintes du certificat. Voici un exemple de résultat:
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
Une fois ces informations à portée de main, accédez au générateur Assetlinks, renseignez les champs, puis cliquez sur Générer l'instruction. Copiez l'instruction générée et diffusez-la à partir de votre domaine, à partir de l'URL /.well-known/assetlinks.json.
Créer une icône
Lorsqu'Android Studio crée un projet, il est associé à une icône par défaut. En tant que développeur, vous devrez créer votre propre icône et différencier votre application des autres sur le Lanceur d'applications Android.
Android Studio contient Image Asset Studio, qui fournit les outils nécessaires pour créer les icônes appropriées pour chaque résolution et la forme dont votre application a besoin.
Dans Android Studio, accédez à File > New > Image Asset, sélectionnez Launcher Icons (Adaptative and Legacy) et suivez les étapes de l'assistant afin de créer une icône personnalisée pour l'application.
Générer un APK signé
Une fois le fichier assetlinks en place dans votre domaine et la balise asset_statements configurée dans l'application Android, l'étape suivante consiste à générer une application signée. Là encore, les étapes à suivre sont largement documentées.
L'APK de sortie peut être installé sur un appareil de test, à l'aide d'adb:
adb install app-release.apk
Si l'étape de vérification échoue, vous pouvez vérifier les messages d'erreur à l'aide d'Android Debug Bridge, à partir du terminal de votre système d'exploitation et avec l'appareil de test connecté.
adb logcat | grep -e OriginVerifier -e digital_asset_links
Une fois l'APK importé généré, vous pouvez importer l'application sur le Play Store.
Ajouter un écran de démarrage
À partir de Chrome 75, les activités Web fiables sont compatibles avec les écrans de démarrage. L'écran de démarrage peut être configuré en ajoutant de nouveaux fichiers image et de nouvelles configurations au projet.
Veillez à passer à Chrome 75 ou à une version ultérieure et à utiliser la dernière version de la bibliothèque Trusted Web Activity Support.
Générer les images de l'écran de démarrage
Les appareils Android peuvent avoir différentes tailles d'écran et densités de pixels. Pour vous assurer que l'écran de démarrage s'affiche correctement sur tous les appareils, vous devez générer une image pour chaque densité de pixels.
L'explication complète des pixels indépendants de l'affichage (dp ou dip) dépasse le cadre de cet article, mais nous pouvons par exemple créer une image de 320 x 320 dp, qui représente un carré de 2 x 2 pouces sur un écran d'appareil de n'importe quelle densité, et qui équivaut à 320 x 320 pixels avec la densité mdpi.
À partir de là, nous pouvons déduire les tailles nécessaires pour d'autres densités de pixels. Vous trouverez ci-dessous la liste des densités de pixels, le multiplicateur appliqué à la taille de base (320 x 320 dp), la taille obtenue en pixels et l'emplacement où l'image doit être ajoutée dans le projet Android Studio.
| Densité | Multiplicateur | Taille | Emplacement du projet |
|---|---|---|---|
| mdpi (référence) | x 1 | 320x320 px | /res/drawable-mdpi/ |
| ldpi | x 0,75 | 240x240 px | /res/drawable-ldpi/ |
| hdpi | x 1,5 | 480x480 px | /res/drawable-hdpi/ |
| xhdpi | x 2 | 640x640 px | /res/drawable-xhdpi/ |
| xxhdpi | 3,0x | 960x960 px | /res/drawable-xxhdpi/ |
| xxxhdpi | 4,0x | 1280x1280 px | /res/drawable-xxxhdpi/ |
Mettre à jour l'application
Une fois les images de l'écran de démarrage générées, vous pouvez ajouter les configurations nécessaires au projet.
Tout d'abord, ajoutez un content-provider au fichier manifeste 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>
Ensuite, ajoutez la ressource res/xml/filepaths.xml et spécifiez le chemin d'accès à l'écran de démarrage twa:
<paths>
<files-path path="twa_splash/" name="twa_splash" />
</paths>
Enfin, ajoutez meta-tags au fichier manifeste Android pour personnaliser 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>
Assurez-vous que la valeur de la balise android.support.customtabs.trusted.FILE_PROVIDER_AUTHORITY correspond à la valeur définie de l'attribut android:authorities dans la balise provider.
Rendre LauncherActivity transparent
De plus, assurez-vous que "LauncherActivity" est transparent pour éviter qu'un écran blanc ne s'affiche avant l'écran de démarrage. Pour ce faire, définissez un thème translucide pour "LauncherActivity" :
<application>
...
<activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity"
android:theme="@android:style/Theme.Translucent.NoTitleBar">
...
</activity>
</application>
Nous sommes impatients de découvrir ce que les développeurs créent avec des activités Web fiables. Pour nous faire part de vos commentaires, contactez-nous à l'adresse @ChromiumDev.