Ajouter votre progressive web app à Google Play

1. Bienvenue

Dans cet atelier, vous allez prendre une application Web progressive existante que vous avez déployée et l'encapsuler dans une application à distribuer sur le Google Play Store.

Points abordés

  • Utiliser Bubblewrap pour empaqueter votre application Web progressive pour le Google Play Store
  • Présentation et utilisation d'une clé de signature
  • Créer une application dans la Google Play Console et configurer une version de test pour tester votre application avant publication
  • Que sont les Digital Asset Links et comment les ajouter à votre application Web ?

À savoir

Prérequis

Ce qui n'est pas couvert

2. Envelopper votre PWA dans une bulle

Bubblewrap est un outil qui permet d'encapsuler votre Progressive Web App dans un Android App Bundle aussi facilement que si vous exécutiez quelques commandes CLI. Pour ce faire, il génère un projet Android qui lance votre PWA en tant qu'activité Web fiable.

Pour commencer, créez un répertoire pour votre projet et accédez-y :

$ 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'app bundle Android que vous importerez sur Play :

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

Ici, Bubblewrap est initialisé avec l'emplacement du fichier Web App Manifest d'une PWA. Cela générera une configuration par défaut à partir du fichier manifeste de l'application Web et lancera un assistant dans la console qui vous permettra de modifier la configuration par défaut. Suivez l'assistant pour modifier les valeurs générées par l'outil.

Assistant Bubblewrap CLI montrant une initialisation à partir d'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'application soient signés numériquement avec un certificat lors de leur importation, souvent appelé clé de signature. Il s'agit d'un certificat autosigné, différent de celui utilisé pour diffuser votre application via HTTPS.

Bubblewrap vous 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 devrez ajouter le chemin d'accès à la même clé que celle utilisée par cette fiche.

Assistant Bubblewrap CLI demandant l'emplacement et le nom de la clé de signature existante de l'utilisateur.

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

Assistant Bubblewrap CLI demandant à l'utilisateur s'il souhaite créer une clé de signature.

Sortie Bubblewrap

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

  • twa-manifest.json : configuration du projet, reflétant les valeurs choisies dans l'assistant Bubblewrap. Vous devez suivre ce fichier avec votre système de contrôle des versions, car il peut être utilisé pour régénérer l'intégralité du projet Bubblewrap si nécessaire.
  • Fichiers du projet Android : les fichiers restants du répertoire sont ceux du projet Android généré. Ce projet est la source utilisée pour la commande de compilation Bubblewrap. Vous pouvez également suivre ces fichiers avec votre système de gestion de versions.
  • (Facultatif) Clé de signature : si vous choisissez de laisser Bubblewrap créer la clé de signature pour vous, elle sera générée à l'emplacement décrit dans l'assistant. Assurez-vous de conserver la clé dans un endroit sûr et de limiter le nombre de personnes qui y ont accès. Elle permet de prouver que les applications sur le Play Store proviennent de vous.

Avec ces fichiers, nous avons maintenant tout ce dont nous avons besoin pour créer un Android App Bundle.

Créer votre Android App Bundle

Dans le même répertoire que celui dans lequel vous avez exécuté la commande d'initialisation de Bubblewrap, exécutez la commande suivante (vous aurez besoin des mots de passe de votre clé de signature) :

$ bubblewrap build

Sortie de l'interface de ligne de commande Bubblewrap pour la création d'un projet, demandant les mots de passe de la clé de signature et montrant la génération de différentes versions de l'application Android.

La commande de compilation génère deux fichiers importants :

  • app-release-bundle.aab : Android App Bundle de votre PWA. Il s'agit du fichier que vous importerez dans le Google Play Store.
  • app-release-signed.apk : format d'empaquetage Android qui peut être utilisé pour installer l'application directement sur un appareil de développement à l'aide de la commande bubblewrap install.

3. Essayer : Bubblewrap

Maintenant, à vous de jouer ! En vous appuyant sur ce que vous avez appris à l'étape précédente, essayez d'accomplir les tâches suivantes :

  1. Créez un répertoire pour stocker le projet Android généré.
  2. Initialisez ce répertoire avec Bubblewrap et le fichier manifeste de votre application Web PWA.
  3. Générez une clé de signature ou réutilisez celles que vous possédez déjà.
  4. Créez votre Android App Bundle à partir du projet Android généré.

4. Ajouter votre application au Google Play Store

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

Créer une application

Une fois connecté, un écran affichant toutes vos applications s'affiche. En haut de la page, vous trouverez un bouton Créer une application. Lorsque vous cliquez dessus, l'écran suivant s'affiche pour vous guider dans la création d'une fiche d'application Android.

Écran affichant le formulaire "Créer une application" de la Play Console.

Vous devez remplir plusieurs champs, y compris le nom de l'application, la langue par défaut, si elle est une application ou un jeu, si elle est sans frais ou payante, et un certain nombre de déclarations. Vous ne pourrez pas créer d'application 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 renseigné 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. Dans le tableau de bord, vous trouverez des checklists des tâches à effectuer pour configurer, tester et publier votre application.

Configurer les tests internes

Les tests internes sont un excellent moyen de publier rapidement votre application sans examen auprès d'un groupe de testeurs de confiance que vous sélectionnez. Consultez les tâches de la checklist Démarrer les tests maintenant, puis sélectionnez Sélectionner des testeurs.

Checklist "Commencer les tests maintenant"

En cliquant sur cette tâche, vous serez redirigé vers la page Tests internes. C'est ici que vous gérez la configuration des tests pour votre application. Vous pouvez y accéder à nouveau en ouvrant la section Test sous le menu Version dans la barre latérale. La première chose à faire ici est de créer une liste de diffusion de testeurs pour tester votre application. Pour ce faire, cliquez sur le lien Créer une liste de diffusion dans la section Testeurs de la page. Une fenêtre pop-up s'ouvre pour vous permettre de créer votre liste de diffusion.

Pop-up affichant le formulaire de création de 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 permettant d'afficher les adresses e-mail importées.

Dans ce pop-up, vous pouvez nommer votre liste de diffusion, puis saisir manuellement des adresses e-mail ou importer un fichier CSV d'adresses e-mail à utiliser. Une fois les modifications effectuées, appuyez sur le bouton Enregistrer les modifications. Vous pourrez revenir dans les listes d'adresses e-mail que vous avez déjà créées pour ajouter ou supprimer des adresses e-mail si nécessaire. Une fois vos testeurs ajoutés, vous pouvez créer une version de test. Cliquez sur le bouton Créer une version en haut de la page.

Page "Tests internes" avec une flèche pointant vers le bouton "Créer une version".

Créer une version de test

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

Signature d'application Play

Organigramme montrant, de gauche à droite, un développeur et sa clé de transfert qui signe ensuite son application et l'envoie à Google. Google dispose alors d'une clé de signature d'application, signe l'application avec cette clé, puis la fournit à 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 version. Pour ce faire, glissez-déposez le fichier app-release-bundle.aab généré par Bubblewrap dans le formulaire. Pour finaliser la version, remplissez les informations restantes, puis cliquez sur les boutons Enregistrer, Examiner la version et Lancer le déploiement du test interne pour commencer le déploiement. Votre application sera alors disponible pour vos testeurs internes. De retour dans 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 pointant vers le lien "Copier le lien" permettant de partager un lien de test avec les testeurs.

5. Essayer : créer une application

Maintenant, à vous de jouer ! En vous appuyant sur ce que vous avez appris à l'étape précédente, essayez d'accomplir les tâches suivantes :

  1. Créez une application pour votre PWA dans la Play Console.
  2. Configurez un test interne pour l'application et ajoutez-vous en tant que testeur.
  3. Importez votre app bundle et créez une version de test pour votre application.
  4. Installez votre application depuis le Play Store sur votre appareil Android ou ChromeOS à l'aide du lien de test.

6. Digital Asset Links

Si vous avez pu tester votre PWA dans Play, vous avez peut-être remarqué qu'elle ne s'exécute pas en plein écran. En effet, vous n'avez pas encore validé la propriété du site à l'aide d'un fichier Digital Asset Links. Bien que Bubblewrap puisse configurer et compiler votre app bundle Android, vous devez terminer l'association en mettant à jour votre application Web.

Obtenir l'empreinte SHA-256 de votre application

Pour configurer les liens Digital Asset de votre PWA, vous aurez besoin de l'empreinte SHA-256 du certificat utilisé pour signer le package que l'utilisateur reçoit sur son téléphone.

Avec la signature d'application Play

Si vous avez configuré la signature d'application Play pour votre application lorsque vous avez créé votre version (ce qui était recommandé auparavant), l'empreinte SHA-256 se trouve dans la Play Console. N'oubliez pas que ce certificat est différent de celui utilisé pour importer votre application. Pour obtenir l'empreinte digitale, accédez à Versions > Configuration > Intégrité de l'appli dans votre application de la Play Console. Plusieurs options s'affichent sous Certificat de 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 mise en évidence.

Sans la signature d'application Play

Si vous avez désactivé la signature d'application Play, la clé utilisée pour signer l'application finale 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 digitale :

$ 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 le chemin d'accès à votre clé de signature et les mots de passe associés. 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 approprié pour vous. Pour ajouter une empreinte digitale avec Bubblewrap, exécutez la commande suivante à partir du même répertoire créé lors de l'encapsulation de votre PWA dans Bubblewrap, en remplaçant <fingerprint> par l'empreinte digitale copiée à l'étape précédente.

$ bubblewrap fingerprint add <fingerprint>

Cette commande ajoute l'empreinte digitale à la liste des empreintes digitales 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. Essayer : Digital Asset Links

Maintenant, à vous de jouer ! En vous appuyant sur ce que vous avez appris à l'étape précédente, essayez d'accomplir les tâches suivantes :

  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 vérifiez ce que vous avez appris en répondant aux questions suivantes. Ne trichez pas !

Après avoir généré son projet Android avec Bubblewrap, Sally valide le fichier ______ généré dans son système de contrôle des versions afin de pouvoir le reconstruire chaque fois qu'elle en a besoin.

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

Jack souhaite que son équipe QA teste son application Android PWA. Il ______ son Android App Bundle sur un canal de test interne.

importations créations et importations versions signatures et importations

L'application Android PWA d'Oogie Boogie ne s'exécute pas en plein écran. Pour résoudre ce problème, ils obtiennent l'empreinte du certificat SHA-256 pour leur ______ et l'importent dans leur fichier Digital Asset Links situé à l'adresse ______ sur 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 "Testez vos connaissances" !

  1. Après avoir généré son projet Android avec Bubblewrap, Sally valide le fichier ______ généré dans son système de contrôle des versions afin de pouvoir le reconstruire chaque fois qu'elle en a besoin.
  2. Jack souhaite que son équipe QA teste son application Android PWA. Il ______ son Android App Bundle sur un canal de test interne.
  3. L'application Android PWA d'Oogie Boogie ne s'exécute pas en plein écran. Pour résoudre ce problème, ils obtiennent l'empreinte du certificat SHA-256 pour leur ______ et l'importent dans leur fichier Digital Asset Links situé à l'adresse ______ sur la même origine que leur PWA.

10. Félicitations !

Félicitations ! Vous avez appris à ajouter votre PWA au Google Play Store.

Lorsque vous vous sentirez prêt, essayez de suivre ces étapes par vous-même :

À vous de jouer !