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, pour couvrir 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 est validée.
- 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.
- Vous devez être capable de 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 (Activer le débogage USB si si vous utilisez un téléphone physique).
- Navigateur compatible avec l'activité Web fiable de votre téléphone de développement. Chrome 72 ou version ultérieure est compatible. D'autres navigateurs seront bientôt pris en charge.
- Il s'agit d'un site Web que vous souhaitez voir dans l'activité Web fiable.
Une activité Web fiable permet à votre application Android de lancer un onglet de navigateur en plein écran sans n'importe quelle interface utilisateur. Cette fonctionnalité est limitée aux sites Web dont vous êtes le propriétaire. Vous le prouvez en configurant Digital Asset Links. Nous en reparlerons plus tard.
Lorsque vous lancez une activité Web fiable, le navigateur vérifie que Digital Asset Links vérifie cela s'appelle la validation. Si la validation échoue, le navigateur affiche à nouveau votre site Web sous la forme d'un Onglet personnalisé :
Installer et configurer Bubblewrap
Bubblewrap est un ensemble de bibliothèques et une commande (CLI) pour Node.js, qui aide les développeurs à générer, créer et exécuter des progressive web apps au sein des applications Android, à l'aide de l'option "Activité Web fiable".
La CLI peut être installée à l'aide de la commande suivante:
npm i -g @bubblewrap/cli
Configurer l'environnement
Lorsque vous utilisez Bubblewrap pour la première fois, vous êtes invité à télécharger et à installer automatiquement des dépendances externes requises. Nous vous recommandons d'autoriser l'outil à le faire, car il garantit que les dépendances sont correctement configurées. Consultez la documentation sur le papier bulle pour utiliser un votre installation actuelle 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, vous devez exécuter la commande init:
bubblewrap init --manifest=https://my-twa.com/manifest.json
Bubblewrap lit le fichier manifeste Web, demandez aux développeurs de confirmer les valeurs à utiliser dans le projet Android, puis générez 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 appelé app-release-signed.apk. Ce fichier peut être installé
appareil de développement à des fins de test ou
importé sur le Play Store en vue de sa publication.
Bubblewrap fournit une commande pour installer et tester l'application sur un appareil local. Avec l'attribut de développement connecté à l'ordinateur exécutez la commande suivante:
bubblewrap install
Vous pouvez également utiliser l'outil adb utilisé.
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, que votre site Web est lancé sous la forme d'un onglet personnalisé et non d'une activité Web fiable, car nous n'avons pas encore configuré la validation Digital Asset Links, mais d'abord...
alternatives à l'interface utilisateur graphique (IUG) pour Bubblewrap
PWA Builder fournit une interface IUG qui utilise Bubblewrap pour générer des projets d'activité Web de confiance. Découvrez comment utiliser PWA Builder pour créer une application Android qui ouvre votre PWA dans 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 fréquentes de l'échec de la validation. (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é à 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 de liens d'éléments
Digital Asset Links se compose essentiellement d'un fichier sur votre site Web qui pointe vers votre application et de certaines métadonnées de votre application qui renvoient 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) pour que le navigateur puisse valider correctement votre application. 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 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é prend en charge les activités Web fiables, il sera choisi. Enfin, le mode Onglets personnalisés est utilisé par défaut.
Cela signifie que si vous déboguez quelque chose à faire avec des activités Web fiables, vous devez assurez-vous d'utiliser le navigateur que vous pensez être. Vous pouvez vérifier le navigateur utilisé à l'aide de la commande suivante:
> 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é fiable sur le Web, pour déboguer ce qui se passe en cas d'échec de la vérification. Si ce n'est pas le cas, consultez les autres concepts Android pour les développeurs Web ou signalez un problème GitHub sur ces documents.
Pour les prochaines étapes, je vous recommande de commencer par créer une icône pour votre application. Une fois cette opération effectuée, vous pouvez envisager de déployer votre application sur le Play Store.