Guide de démarrage rapide

Peter Conn
Peter Conn

Les activités de confiance sur le Web peuvent être un peu difficiles à configurer, surtout 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 pièges.

À la fin de ce guide, vous saurez:

  • Vous avez utilisé Bubblewrap pour créer une application qui utilise une activité Web fiable et qui réussit la validation.
  • Découvrez quand vos clés de signature sont utilisées.
  • Soyez en mesure de déterminer la signature avec laquelle votre application Android est créé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. Chrome 72 ou version ultérieure fonctionne. D'autres navigateurs seront bientôt pris en charge.
  • Un site Web que vous souhaitez afficher dans l'Activité Web fiable

Une activité Web fiable 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 le processus de paiement Digital Asset Links s'effectue. Ce processus s'appelle la validation. Si la validation échoue, le navigateur affichera votre site Web en tant qu'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:

npm i -g @bubblewrap/cli

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 d'autoriser l'outil à effectuer cette opération, car il garantit que les dépendances sont correctement configurées. Consultez la documentation Bubblewrap pour utiliser une installation existante du kit de développement Java (JDK) ou des outils de ligne de commande Android.

Initialiser et créer le projet

Pour initialiser un projet Android qui encapsule une PWA, exécutez la commande init:

bubblewrap init --manifest=https://my-twa.com/manifest.json

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 la commande suivante:

bubblewrap build

Exécuter

L'étape de compilation génère un fichier nommé 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 pour installer et tester l'application sur un appareil local. Une fois l'appareil de développement connecté à l'ordinateur, exécutez la commande suivante:

bubblewrap install

Vous pouvez également utiliser l'outil adb.

adb install app-release-signed.apk

L'application devrait désormais être 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 d'abord…

Alternatives à l'interface utilisateur graphique (IUG) pour Bubblewrap

PWA Builder fournit une interface utilisateur graphique qui utilise la bibliothèque Bubblewrap pour générer des projets d'activité Web fiable. 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, vous allez lancer votre site Web 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

Les Digital Asset Links consistent essentiellement en un fichier sur votre site Web qui pointe vers votre application et en quelques 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'emplacement .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 s'efforcera de respecter le navigateur par défaut de l'utilisateur. Si le navigateur par défaut de l'utilisateur est compatible avec les activités Web fiables, il sera lancé. À 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é:

> adb logcat -v brief | grep -e TWAProviderPicker
D/TWAProviderPicker(17168): Found TWA provider, finishing search: com.google.android.apps.chrome

É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 lorsque la validation échoue. Si ce n'est pas le cas, consultez les autres concepts Android pour les développeurs Web ou signalez un problème GitHub en consultant 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.