Guide de démarrage rapide

Peter Conn
Peter Conn

Les activités Web fiables peuvent être un peu délicates à 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 et englobe 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 réussit la validation.
  • Comprendre quand vos clés de signature sont utilisées
  • Soyez capable 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 aurez 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).
  • Navigateur compatible avec l'activité Web fiable sur votre téléphone de développement. Vous pouvez utiliser Chrome 72 ou une version ultérieure. Elle sera bientôt compatible avec d'autres navigateurs.
  • Site Web que vous souhaitez consulter dans l'activité Web fiable.

Une activité Web fiable permet à votre application Android de lancer un onglet de navigateur en plein écran sans aucune UI de navigateur. Cette fonctionnalité est limitée aux sites Web dont vous êtes le propriétaire. Vous devez le prouver en configurant Digital Asset Links. Nous y reviendrons plus tard.

Lorsque vous lancez une activité Web de confiance, le navigateur vérifie que le processus de validation via Digital Asset Links s'appelle la validation. Si la validation échoue, le navigateur affiche votre site Web dans 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 progressive web apps dans des applications Android à l'aide de l'activité Web sécurisée.

Pour installer la CLI, exécutez la commande suivante:

npm i -g @bubblewrap/cli

Configurer l'environnement

Lorsque vous exécutez Bubblewrap pour la première fois, il propose de télécharger et d'installer automatiquement les dépendances externes requises. Nous vous recommandons d'autoriser l'outil à le faire, car cela garantit que les dépendances sont correctement configurées. Consultez la documentation Bubblewrap pour utiliser un kit de développement Java (JDK) existant ou une installation d'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 et 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écution

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

Le format bulle fournit une commande permettant d'installer et de tester l'application sur un appareil local. Avec 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 maintenant être disponible dans le lanceur d'applications de l'appareil. À l'ouverture de l'application, vous remarquerez que votre site Web est lancé sous la forme d'un onglet personnalisé, et non d'une activité Web fiable. En effet, nous n'avons pas encore configuré la validation Digital Asset Links, mais vous devez d'abord...

Alternatives aux interfaces utilisateur graphiques (IUG) pour le papier bulle

PWA Builder fournit une interface IUG qui utilise la bibliothèque Bubblewrap pour générer des 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 sur les clés de signature

Digital Asset Links tient compte de la clé avec laquelle un APK a été signé. L'utilisation d'une signature incorrecte est l'une des causes les plus courantes d'un échec de validation. Notez que si la validation échoue, votre site Web s'ouvrira dans un 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é à l'étape init. Toutefois, lorsque vous publiez votre application sur Google Play, une autre clé peut être créée pour vous, selon la façon dont vous choisissez de gérer les clés de signature. En savoir plus sur les clés de signature et leur lien avec le papier bulle et Google Play

Digital Asset Links se compose essentiellement d'un fichier sur votre site Web qui pointe vers votre application, et de certaines métadonnées dans votre application qui redirigent 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 validée correctement par le navigateur. Consultez une présentation détaillée de Digital Asset Links pour en savoir plus sur son lien avec votre clé de signature.

Vérification de votre navigateur

Une activité Web de confiance tente 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, il sera lancé. À défaut, si un navigateur installé est compatible avec les activités Web fiables, il sera choisi. Enfin, le comportement par défaut consiste à revenir au mode Onglets personnalisés.

Cela signifie que si vous déboguez quelque chose en rapport avec des activités Web fiables, vous devez vous assurer d'utiliser le navigateur que vous pensez être. 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, nous espérons que vous disposerez de toutes les informations nécessaires pour vous familiariser avec l'activité Web sécurisée et résoudre ce qui se passe lorsque la validation échoue. Si ce n'est pas le cas, consultez d'autres concepts Android pour les développeurs Web ou signalez un problème GitHub en consultant ces documents.

Pour les prochaines étapes, je vous recommande de commencer par créer une icône pour votre application. Ensuite, vous pouvez envisager de déployer votre application sur le Play Store.