La configuration des activités Web fiables peut s'avérer un peu délicate, en particulier si vous souhaitez simplement afficher votre site Web. Ce guide vous explique comment créer un projet de base qui utilise des activités Web fiables, en détaillant tous les points à prendre en compte.
À la fin de ce guide, vous saurez:
- Vous avez utilisé Bubblewrap pour créer une application qui utilise une activité Web fiable et qui passe la validation.
- Comprendre quand vos clés de signature sont utilisées
- être en mesure de déterminer la signature avec laquelle votre application Android est compilée ;
- Savoir créer un fichier Digital Asset Links de base
Pour suivre ce guide, vous avez besoin des éléments suivants:
- Node.js 10 ou version ultérieure installé sur l'ordinateur de développement
- Un téléphone ou un émulateur Android connecté et configuré pour le développement (Activez le débogage USB si vous utilisez un téléphone physique)
- Un navigateur compatible avec l'activité Web fiable sur votre téléphone de développement
- Il s'agit d'un site Web que vous souhaitez afficher dans le cadre de l'activité Web fiable
Une activité Web sécurisée permet à votre application Android de lancer un onglet de navigateur en plein écran sans interface utilisateur de navigateur. Cette fonctionnalité est limitée aux sites Web que vous possédez. Pour le prouver, vous devez configurer Digital Asset Links. Nous en reparlerons plus tard.
Lorsque vous lancez une activité Web fiable, le navigateur vérifie que Digital Asset Links s'exécute. Ce processus s'appelle la validation. Si la validation échoue, le navigateur affiche votre site Web sous la forme d'un onglet personnalisé.
Installer et configurer Bubblewrap
Bubblewrap est un ensemble de bibliothèques et un outil de ligne de commande (CLI) pour Node.js qui aide les développeurs à générer, créer et exécuter des applications Web progressives dans des applications Android à l'aide de l'activité Web sécurisée.
La CLI peut être installée à l'aide de la commande suivante:
Configurer l'environnement
Lorsque vous exécutez Bubblewrap pour la première fois, il vous propose de télécharger et d'installer automatiquement les dépendances externes requises. Nous vous recommandons de laisser l'outil le faire, car il garantit que les dépendances sont configurées correctement. Consultez la documentation de Bubblewrap pour utiliser une installation existante d'un kit de développement Java (JDK) ou d'outils de ligne de commande Android.
Initialiser et compiler le projet
Pour initialiser un projet Android qui encapsule une PWA, exécutez la commande init:
Bubblewrap lit le fichier manifeste Web, demande aux développeurs de confirmer les valeurs à utiliser dans le projet Android, puis génère le projet à l'aide de ces valeurs. Une fois le projet généré, générez un APK en exécutant:
Exécuter
L'étape de compilation génère un fichier appelé app-release-signed.apk. Ce fichier peut être installé sur un appareil de développement à des fins de test ou importé sur le Play Store pour être publié.
Bubblewrap fournit une commande permettant d'installer et de tester l'application sur un appareil local. Une fois l'appareil de développement connecté à l'ordinateur, exécutez les commandes suivantes:
Vous pouvez également utiliser l'outil adb.
Remarque: L'outil de ligne de commande **adb** se trouve dans les outils de ligne de commande Android dans **android_sdk/platform-tools/**.
L'application est désormais disponible dans le lanceur d'applications de l'appareil. Lorsque vous ouvrez l'application, vous remarquerez que votre site Web est lancé en tant qu'onglet personnalisé, et non en tant qu'activité Web fiable. En effet, nous n'avons pas encore configuré la validation des liens vers des composants numériques. Mais avant cela…
Alternatives à l'interface utilisateur graphique (IUG) pour Bubblewrap
PWA Builder fournit une interface IUG qui utilise la bibliothèque Bubblewrap pour permettre la génération de projets Trusted Web Activity. Pour en savoir plus sur l'utilisation de PWA Builder pour créer une application Android qui ouvre votre PWA, consultez cet article de blog.
Remarque concernant les clés de signature
Digital Asset Links tient compte de la clé avec laquelle un APK a été signé. Une cause courante d'échec de la validation est l'utilisation d'une signature incorrecte. (N'oubliez pas que si la validation échoue, votre site Web sera lancé en tant qu'onglet personnalisé avec l'interface utilisateur du navigateur en haut de la page.) Lorsque Bubblewrap compile l'application, un APK est créé avec une configuration de clé lors de l'étape init. Toutefois, lorsque vous publiez votre application sur Google Play, une autre clé peut être créée pour vous, en fonction de la manière dont vous choisissez de gérer les clés de signature. En savoir plus sur les clés de signature et leur lien avec Bubblewrap et Google Play
Configurer votre fichier d'association d'assets
Les Digital Asset Links consistent essentiellement en un fichier sur votre site Web qui pointe vers votre application et en certaines métadonnées dans votre application qui pointent vers votre site Web.
Après avoir créé votre fichier assetlinks.json, importez-le sur votre site Web à l'adresse .well-known/assetlinks.json par rapport à la racine) afin que votre application puisse être correctement validée par le navigateur. Pour en savoir plus sur le lien entre les liens vers des composants numériques et votre clé de signature, consultez notre article détaillé sur les liens vers des composants numériques.
Vérification de votre navigateur...
Une activité Web fiable tentera de respecter le navigateur choisi par défaut par l'utilisateur. Si le navigateur par défaut de l'utilisateur est compatible avec les activités Web fiables, elle sera lancée. À défaut, si un navigateur installé est compatible avec les activités Web fiables, il sera sélectionné. Enfin, le comportement par défaut consiste à revenir au mode Custom Tabs.
Par conséquent, si vous déboguez quelque chose en rapport avec les activités Web fiables, vous devez vous assurer que vous utilisez le navigateur que vous pensez utiliser. Vous pouvez utiliser la commande suivante pour vérifier quel navigateur est utilisé:
Étapes suivantes
Si vous avez suivi ce guide, vous devriez disposer d'une activité Web sécurisée fonctionnelle et de suffisamment de connaissances pour déboguer le problème en cas de validation échouée. Si ce n'est pas le cas, consultez d'autres concepts Android pour les développeurs Web ou signalez un problème GitHub concernant ces documents.
Pour la suite, je vous recommande de commencer par créer une icône pour votre application. Une fois cela fait, vous pouvez envisager de déployer votre application sur le Play Store.