La configuration d'une activité Web fiable ne nécessite pas que les développeurs créent du code Java, mais Android Studio obligatoire. Ce guide a été créé avec Android Studio 3.3. Consultez la documentation pour savoir comment l'installer.
Créer un projet Activité Web fiable
Lorsque vous utilisez des activités Web de confiance, 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 invitera à choisir un type d'activité. Étant donné que les activités Web fiables utilisent Activité fournie par la bibliothèque d'assistance, sélectionnez Add No Activity (N'ajouter aucune activité), puis cliquez sur Suivant.
À l'étape suivante, l'assistant vous demandera des configurations pour le projet. Voici un brève description de chaque champ:
- Nom:nom utilisé pour votre application sur le Lanceur d'applications Android.
- Package Name (Nom du package) : identifiant unique des applications Android sur le sur le Play Store et sur les appareils Android. Consultez le documentation pour en savoir plus sur les exigences et les bonnes pratiques de création de packages pour les applications Android.
- Save location (Emplacement d'enregistrement) : emplacement où Android Studio créera le projet dans le fichier. du système d'exploitation.
- Langage:le projet ne nécessite aucun code Java ou Kotlin. Sélectionnez Java comme application 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 applis instantanées ou AndroidX, puis cliquez sur Finish (Terminer).
Obtenir la bibliothèque d'assistance pour les activités Web fiables
Pour configurer la bibliothèque Activité Web fiable dans le projet, vous devez modifier l'application
fichier de compilation. Recherchez la section Gradle Scripts (Scripts Gradle) dans le Navigateur de projets.
Il existe deux fichiers appelés build.gradle, ce qui peut prêter à confusion.
les descriptions entre parenthèses aident à
identifier la bonne.
Le fichier que nous recherchons est celui avec le module Module à côté de son nom.
La bibliothèque Trusted Web Activity utilise
Fonctionnalités de Java 8
La première active Java 8. Ajoutez une section compileOptions au
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 Support pour les activités Web de confiance au projet. Ajouter un nouveau champ
à la section dependencies:
dependencies {
implementation 'com.google.androidbrowserhelper:androidbrowserhelper:2.2.0'
}
Android Studio affiche une invite vous demandant de synchroniser à nouveau le projet. Cliquez sur le lien Sync Now (Synchroniser) et synchronisez-le.
Lancer l'activité Web fiable
La configuration de l'activité Web fiable s'effectue en modifiant le Fichier manifeste d'application Android
Dans le Navigateur de projets, développez la section app, puis le nom
fichiers manifestes et double-cliquez sur AndroidManifest.xml pour ouvrir le fichier.
Comme nous avons demandé à Android Studio de ne pas ajouter d'activité à notre projet lorsque le fichier manifeste est vide et ne contient que le tag d'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 Fichier manifeste d'application Android Deux informations pertinentes sont disponibles dans le contexte du site Web de confiance. Activités:
- La balise
meta-dataindique à l'activité Web fiable l'URL à ouvrir. Modifier L'attributandroid:valuepar l'URL de la PWA que vous souhaitez ouvrir. Dans dans cet exemple, il s'agit dehttps://airhorner.com. - La deuxième balise
intent-filterpermet à l'activité Web fiable d'intercepter Android Intents qui ouvrenthttps://airhorner.com. 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 supprimer la barre d'URL.
Supprimer la barre d'adresse
Les activités Web fiables nécessitent une association entre l'application Android et le site Web à supprimer pour supprimer la barre d'adresse.
Cette association est créée via Digital Asset Links et l'association doit être établie des deux manières, de l'application au site Web et du site Web à l'application.
Vous pouvez configurer la validation de l'application au site Web et configurer Chrome pour ignorer cette étape la validation du site web vers l'application, à des fins de débogage.
Établir une association entre l'application et le site Web
Ouvrez le fichier de ressources de chaîne app > res > values > strings.xml et ajoutez le
Déclaration 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
ouvert par l'activité Web fiable.
De retour dans le fichier manifeste d'application Android, AndroidManifest.xml, lien vers
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 établi une relation entre l'application Android et sur votre site Web. Il est utile de déboguer cette partie de la relation sans créer du site Web à la validation de l’application.
Voici comment tester cela sur un appareil de développement:
Activer le mode de débogage
- Ouvrez Chrome sur l'appareil de développement, accédez à
chrome://flags, puis recherchez pour un élément intitulé Activer la ligne de commande sur les appareils qui ne sont pas en mode root, puis modifiez-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), puis 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 à partir d'Android Studio. La l'application devrait maintenant s'afficher en plein écran.
Établir une association entre le site Web et l'application
Le développeur doit collecter deux informations à partir du application afin de créer l'association:
- Nom du package:la première information est le nom du package de l'application. Ce
correspond au nom de package généré lors de la création de l'application. Vous trouverez également
dans le module
build.gradle, sous Scripts Gradle > build.gradle (Module: app). Il s'agit de la valeur duapplicationId. - Empreinte SHA-256:les applications Android doivent être signées pour être importées sur le Play Store. La même signature est utilisée pour établir entre le site Web et l'application via l'empreinte SHA-256 du la clé d'importation.
La documentation Android explique en détail comment générer une clé à l'aide d'Android Studio. Prenez 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 la méthode keytool, en exécutant la commande suivante:
keytool -list -v -keystore [path] -alias [alias] -storepass [password] -keypass [password]
La valeur de l'empreinte SHA-256 se trouve sous le certificat les empreintes digitales. 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
Munissez-vous de ces deux informations grâce au générateur de liens d'assets,
Renseignez les champs, puis cliquez sur Generate Statement (Générer l'instruction). Copier l'instruction générée
et de la diffuser à 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 doté d'une icône par défaut. En tant que développeur, vous devrez créer votre propre icône et différencier d'autres utilisateurs sur Android Launcher.
Android Studio contient Image Asset Studio, qui fournit les outils nécessaires pour créer les bonnes icônes, pour chaque et adapter sa résolution aux besoins de votre application.
Dans Android Studio, accédez à File > New > Image Asset, sélectionnez
Launcher Icons (Adaptative and Legacy) et suivez les instructions de l'assistant.
afin de créer une icône personnalisée pour l'application.
Générer un APK signé
Avec le fichier assetlinks en place dans votre domaine et la balise asset_statements
configurés dans l'application Android, l'étape suivante consiste à générer une application signée.
Encore une fois, les étapes à suivre
documenté.
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 validation échoue, il est possible de rechercher d'éventuelles erreurs. à l'aide d'Android Debug Bridge, du terminal de votre système d'exploitation et de l'API appareil de test connecté.
adb logcat | grep -e OriginVerifier -e digital_asset_links
Une fois l'APK d'importation 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. Vous pouvez configurer l'écran de démarrage en ajoutant quelques nouveaux fichiers image et configurations au projet.
Veillez à passer à Chrome 75 ou à une version ultérieure et à utiliser le dernière version de la bibliothèque Support pour les activités Web fiables.
Générer les images de l'écran de démarrage
Les appareils Android peuvent avoir différentes tailles d'écran et les 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 l'image pour chaque densité de pixels.
Explication complète des pixels indépendants de l'affichage (dp ou dip) dépasse le cadre de cet article, mais un exemple consiste à créer une image est de 320 x 320 dp, ce qui représente un carré de 2 x 2 pouces sur l'écran d'un appareil de n'importe quelle densité. Elle équivaut à 320 x 320 pixels pour la densité mdpi.
Nous pouvons alors déduire les tailles requises pour d'autres densités de pixels. Vous trouverez ci-dessous une liste avec les densités en pixels, le multiplicateur appliqué à la taille de base (320 x 320 dp), ce qui correspond à la taille en pixels et à l'emplacement où l'image doit être ajoutée dans la 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
Maintenant que les images de l'écran de démarrage ont été générées, vous pouvez ajouter de configuration au projet.
Tout d'abord, ajoutez un fournisseur de contenu (content-provider)
dans le 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>
Ajoutez ensuite la ressource res/xml/filepaths.xml et spécifiez le chemin d'accès à l'écran de démarrage de l'application:
<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 android.support.customtabs.trusted.FILE_PROVIDER_AUTHORITY
correspond à la valeur définie de l'attribut android:authorities dans la
Balise provider.
Rendre transparente l'élément LauncherActivity
De plus, assurez-vous que l'élément "LauncherActivity" est transparent pour éviter l'affichage d'un écran blanc. s'affichant avant l'écran d'accueil en définissant un thème translucide pour "LaunchActivity" :
<application>
...
<activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity"
android:theme="@android:style/Theme.Translucent.NoTitleBar">
...
</activity>
</application>
Nous avons hâte de découvrir ce que les développeurs créent avec Activités. Pour nous faire part de vos commentaires, contactez-nous à l'adresse @ChromiumDev.