Ajouter votre progressive web app à Google Play

1. Bienvenue

Dans cet atelier, vous allez utiliser une progressive web app que vous avez déployée et l'encapsuler dans une application afin de la distribuer sur le Play Store.

Points abordés

  • Utiliser Bubblewrap pour empaqueter la progressive web app sur le Google Play Store
  • Qu'est-ce qu'une clé de signature et comment l'utiliser.
  • Créer une application dans la Google Play Console et configurer une release de test pour la tester avant sa publication
  • Présentation des liens d'éléments numériques et comment les ajouter à votre application Web

Bon à savoir

  • À propos des progressive web apps
  • Utiliser les outils de ligne de commande
  • Commandes de base de l'interface système Bash ou comment les convertir dans l'interface système de votre choix

Ce dont vous avez besoin

Ce qui n'est pas couvert

2. Papier à bulles dans votre PWA

Bubblewrap est un outil permettant d'encapsuler une progressive web app dans un Android App Bundle en toute simplicité. Il vous suffit d'exécuter quelques commandes CLI. Pour cela, il génère un projet Android qui lance votre PWA en tant qu'activité Web fiable.

Pour commencer, créez un répertoire dans lequel vous souhaitez exécuter votre projet:

$ mkdir my-pwa && cd my-pwa

Exécutez ensuite l'outil de ligne de commande Bubblewrap pour générer la configuration et le projet Android pour l'Android App Bundle à importer dans Play:

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

Ici, Bubblewrap est initialisé avec l'emplacement d'un fichier Web App Manifest de PWA. Cette opération génère une configuration par défaut à partir du fichier manifeste d'application Web, et démarre un assistant dans la console pour vous permettre de modifier la configuration par défaut. Suivez l'assistant pour modifier les valeurs générées par l'outil.

Assistant de CLI de bulle affichant une initialisation de airhorner avec le domaine remplacé par example.com et les URL de démarrage remplacées.

Clé de signature

Le Google Play Store exige que les packages d'applications comportent une signature numérique avec un certificat lors de l'importation, souvent appelée clé de signature. Il s'agit d'un certificat autosigné, différent de celui utilisé pour diffuser votre application via HTTPS.

Bubblewrap demandera le chemin d'accès à la clé lors de la création de l'application. Si vous utilisez une fiche Play Store existante pour votre application, vous devez l'ajouter à la même clé que celle-ci.

Assistant de CLI de bulle pour demander l'emplacement de l'utilisateur et le nom de la clé de signature existante.

Si vous ne disposez pas de clé de signature existante et que vous créez une fiche sur le Play Store, vous pouvez utiliser la valeur par défaut fournie par Bubblewrap pour qu'elle crée une nouvelle clé pour vous:

Assistant de CLI de bulle pour demander si l'utilisateur souhaite créer une clé de signature.

Résultat de la bulle

Après avoir initialisé votre projet Bubblewrap et suivi l'assistant, les éléments suivants ont été créés:

  • twa-manifest.json : configuration du projet, qui reflète les valeurs sélectionnées dans l'assistant Bubblewrap. Vous devez effectuer le suivi de ce fichier avec votre système de contrôle des versions, car il peut servir à générer un nouveau projet Bubblewrap si nécessaire.
  • Fichiers de projet Android : les fichiers restants dans le répertoire correspondent au projet Android généré. Ce projet est la source utilisée pour la commande de compilation Bubblewrap. Vous pouvez également suivre ces fichiers à l'aide de votre système de contrôle des versions.
  • (Facultatif) Clé de signature : si vous souhaitez que Bubblewrap crée la clé de signature pour vous, elle sera générée à l'emplacement décrit dans l'assistant. Assurez-vous que votre clé est conservée en lieu sûr et limitez le nombre des personnes qui y ont accès. Elle permet de prouver la provenance des applications du Play Store.

Avec ces fichiers, nous disposons désormais de tout ce dont nous avons besoin pour créer un Android Application Bundle.

Créer votre package Android App Bundle

Dans le répertoire depuis lequel vous avez exécuté la commande d'initialisation de Bubblewrap, exécutez le code suivant (vous devez disposer des mots de passe pour votre clé de signature):

$ bubblewrap build

Résultat de la CLI Bubble Bowl pour la création d'un projet, la demande de mots de passe pour la clé de signature et l'affichage de la génération de différentes versions de l'application Android.

La commande "build" génère deux fichiers importants:

  • app-release-bundle.aab : Android App Bundle de votre application PWA. Il s'agit du fichier à importer sur le Google Play Store.
  • app-release-Signed.apk : format d'emballage Android permettant d'installer l'application directement sur un appareil de développement à l'aide de la commande bubblewrap install.

3. À vous de jouer – Papier bulle

Maintenant, à vous de jouer ! Essayez de mettre en pratique ce qui a été appris à l'étape précédente:

  1. Créez un répertoire pour stocker votre projet Android généré.
  2. Initialisez ce répertoire avec Bubblewrap et le fichier manifeste d'application Web de votre PWA.
  3. Générez une nouvelle clé de signature, ou réutilisez vos clés existantes.
  4. Compilez votre Android App Bundle à partir du projet Android généré.

4. Ajout de votre application au Play Store sur Google

Maintenant que vous disposez d'un Android App Bundle pour votre PWA, il est temps de l'importer dans le Play Store. Une fois votre compte de développeur enregistré, vous pouvez vous connecter et commencer à accéder à la Play Console.

Créer une application

Une fois connecté, vous pouvez voir toutes vos applications. Un bouton Créer une application s'affiche en haut de l'écran. Lorsque vous cliquez dessus, l'écran suivant s'affiche pour vous aider à créer une fiche d'application Android.

Écran montrant le formulaire "Créer" d'une application dans la Play Console

Vous pouvez remplir plusieurs champs, dont le nom de l'application, la langue par défaut, si elle correspond à une application ou à un jeu, et si celle-ci est offerte ou payante, ainsi qu'un certain nombre de déclarations. Vous ne pourrez pas créer d'appli sans accepter les déclarations. Il est donc important de les lire et de les comprendre avant de les accepter.

Une fois que vous avez saisi toutes les informations et cliqué sur le bouton Créer une application en bas du formulaire, vous êtes redirigé vers le tableau de bord de votre nouvelle application. Le tableau de bord affiche les checklists à suivre pour configurer, commencer à tester et publier votre application.

Configurer les tests internes

Les tests internes sont un excellent moyen de lancer votre application rapidement sans passer par un groupe de testeurs de confiance que vous sélectionnez. Affichez les tâches de la checklist Commencer les tests, puis cliquez sur Sélectionner des testeurs.

Checklist avant le test

Cliquez sur cette tâche pour accéder à la page Tests internes. C'est ici que vous allez gérer la configuration des tests pour votre application. Pour y accéder de nouveau, ouvrez la section Tests sous le menu Publier de la barre latérale. Pour commencer, vous devez créer une liste de testeurs afin de tester votre application. Pour ce faire, cliquez sur le lien Créer une liste de diffusion dans la section Testeurs de la page. Un pop-up s'ouvre pour vous permettre de créer votre liste de diffusion.

Pop-up affichant le formulaire de création d'une liste de diffusion, qui inclut le nom de la liste, les adresses e-mail, un lien permettant d'importer un fichier CSV d'adresses e-mail et une zone indiquant les adresses e-mail importées.

Dans cette fenêtre pop-up, vous allez attribuer un nom à votre liste de diffusion et saisir manuellement les adresses e-mail, ou importer un fichier CSV d'adresses à utiliser. Une fois que vous avez terminé, appuyez sur le bouton Enregistrer les modifications. Vous pourrez revenir aux listes de diffusion que vous avez déjà créées pour ajouter ou supprimer des adresses e-mail. Après avoir ajouté vos testeurs, vous devez créer une release de test. Cliquez sur le bouton Créer une release en haut de la page.

Page de test interne avec une flèche pointant vers le bouton "Créer une release".

Créer une release de test

Après avoir cliqué sur le bouton Créer une release, vous serez invité à parcourir plusieurs sections. La première, le champ Intégrité des applications, vous permet de choisir comment gérer la clé de signature de votre application. L'option par défaut est de laisser Google gérer votre clé de signature. C'est l'option recommandée, car elle est sécurisée et permet de récupérer votre appli en cas de perte.

Play App Signing

Organigramme montrant, de gauche à droite, un développeur et sa clé d'importation, qui signe son application et l'envoie à Google. Google dispose alors d'une clé de signature d'applications et signe l'application avec elle, avant de la distribuer à l'utilisateur

Importation et finalisation de l'application

Après avoir choisi comment gérer votre clé de signature, vous serez invité à importer votre app bundle dans votre release. Pour ce faire, faites glisser le fichier app-release-bundle.aab généré par Bubblewrap dans le formulaire. Pour finaliser votre release, renseignez les détails restants, puis cliquez sur Enregistrer, puis sur Examiner la release et enfin sur les boutons Lancer le déploiement en version de test interne pour lancer votre release. Les testeurs internes pourront ainsi accéder à votre application. Sur l'onglet Testeurs de la page Tests internes, vous pouvez copier un lien à partager avec vos testeurs pour qu'ils puissent accéder à votre application.

Page de test interne, avec une flèche en direction du lien de copie permettant de partager un lien de test avec les testeurs.

5. À vous de jouer – Créez une application

Maintenant, à vous de jouer ! Essayez de mettre en pratique ce qui a été appris à l'étape précédente:

  1. Créez une application pour votre PWA dans la Play Console.
  2. Configurez des tests internes de l'application et ajoutez-vous en tant que testeur.
  3. Importez votre app bundle, puis créez une release de test pour votre application.
  4. Installez votre application depuis le Play Store sur votre appareil Android ou Chrome OS à l'aide du lien de test.

6. Digital Asset Links

Si vous avez testé votre PWA sur Play, il se peut qu'elle ne s'affiche pas en plein écran. C'est parce que vous n'avez pas encore validé la propriété du site via un fichier Digital Asset Links. Bien que Bubblewrap puisse configurer et créer votre app bundle Android, vous devez terminer le lien en mettant à jour votre application Web.

Obtenir l'empreinte SHA-256 de votre application

Pour configurer les liens d'éléments numériques PWA, vous devez utiliser l'empreinte SHA-256 du certificat utilisé pour signer le package sur l'utilisateur.

Avec signature d'application Play

Si vous avez configuré la signature d'application Play pour votre application lors de la création de votre release (auparavant recommandé), l'empreinte SHA-256 est disponible dans la Play Console. Rappelez-vous que ce certificat est différent de celui utilisé pour importer votre application. Pour obtenir l'empreinte digitale depuis votre application dans la Play Console, accédez à Releases->Setup->App Integrity. Vous y trouverez un certain nombre d'options sous Certificat de la clé de signature d'application. Copiez la valeur de l'empreinte du certificat SHA-256.

Écran "Intégrité de l'appli", avec l'empreinte du certificat SHA-256 encadrée.

Sans signature d'application Play

Si vous avez désactivé la signature d'application Play, la clé utilisée pour signer la version finale de l'application sera la même que celle que vous utilisez pour importer l'application dans la Play Console. Vous pouvez utiliser keytool de Java pour extraire l'empreinte:

$ keytool -list -v \
    -keystore <keystore-file-path> \
    -alias <key-alias> \
    -keypass <key-password> \
    -storepass <store-password> | grep SHA256

$     SHA256: BD:92:64:B0:1A:B9:08:08:FC:FE:7F:94:B2...

Pour l'utiliser, vous devez connaître son chemin et les mots de passe correspondants. Copiez les valeurs hexadécimales de la clé SHA256.

Bubblewrap peut gérer les empreintes digitales de signature que vous avez récupérées et générer le fichier Digital Asset Links qui vous convient. Pour ajouter une empreinte digitale à l'aide de Bubblewrap, exécutez la commande suivante dans le même répertoire que celui créé lors de l'enveloppe à bulles de votre PWA, en remplaçant <fingerprint> par l'empreinte copiée à l'étape précédente.

$ bubblewrap fingerprint add <fingerprint>

Cette commande ajoute l'empreinte à la liste des empreintes de l'application et génère un fichier assetlinks.json. Importez ce fichier dans le répertoire .well-known de la même origine que votre PWA.

7. À vous de jouer – Liens pour les éléments numériques

Maintenant, à vous de jouer ! Essayez de mettre en pratique ce qui a été appris à l'étape précédente:

  1. Recherchez l'empreinte SHA-256 de votre application.
  2. Générez un fichier Digital Asset Links pour votre application.
  3. Importez votre fichier Digital Asset Links dans votre PWA.
  4. Vérifiez que votre fichier Digital Asset Links est correctement configuré à l'aide de l'API et de votre application de test.

8. Testez vos connaissances

Avant de terminer, testez vos connaissances et voyez ce que vous avez appris en répondant aux questions suivantes. Ne cherchez pas les réponses !

Après avoir généré son projet Android avec Bubblewrap, Sally transmet le fichier ______ généré à son système de contrôle des versions pour qu'elle puisse le recompiler à tout moment.

twa-manifest.json clé de signature app-release-bundle.aab build.gradle

Jordan souhaite que son équipe de contrôle qualité teste son application Android PWA. Il ______ son Android App Bundle vers un canal de test interne.

uploads Compilations et importations versions signes et importations

L'application PWA Android n'est pas en plein écran. Pour résoudre ce problème, ils reçoivent l'empreinte du certificat SHA-256 de leur ______ et l'importe dans leur fichier Digital Asset Links, situé à l'adresse ______, à la même origine que leur PWA.

clé d'importation, /.well-known/assetlinks.json clé d'importation, /assetlinks.json clé de signature, /.well-known/assetlinks.json clé de signature, /assetlinks.json

9. Testez vos connaissances – Réponses

Réponses aux questions du test

  1. Après avoir généré son projet Android avec Bubblewrap, Sally transmet le fichier ______ généré à son système de contrôle des versions pour qu'elle puisse le recompiler à tout moment.
  2. Jordan souhaite que son équipe de contrôle qualité teste son application Android PWA. Il ______ son Android App Bundle vers un canal de test interne.
  3. L'application PWA Android n'est pas en plein écran. Pour résoudre ce problème, ils reçoivent l'empreinte du certificat SHA-256 de leur ______ et l'importe dans leur fichier Digital Asset Links, situé à l'adresse ______, à la même origine que leur PWA.

10. Félicitations !

Félicitations ! Vous savez comment ajouter votre PWA au Google Play Store.

Si vous le souhaitez, essayez vous-même les étapes suivantes:

À vous de jouer !