Les activités Web fiables peuvent être difficiles à configurer, en particulier si vous souhaitez simplement afficher votre site Web. Ce guide vous explique comment créer un petit projet qui utilise des activités Web fiables.
À la fin de ce guide, vous pourrez :
- utiliser Bubblewrap pour créer une application qui utilise une activité Web fiable et qui réussit la validation ;
- comprendre quand vos clés de signature sont utilisées ;
- déterminer la signature avec laquelle votre application Android est créée ;
- 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
- 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 mobile compatible avec les activités Web fiables
- Un site Web que vous souhaitez afficher dans l'activité Web fiable
Vous pouvez utiliser une activité Web fiable pour votre application Android afin de lancer un onglet de navigateur en plein écran, sans aucune interface utilisateur de navigateur. Cette fonctionnalité est limitée aux sites Web dont vous êtes propriétaire. Vous prouvez votre propriété en configurant Digital Asset Links.
Lorsque vous lancez une activité Web fiable, le navigateur vérifie les liens Digital Asset Links. Si la validation échoue, le navigateur affiche votre site Web sous forme d'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 d'une activité Web fiable.
Installez l'interface CLI en exécutant 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 les téléchargements automatiques, car cela permet de s'assurer que les dépendances sont correctement configurées. Consultez la documentation Bubblewrap pour utiliser un kit de développement Java (JDK) ou une installation d'outils de ligne de commande Android existants.
Initialiser et créer un projet
Initialisez un projet Android qui encapsule une PWA :
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é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 pour être 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 la commande suivante :
bubblewrap install
Vous pouvez également utiliser l'outil adb.
adb install app-release-signed.apk
L'application devrait maintenant être disponible sur le lanceur d'applications de l'appareil.
Lorsque vous ouvrez l'application, vous remarquez que votre site Web est lancé sous forme d'onglet personnalisé, et non d'activité Web fiable. En effet, nous n'avons pas encore configuré la validation de nos liens Digital Asset Links.
Alternatives d'interface utilisateur graphique (IUG) pour Bubblewrap
PWA Builder fournit une interface graphique qui utilise la bibliothèque Bubblewrap pour générer des projets d'activité Web fiable. Découvrez comment utiliser PWA Builder pour créer une application Android qui ouvre votre PWA.
Clés de signature
Les liens Digital Asset Links tiennent compte de la clé avec laquelle un APK a été signé. Une cause fréquente d'échec de la validation est l'utilisation d'une signature incorrecte. (N'oubliez pas que si la validation échoue, votre site Web s'ouvre sous forme d'onglet personnalisé avec l'interface utilisateur du navigateur en haut de la page.) Lorsque Bubblewrap crée l'application, un APK est créé avec une clé configurée lors de 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 relation avec Bubblewrap et Google Play.
Configurer votre fichier de lien d'élément
Les liens Digital Asset Links se composent essentiellement d'un fichier sur votre site Web qui pointe vers votre application et de métadonnées dans votre application qui pointent vers votre site Web.
Après avoir créé votre assetlinks.json fichier, importez-le sur votre site Web dans .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 les liens Digital Asset Links et leur relation avec votre clé de signature, consultez cet article : deep dive on Digital Asset Links.
Vérifier votre navigateur
Une activité Web fiable tente de respecter le choix de 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 est lancé. Sinon, si un navigateur installé est compatible avec les activités Web fiables, il est sélectionné. Enfin, le comportement par défaut consiste à revenir à un mode d'onglets personnalisés.
Cela signifie que si vous déboguez un élément lié aux 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 le navigateur 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 fiable fonctionnelle et de suffisamment de connaissances pour déboguer en cas d'échec de la validation. Sinon, consultez d'autres concepts Android pour les développeurs Web.
Pour la suite, créez une icône pour votre application. Une fois cette opération terminée, vous pouvez envisager de déployer votre application sur le Play Store.