La configuration des activités Web fiables peut être un peu délicate, en particulier si vous ne souhaitez afficher que 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 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. Chrome 72 ou version ultérieure fonctionne. La compatibilité avec d'autres navigateurs est en cours de développement.
- 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 sécurisée, le navigateur vérifie que la validation Digital Asset Links est effectuée. Cette opération 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.
Vous pouvez installer la CLI à 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 à le faire, car cela 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 compiler 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:
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 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 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, 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 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 éléments numériques et votre clé de signature, consultez notre article détaillé sur les liens vers des éléments numériques.
Vérifier 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 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.