Déploiement sur les stores

Introduction

Tout au long de cet ouvrage, nous avons présenté l’ensemble des fonctionnalités disponibles sous le terme de Progressive Web App. L’une des principales caractéristiques est d’avoir une application web pouvant être « installée » sur l’écran d’accueil d’un téléphone sans avoir besoin de passer par le long processus de publication sur les stores du marché.

Même si nous pensons que l’utilisation des stores pour découvrir des applications est de moins en moins importante à l’heure actuelle, certaines sociétés souhaitent un moyen de publier ces Progressive Web Apps sur les stores pour des raisons de marketing la plupart du temps.

Dans ce dernier chapitre, nous présentons les différentes possibilités de déployer des applications sur les trois principales plateformes du marché : Microsoft Store (pour Windows 10), Play Store (pour Android) et Apple Store.

Les processus qui sont présentés nécessitent l’utilisation des outils recommandés pour chaque plateforme. Nous pouvons par exemple citer Android Studio pour le Play Store, Visual Studio pour le Microsoft Store ou encore XCode pour la plateforme iOS. À noter qu’il y a des frais à payer pour pouvoir déployer des applications sur ces plateformes....

Play Store

Nous allons commencer par la plateforme hébergeant les applications Android : le Play Store. Les équipes en charge du développement de cette plateforme et de tous les sujets liés aux Progressive Web Apps ont collaboré afin de définir un standard permettant de les déployer sur le store.

Pour publier une Progressive Web App sur ce store, nous devons mettre en place une Trusted Web Activity (ou TWA). Il s’agit d’une nouvelle activité Android (l’un des types d’objets les plus utilisés lors de développement d’applications Android) dont peuvent se servir les développeurs pour inclure du contenu web. Une TWA utilise le composant natif CustomTabs permettant à un utilisateur d’utiliser le navigateur de son choix.

Avant de mettre cette solution en place, nous devons vérifier que les deux conditions suivantes sont respectées pour que notre application soit acceptée par le Play Store et utilisable correctement.

Une application doit remplir les critères de Chrome pour être prise pour une Progressive Web App. Ces critères ont été présentés dans le chapitre Web App Manifest à la section Critères pour avoir une application installable.
Nous devons respecter les guidelines du Play Store.

Si ces deux conditions sont remplies, nous pouvons commencer à mettre...

Apple Store

Apple ne supporte pas pour l’instant la publication de Progressive Web App dans son store. Nous allons devoir choisir une autre solution pour pallier cette lacune. Pour cela, nous allons nous baser sur Cordova. Cordova (ou PhoneGap, autre terme pour désigner cet outil) est un projet open source permettant de packager une application web dans un composant WebView (plus spécifiquement UIWebView dans le monde iOS), composant natif faisant office de navigateur, pour ensuite pouvoir en générer un livrable (.ipa pour iOS et .apk ou .aab pour Android). Cette solution était en fait la seule solution il y a quelques années pour publier une application web sur les stores.

Cordova possède également de nombreux plug-ins permettant d’interagir avec les fonctionnalités natives du téléphone (par exemple, lire les contacts du téléphone, récupérer les coordonnées GPS de l’utilisateur…). Certaines sont à présent disponibles nativement dans les standards web.

Nous allons expliquer les étapes pour convertir une Progressive Web App en application Cordova. Ces étapes pourront bien évidemment être automatisées dans une chaîne de déploiement continu.

Nous devons tout d’abord, via NPM, installer le module Cordova.

npm install -g cordova

Une fois le module installé, nous pouvons...

Microsoft Store

Le store de Microsoft est le seul à être capable d’indexer de lui-même des Progressive Web Apps. Mais si vous souhaitez avoir la main sur ce processus, vous pouvez également générer le livrable pour cette plateforme (via un fichier .appx) et ensuite l’uploader sur le store dédié.

Tout le processus pour générer un livrable pour le Microsoft Store nécessite Visual Studio. La procédure à suivre est expliquée sur la documentation officielle : https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-edgehtml/windows-features

pwabuilder

Pour générer les livrables pour l’ensemble des plateformes, il y a le choix : le faire à la main à chaque livraison ou, ce que nous préférons, automatiser l’opération avec pwabuilder, un outil en ligne de commande développé par Microsoft. Avant d’utiliser cet outil, il faut s’assurer que les outils utilisés précédemment sont installés dans notre environnement, car pwabuilder les utilisera.

Commençons par installer pwabuilder sur notre environnement.

npm install -g pwabuilder

Une fois l’outil installé, il suffit d’aller dans le répertoire contenant le fichier Manifest et d’exécuter l’une des commandes suivantes afin de générer le livrable pour une plateforme cible.

pwabuilder package -p windows10 
pwabuilder package -p android 
pwabuilder package -p iOS

Nous pouvons intégrer pwabuilder dans notre workflow de déploiement continu afin de publier automatiquement notre Progressive Web App sur les différents stores.