Une PWA, c’est quoi au juste ?
Plus que jamais, les périphériques mobiles sont utilisés pour naviguer sur le web. Cet article datant de 2016 titrait déjà « Mobile web browsing overtakes desktop for the first time ».
Aujourd’hui, il est donc impératif que les contenus proposés sur le web répondent de manière optimale, aux attentes des utilisateurs de smartphones et tablettes, aussi bien en termes d’utilisabilité et d’intégration, que d’ergonomie et d’accessibilité générale.
Tant que ces contenus restent centrés sur un site web classique, généralement les modèles de présentation et de navigation répondent bien aux attentes des plus exigeantes, mais dès lors que les contenus deviennent un brin plus applicatif, les problèmes d’utilisabilité commencent à apparaître, et les solutions pour y remédier ne sont pas toujours simples à mettre en place.
C’est là que peuvent entrer en scène les Progressive Web Application.
Application vs site web
Dès qu’on parle application, et qu’on ajoute le terme mobile, on s’oriente immédiatement en fonction de son téléphone, vers Play Store ou App Store. Les applications s’installent, s’utilisent, se désinstallent, se partagent… de manière quasi transparente, et surtout, c’est une démarche quasi permanente.
Ces magasins (Store) sont devenus tellement visités, et si incontournables, que pour beaucoup d’utilisateurs de cette navigo-sphère, la question est « Comment faisait-on avant ? ».
Même Windows s’y est mis, et propose en complément de son système d’exploitation, son propre Microsoft Store, c’est dire !
En fonction que l’on soit utilisateur ou développeur d’applications, la réponse à la question principale qui se pose est alors diamétralement opposée.
Du côté des utilisateurs la question est : « Est ce que le magasin de mon OS propose cette application ? », Car il est vrai que parfois certaines applications ne sont disponibles que sous Android, ou que sous IOS, mais pas sur les deux.
Et d’un autre côté, les développeurs eux se demandent ce qu’il en est de la distribution de l’application « Faut-il donc développer uniquement en Java (ou Kotlin) pour être présent sur Play Store, et/ou, également en Objectif C (ou Swift) afin de satisfaire et répondre à l’App Store. Sans oublier de savoir ce qu’il en quant à l’accès par un navigateur Web ? ». Bref, en fonction de ces choix, les couts de développement pourront passer du simple ou double, voir au triple ! Sans compter les mises à jour annuelles de chacun des OS qui demandent parfois des mises à jour conséquentes à assurer.
HTML5 et navigateurs
À la fin des années 2000, le w3c et le whatwg s’époumonaient à expliquer que le web allait devenir applicatif. Le premier groupe travaillait sur le xHTML 2.0 et le second pensait qu’afin de préserver la rétrocompatibilité, le web devait poursuivre avec HTML, en s’orientant HTML5. Quoiqu’il en soit, la solution devait devenir un véritable standard qui soit suivie, et intégrée, par l’ensemble des éditeurs de navigateurs.
HTML5 est devenu ce standard, et ne se résume pas qu’à une énième version du langage structuré, bien au contraire il se complète par toute une panoplie d’API permettant aux navigateurs web de devenir des outils clients pleinement opérationnels et répondant à de multiples services. Voir l’article HTML5 qui lui est pleinement dédié.
HTML5 serait donc une alternative qui permet de créer un site web servi comme une application.
Attention, ce type de pseudo application n’étant pas native aux OS, aussi bien Android que IOS peut rencontrer quelques freins d’utilisation comme pour des jeux graphiques qui réclament des ressources très importantes, ou des applications qui, pour des raisons de stratégies marketing, se devraient d’être présentes sur App Store.Play Store et Microsoft Store autorisent la publication de PWA auprès de leur services. Dans ces cas-là, une PWA peut ne pas être adaptée, mais dans de nombreuses situations, cela reste une option largement considérable.
PWA, pour Progressive Web Application
Donc en fait, une PWA est un site web servi comme une application, et en ce sens, on va se voir proposer son installation sur la machine hôte. Bon, la proposition ne se fait pas dès la première visite afin d’éviter une intrusion trop forte si vous naviguez occasionnellement sur des sites PWA. Dès l’acceptation, un icone s’ajouter à l’écran d’accueil et va permettre de lancer l’application en mode plein écran, comme s’il s’agissait d’une application native.
Hormis le fait de fonctionner en plein écran, grâce aux API HTML5, une PWA pourra utiliser tous les services de l’appareil mobile, tels que la géolocalisation, le carnet de contacts, la caméra, pour n’en citer que les plus classiques, et même de pouvoir continuer de fonctionner hors connexion. En fait, toujours comme le ferait une véritable application native.
Attention, également à ne pas vouloir transformer systématiquement tout sites web en PWA. Il est intéressant de réaliser cette métamorphose, uniquement lorsque l’on a à faire à un site web applicatif, un site qui propose un service à l’internaute et qui a besoin de s’appuyer sur des fonctionnalités croisées avec les outils de l’appareil mobile, ou de recevoir des informations sans pour autant devoir recharger la page.
Bien que cela ne soit pas une condition imposée, on constate généralement que beaucoup de PWA sont construites sur le modèle des sites web one page.
Soulevons rapidement le capot ?
Les PWA n’emploient que des langages qui sont déjà présents par défaut pour construire nos sites web, HTML pour la structure et le contenu, CSS pour l’affichage et JavaScript pour l’interaction.
Que faut-il donc faire pour que notre site web applicatif se transforme en PWA ?
En réalité cela commence par pas grand-chose, il faut juste s’assurer que les trois points suivants soient mis en place.
1 – Le site doit impérativement être servis en Https.
Bien qu’il soit aujourd’hui rare de rencontrer des sites qui soient toujours servis en http, il se peut que vous ayez à intervenir pour opérer cette bascule, et cela va donc devenir la première étape à valider afin de transformer le site en PWA. Vous trouverez une description synthétique sur ce premier article, Protéger son site derrière un protocole sécurisé, et un pas à pas détaillé sur ce second Migrer son site de HTTP vers HTTPs.
2 – Un fichier manifest.json doit être fournis
N’étant pas l’objectif de cet article, nous ne rentrerons pas dans les détails de la mise en place de ce fichier, mais de manière succincte, il s’agit d’un fichier au format JSON qui décrit les principales propriétés de notre PWA, page d’accueil, icones, couleur et écran d’accueil, etc. La présence du fichier manifest.json à la racine du site va donc permettre de prendre en compte une partie de l’installation du site web sur l’appareil mobile, l’autre partie étant prise en compte par le troisième point, le Service Worker.
3 – Emploi d’un Service Worker
Le Service Worker est une API permettant de réaliser une passerelle entre l’application et le serveur. Ce service va donc commençer par mettre en cache les fichiers définis par le service, afin de pouvoir les redistribuer lorsque la connexion vient à ne plus être active.
Il ne faut pas confondre cette API avec deux autres outils qui sont Local Storage et Session Storage qui elles prendront en charge les données à proprement parlé. Toutefois, ces deux dernières API ne sont pas obligatoires pour activer la mise en place une PWA.
Il est facile de constater que la bascule entre un site web application est une PWA n’est pas une tache qui est en soit fastidieuse. Maintenant ne nous réjouissons pas trop vite, car si cette étape est relativement rapide, elle n’occulte pas le développement de l’application ainsi que la prise en charge de chacun de ses aspects.
En résumé quels avantages apportent une PWA
En conclusion, nous dirons donc que les avantages de la mise en place d’une PWA sont :
- Principalement un cout très bas et une facilité de mise en place accrus,
- Une fois déposée sur le serveur, l’application reste accessible de manière identique aussi bien aux plateformes Android et IOs, qu’aux habituels navigateurs web,
- L’application peut continuer à fonctionner même si le périphérique est placé hors ligne,
- L’application, grâce aux CSS restera Responsive et s’adaptera bien à tout type de périphériques,
- La mise à jour, l’évolution et le maintien de l’application est largement facilité. Dès lors que les nouveaux fichiers et données sont placés sur le serveur, les périphériques peuvent recevoir les nouvelles versions,
- Du fait de sa présence sur le web sous forme de site web, l’application reste pleinement accessible aux moteurs de recherche et donc peut être mise à disposition des utilisateurs lors de leur recherche,
- Il est également possible de pouvoir déposer une PWA sur Play Store et Windows Store
Quels seraient les inconvénients ?
- À ce jour il n’est toujours pas possible de déposer une PWA sur App Store,
- Il est préférable pour certains types d’applications qui nécessitent beaucoup de ressources de développer des applications natives, les jeux très graphiques notamment,
- La gestion de l’application directement au niveau du système d’accueil, espace mémoire, ressources, etc… n’est pas disponible.
Une fois encore cet article n’étant pas approprié pour aller plus loin dans l’exploration et la mise en place d’une PWA, il est conseillé de se rapprocher de l’article dédié à cet effet, Premiers pas en PWA [en cours de rédaction].