Publiez une Progressive Web App dans le Google Play Store avec les Trusted Web Activities

Stéphane

Stéphane, Développeur et responsable équipe front-end et mobile 10 septembre 2021

Parmi les très nombreux avantages d'une Progressive Web App (PWA), il est possible de publier votre application sur le Google Play Store d'Android et ainsi profiter de l'énorme visibilité qu'offre cette boutique d'applications. Pour publier une PWA dans le Store Android, il faut obligatoirement construire une Trusted Web Activity.

Les Trusted Web Activities

Les Trusted Web Activities (TWA) vous permettent de créer un fichier APK (un fichier contenant votre application) qui peut être soumis au Google Play Store. Si vous disposez d'une PWA existante, aucun développement supplémentaire au sein de cette PWA n'est requis. Vous pourrez mettre à disposition votre application sur le Google Play Store pour que les utilisateurs puissent la télécharger et l'installer.

Pourquoi être présent sur le store ?

Pour plus de visibilité

La visibilité qu’offre le store Android est probablement l’un des plus gros avantages, pour plusieurs raisons :

  • L’utilisateur aura le réflexe de rechercher votre app depuis le store
  • Une app affichée dans les résultats de recherche
  • Les commentaires des utilisateurs à propos de l’app
  • Les avis des utilisateurs, qui exercent une influence sur le classement des applications
  • Le store offre des statistiques très précises comme le nombre de téléchargements, la version Android du téléphone, le nombre de désinstallations et beaucoup d’autres !

Une publication aux petits oignons

Publier une application dans un store, c’est aussi l’avantage de décider qui peut installer l’application :

  • une publication disponible par pays/régions
  • une publication en mode bêta, interne, pré-lancement, etc.
  • une publication seulement pour X% d’utilisateurs

Un processus d'installation unique sur Android

L’installation d’une PWA n’est malheureusement pas encore standardisée. Plusieurs process coexistent pour installer une PWA sur Android, contrairement à iOS avec une seule méthode possible.

En publiant une TWA sur le Google Play Store, vous offrez aux utilisateurs une méthode bien connue du grand public : une installation qui passe par le store, similaire à toute autre application Android.

Comment publier une PWA sur le Play Store ?

Les étapes sont similaires à une application native :

  • génération d'un fichier au format APK (le format des applications exécuté sur les téléphones Android, et bientôt Windows)
  • publication du fichier dans le store Android via Google Play Developer

Créer et déployer une PWA valide

Vous avez créé une PWA ? Pour apparaître sur le store Android, celle-ci devra être encapsulée et transformée en TWA.

Pour cela, Google Chrome Labs fournit un outil en ligne de commande appelé Bubblewrap. Cet outil permet de créer un APK qui affiche votre PWA dans une vue de navigateur Chrome en plein écran. Depuis un terminal, installez Bubblewrap :

npm install -g @bubblewrap/cli

Petit aparté : si vous n'avez pas Android Studio, les outils Android (Command line tools) devront néanmoins être installés sur votre machine. Ces outils vous donneront les fonctionnalités requises pour utiliser Bubblewrap.

Générer un projet Android

Étape classique dans la création d’une application : la génération d’un projet Android. Nous vous conseillons de créer un dossier nommé **android** et de générer le projet dans ce dernier afin de séparer les sources. Depuis un terminal, générez le projet Android à l’aide de Bubblewrap :

bubblewrap init --manifest https://votre-pwa.com/manifest.webmanifest // 
indiquer l’URL du manifest de la PWA

La commande init vous posera quelques questions sur votre application. L’URL du manifest est très importante : Bubblewrap utilisera les informations qu’elle contient pour générer le projet (nom de l’application, icons, etc).

Une fois terminé, cela crée un projet Android que vous pouvez ouvrir dans Android Studio (si vous l'avez), et vous pouvez créer et exécuter votre application à partir de là.

Créer une TWA

Depuis le projet Android, il est maintenant possible de générer un fichier APK à l’aide de la commande build :

bubblewrap build

Le fichier APK sera généré ainsi qu'un fichier assetlinks.json. Ce dernier est très important car il permet de valider que vous êtes le propriétaire de l'APK (l’application) ainsi que du domaine sur lequel votre PWA est déployée. Le fichier assetlinks.json correspond à la clé utilisée pour signer l'APK. Il s’agit du Digital Asset Link.

⚠️ Dans le cas où l’application est directement signée depuis le store, la clé de signature devra être récupérée depuis la console Google Play Console et insérée dans le fichier assetlinks.json.

Pour récupérer la clé de signature depuis Google Play Console :

  • Se rendre sur l’interface Google Play Console
  • Créer et/ou sélectionner son application
  • Depuis le menu de gauche, aller dans Configuration > Intégrité de l’application
  • Insérer dans le fichier assetlinks.json l’empreinte du certificat SHA-256

Une fois fait, le fichier assetlinks.json doit être accessible depuis la PWA via le chemin suivant : https://votre-pwa.com/.well-known/assetlinks.json

Comment vérifier le lien entre la PWA et la TWA ?

Lorsque la TWA (APK) est installée sur l’appareil Android, ce lien permet à l'application de s'exécuter en plein écran et sans aucune interface utilisateur de navigateur.

installer sa pwa sur Android store

Déployer une application sur Google Play Store

Lorsque le fichier APK est compilé et le Digital Asset Link effectué, il ne reste plus qu’à publier l’application sur le store Android et profiter de la visibilité qu’offre ce store.

Conclusion sur la mise en ligne de PWA sur le Google Play Store

Publier une Progressive Web App existante sur le store Android ne demande aucun développement en dehors d’une configuration Android.

Elle permet d’obtenir une meilleure visibilité ainsi qu’un système de notes, de commentaires, des statistiques ou encore de gérer vos publications plus finement.

Bonne publication !

Nos réalisations sur ce sujet

Toutes nos réalisations
Articles récents
Tous nos articles