Découvrir les PWA : Progressive Web Apps

Introduction : Le nombre de technologies pour développer des applications mobiles ne fait que progresser au fil du temps. Chaque constructeur veut imposer sa propre technologie, tout est devenu tellement complexe qu’il est presque impossible de s’y retrouver même pour un passionné. Cet article essaye de résumer la situation sans rentrer trop dans les détails.

Historique

Il faut tout d’abord faire la distinction entre les applications lourdes et les applications dites légères.

Sur PC les applications lourdes (par exemple Excel) sont installées avec un installeur sur votre disque dur local.

Les applications légères sont des logiciels qui fonctionnent dans votre navigateur (Chrome, Firefox...).

Sur un mobile, les applications proviennent majoritairement des stores. On peut les rapprocher des applications lourdes sur PC car elles nécessitent une installation sur votre mobile pour fonctionner.

Les développeurs qui veulent mettre leurs applications sur les stores doivent faire vérifier leurs applications par Google ou Apple pour s’assurer qu’elles ne contiennent pas de virus. Le processus de vérification est totalement automatisé et ne prend que quelques heures. Google et Apple interdisent aussi certaines applications sur leurs stores et prennent de 15 à 30% des bénéfices générés par votre application. Après demande à l’utilisateur les applications peuvent avoir accès à pratiquement toutes les fonctions du mobile (caméra, images, contact…).

Il faut noter que même si Google et Apple font des vérifications pour éviter les virus sur leurs stores, ils ne regardent absolument pas le fonctionnement interne du logiciel qui peut envoyer toutes les données qu’il veut (envoi des données GPS à des sociétés de publicités par exemple si vous donnez votre accord pour l’utilisation de votre GPS).

Sur PC l’application lourde est en voie de disparition dans de nombreux domaines. Plus personne ne veut installer un logiciel spécifique dans l’entreprise pour poser des congés. Tout ce fait grâce à un site web sur l’intranet de la société.

L’application lourde reste quand même d’actualité pour les logiciels qui demandent beaucoup de ressource logicielle : création de vidéo, de musique…

Sur PC le web a gagné, les utilisateurs vont directement sur le site de Booking.com et n’installent pas l’application.

Sur mobile la situation est différente, l’ouverture d’un site web est plus lente que celle d’une application. Les utilisateurs ne souhaitent pas attendre 3s avant l’ouverture d’une page. Les gens ont donc préféré utiliser les applications plutôt que les sites web.

Le problème pour les sociétés vient du coût de création de ces applications. Le site web est écrit avec les technologies HTML/CSS tandis que les applications Android sont écrites en Java/Kotlin et les applications Apple avec Swift.

Dans les années 2010 de nombreuses sociétés ont tenté d’unifier tous ces langages pour ne pas avoir à réécrire le même code pour chaque machine.

Dorénavant il y a une myriade de technologies pour développer des applications Android ou Apple : React Native, Flutter, Xamarin, Ionic…

Les Progressive Web App (PWA)

Mais le problème reste toujours le même, la plupart des sociétés voudraient avoir le même code pour l’application mobile et pour leur site web.

Google a donc mis au point les PWA : Progressive Web Apps. Il n'y a rien de vraiment nouveau ils ont juste rassemblé plusieurs technologies qui existaient auparavant.

Comme la technologie vient de Google elle fonctionne beaucoup mieux sur les mobiles Android que sur les mobiles Apple.

Les PWA sont pour simplifier des sites webs qui vont s’installer sur votre PC ou mobile, vous aurez une icône sur votre bureau comme n’importe quelle application. Sur Android quand vous allez lancer la PWA vous ne verrez plus le navigateur, vous aurez l’impression d’être dans une application comme une autre.

La documentation de Google pour les PWA spécifie que les PWA doivent être :

Rentrons tout de suite dans le vif du sujet et installons notre première PWA.

Installation d’une PWA sur PC

Les PWA ne sont pour l’instant pas disponible dans les stores. Il aller sur le site web pour télécharger une PWA.

Installation de la PWA du site l’Equipe sur un PC avec Google Chrome

1. Dans Google Chrome aller sur la page de l’Equipe

Une fois la page chargée vous voyez apparaître un plus (+) à côté de l’étoile des favoris.

PWA du site l'Equipe

2. Cliquer sur le (+) et laissez-vous guider. Voilà c'est fini !

Si le site ne satisfait pas aux exigences d’une PWA le symbole (+) ne va pas s’afficher. C’est le seul moyen de savoir si on peut installer le site comme une application PWA.

Il faut noter que sur d’autres navigateurs (edge chromium par exemple) vous pouvez installer tous les sites web même ceux qui ne sont pas une PWA.

Il faudra penser à installer un bouton d’installation directement dans votre site web sinon personne ne s’apercevra de la présence du petit plus dans la barre d’adresse.

Installation de la PWA du site l’Equipe sur mobile avec Google Chrome

1. Dans Google Chrome sur votre mobile aller sur la page de l’Equipe.

2. Ouvrir le menu (trois petits points) puis cliquer sur « Ajouter à l’écran d’accueil ».

3. Suivre ensuite les instructions.

Sur mobile tous les sites peuvent être installés même ceux qui ne sont pas des PWA. Si on installe un site qui n’est pas une Progressive Web Apps on se retrouve avec un simple favori pour un site web sur l’écran d’accueil.

Comme on vient de le voir l’installation est simple par contre aucun utilisateur ne le fera spontanément et personne ne peut savoir avant d’aller sur le site si le site est une véritable PWA.

En plus l’Equipe a une application classique sur le Google Store ce qui ajoute encore un peu plus de confusion. On peut installer l'application du store et la PWA sur le mobile, il y a très peu de différences.

A la fin si on lance la Progressive Web App l’Equipe sur le bureau on se retrouve avec le même site que le site web sauf qu’il n’est plus dans le navigateur. Il ressemble plus à une application qu’à un site web. C’est encore plus marquant sur mobile.

Vous pouvez continuer l'étude des Progressive Web App avec la création d'une web app. Des connaissances techniques sont requises.