Il y a quelques temps, on vous parlait des différentes technos utilisables pour créer une appli mobile. Parmi ces technologies, on citait évidemment les applications natives, les apps cross-platform, mais aussi les PWA – ou Progressive Web Apps.
Dans cet article, on va se pencher un peu plus sur cette dernière techno. Souvent mise d’office à l’écart, elle peut pourtant répondre à bien des besoins. Et, et cela est important, pour un coût bien inférieur aux autres types d’apps !
Nous aborderons les PWA par leur aspect général, puis irons un peu plus dans la technique, pour vous montrer pourquoi et comment créer une Progressive Web App.
Suivez le guide !
PWA, définition et utilisation
Les PWA
Commençons par définir exactement ce qu’est une PWA.
Une PWA, c’est, pour commencer, un site web pensé pour imiter une app native – tout en restant bien, j’insiste là-dessus, un site web.
C’est à dire qu’une PWA est écrite avec les langages du web (HTML, CSS et JavaScript – avec ou sans framework) et qu’elle tourne dans un navigateur.
Cependant, elle est déployée sur un smartphone, avec une icône sur votre écran d’accueil, comme une app dite native. Évidemment, elle n’aura pas les mêmes capacités qu’une app native, on en reparlera.
Techniquement, elle se base sur trois éléments : Les Service Workers, un manifest et les API HTML. On détaillera tout ça par la suite.
Historique
Pour parler PWA, il faut parler mobile, et histoire du mobile.
Le monde du web a évolué en étroite collaboration avec le monde du mobile. Un des premiers exemple, ce sont les media queries, qui permettent un affichage différent suivant la taille d’écran du device utilisé. L’utilisation des media queries est devenue une norme recommandée en 2012.
Très peu de temps après sont apparues les apps dites hybrides, avec Cordova, écrites en JavaScript mais cette fois compilées pour être déployées sur les stores.
Les Progressive Web App sont arrivées peu de temps après, introduites comme des sites web pensés pour le mobile natif.
Pour l’histoire des PWA, le terme est mentionné pour la première fois par Alex Russel, ingénieur Google, en 2015. Il les définit comme des apps gardant les concepts du web, tout en ajoutant une indépendance de la connectivité, une couche d’UX mobile (natif) et de l’installation.
Adoption
Preuve du sérieux des PWA, elles ont été relativement rapidement adoptées par les développeurs freelance, et même par de grands groupes. Certaines entreprises, bien que possédant déjà des apps natives, se sont mises à utiliser des PWA – en plus des apps natives.
Ça a été le cas de Twitter avec Twitter Lite, par exemple, ou bien de Tinder (lire l’intéressante étude de cas), tous les deux dès 2017.
Pour les groupes français, on peut citer 20Minutes.
L’installation d’une PWA
On a vu ce que c’était une PWA : un site web qui mime l’UX d’une app mobile et qui peut être installée.
Mais alors, comment l’installer ?
Sous Android, c’est très simple – sous iOS, beaucoup moins. Prenons l’exemple de 20Minutes.
Avec votre Android sous Chrome, si vous vous rendez sur 20minutes.fr, vous verrez en bas de votre un écran un bandeau apparaitre :
Si vous cliquez sur le lien, l’app s’installera en quelques secondes. Elle apparaitra ensuite sur votre écran d’accueil de la même façon qu’une app native :
Sous iOS, il faut ouvrir le site possédant une PWA avec Safari, cliquer sur l’icône de partage puis sur l’élément « Sur l’écran d’accueil ».
L’app apparaitra là aussi sur votre écran d’accueil, et s’ouvrira presque comme une app native !
Les capacités et limites des PWA
Comme je l’ai mentionné dans l’introduction, le coût de développement d’une PWA est souvent inférieur à celui d’une app dite traditionnelle. Déjà car ce sont des technos web qui sont utilisées, mais aussi car on peut très bien adapter un site existant pour le transformer en PWA. C’est-à-dire qu’on n’est pas obligé de commencer un nouveau projet from scratch pour créer une PWA.
Mais alors, si c’est si simple et peu coûteux, pourquoi tout le monde n’utilise pas les PWA ? Pour plusieurs raisons, mais notamment parce qu’elles imposent certaines contraintes et limites.
C’est ce que nous allons voir dans cette section. Mais d’abord, passons en revue les avantages d’une Progressive Web App.
Ce que peut faire une PWA
Une Progressive Web App possède indéniablement certains avantages :
- Un déploiement instantané : c’est littéralement quelques kilooctets installés sur votre périphérique depuis un site web ;
- Un accès rapide : c’est une simple et légère page web qui est ouverte depuis l’écran d’accueil de votre téléphone ;
- Elle offre une expérience utilisateur proche du natif, à condition qu’elle soit bien développée ;
- Une utilisation complète offline : les fichiers et scripts étant stockés côté client, pas besoin de connexion pour afficher le site ;
- Une mise à jour transparente : si vous ouvrez la PWA et avez une connexion à un réseau, l’app s’ouvrira comme un simple site web. Les sources se mettront donc à jour automatiquement ;
- On peut la déployer sur le Play Store de Google et la télécharger comme une vraie app – mais pas sur l’App Store d’Apple.
Les limites d’une PWA
C’est pas mal, comme avantages ! Voyons maintenant les limites.
- L’accès aux fonctionnalités natives n’est pas garanti (bluetooth, paiement depuis l’app, etc.) ;
- Ça reste un site web, les performances ne seront donc pas aussi bonnes qu’avec une app native. Bien que cela dépende des cas d’utilisation ;
- Limites côté Apple, qui bloque l’accès à certaines features et rend impossible la mise à disposition de l’app sur l’App Store.
C’est en grande partie à cause du dernier point que les PWA n’ont pas encore explosé en terme d’adoption par les développeurs.
On le sait, Apple aime bien contrôler ce qu’il y a sur les périphériques de ses utilisateurs. Par exemple, quand un développeur soumet une app à Apple, c’est un humain qui la vérifie, pas un bot. Les mises à jour sont également vérifiées.
Or, une PWA se met à jour en background, sans avoir à repasser par le Store. Apple a donc beaucoup moins la main sur le contenu qui s’y trouve, et est donc logiquement réfractaire à ouvrir son Store aux PWA.
Dans la technique
Maintenant qu’on sait ce qu’est une PWA, ses avantages et ses limites, parlons un peu technique !
Ce type d’app repose sur trois éléments techniques que nous allons détailler :
- Un fichier manifest ;
- Les Service Workers ;
- Les API HTML.
C’est grâce à ces trois éléments que la création et le développement d’une PWA est possible, et vous allez voir, ce n’est pas si compliqué.
Le fichier manifest
Le premier élément technique nécessaire à une PWA, c’est le manifest. Le manifest, c’est le fichier qui contient tout ce qui fait d’une PWA une PWA : le nom, son icône, l’URL, etc.
Concrètement, voilà à quoi peut ressembler ce fichier
Comme un package.json d’un projet utilisant NPM, ou l’AndroidManifest.xml d’un projet Android, ce fichier contient tout l’aspect déclaratif de l’app, ce sur quoi le système va se baser pour créer la Progressive Web App.
Pour de la doc sur le fichier manifest, allez voir ici !
Les Service Workers
Une fois l’app déclarée via le manifest, elle va fonctionner autour de service workers.
Ce sont des fichiers qui permettent d’introduire dans une webapp des processus, ou des tâches, exécutés en background. Donc de manière transparente pour l’application, ainsi que pour l’utilisateur.
La principale utilisation du service worker est de pouvoir lancer la PWA en mode offline et de gérer le cache de celle-ci.
Allez ici pour plus d’infos sur les service worker.
Les API HTML
La troisième composante qui rentre en jeu lorsqu’on parle Progressive Web App, ce sont les API HTML. Ce sont les API que les navigateurs mettent à disposition et permettant d’avoir accès à certaines fonctionnalités. Par exemple à la localisation de l’appareil, aux notifications, à la caméra, etc.
La PWA étant de base un site web, elle a accès aux API HTML et se repose dessus pour proposer aux utilisateurs une expérience qui se rapproche du natif.
Malheureusemenet, toutes les fonctionnalités d’une app native ne sont pas disponibles via ces API. Et quand elles le sont, cela ne veut pas dire qu’elles ont été implémentées par les navigateurs.
On se doute que, Apple étant réfractaire à ce type d’utilisation, Safari ne donne accès qu’à peu de ces API – pour le moment.
Pour savoir à quelles API votre navigateur courant a accès, vous pouvez aller sur ce lien !
Les PWA, un bon choix ?
À ce niveau de lecture de l’article, vous avez probablement assez d’informations pour savoir si les PWA sont faites pour vous ou pour le projet que vous souhaitez développer.
Mais, essayons de répondre à la question de manière plus générale. les PWA sont-elles un bon choix, comparées à d’autres technos ?
La réponse serait « oui, mais » :
- Le développement est certes unique pour toutes les plateformes, mais ce n’est pas nouveau (cross platform : React Native, Ionic, etc.) ;
- Ça peut provoquer d’éventuelles instabilités, car il y a de multiples navigateurs disponibles sur smartphones, et les API HTML ne sont pas toutes supportées par tous ;
- L’expérience utilisateur proche du natif a ses limites, notamment du côté d’Apple.
Mais comme pour toute techno de développement, la stack technique dépend du besoin et des moyens !
Avez-vous déjà développé des Progressive Web App ? Si oui, quels en sont vos retours ?
