Progressive Web App (PWA) : la nouvelle donne pour les Applications

Depuis leur création, les navigateurs étaient utilisés pour afficher des « pages » web générées coté serveur. Les pages étaient rafraichies complètement lors de chaque point de navigation effectué par les internautes. Encore aujourd’hui, une énorme majorité de sites web fonctionnent de la sorte.

Il est à noter que, à l’inverse, nombre d’Applications Flash étaient conçues de manière à assurer une navigation riche et fluide dans un environnement graphique sur-mesure et maîtrisé. 

Aujourd’hui, nous assistons à un nouveau mouvement qui consiste à donner plus de capacité au navigateur, via javascript et Ajax. En effet depuis quelques années on constate que des Applications web riches commencent à être créées, en premier lieu par les grands acteurs du web (Google, Facebook, Twitter, AirBNB etc.). Cette nouvelle génération d’Applications web, sans plug-in, permet de proposer aux internautes un grand confort de navigation et une expérience utilisateur très qualitative, à l’image des Applications Flash avant 2010.

L’arrivée des PWA conforte ce mouvement et va permettre aux Applications web de pouvoir bénéficier de fonctionnalités étendues qui vont de plus en plus éloigner les Applications web du monde des sites internet.

Responsive

Pour répondre aux nouvelles exigences liées à la multiplications des formats d’écrans (smartphone, tablette, ordinateur, TV), de nouvelles techniques et de nouvelles conceptions voient le jour pour permettre aux contenus de s’afficher dans les meilleures conditions quelque soit la taille et le format de l’écran. Ainsi des structures de « pages » se réorganisent de manière à afficher ses contenus de la manière la plus adaptée possible.

Ces nouvelles contraintes, fortes, ont aussi un inconvénient. Face à toutes ces caractéristiques à prendre on compte, on constate une appauvrissement du paysage web. De plus en plus de recettes toutes faites se répandent.

Toujours est-il que les PWA bénéficient de toutes ces capacités dynamiques qu’ont désormais les navigateurs pour repositionner de manière performante, tous les composants visuels en fonction de l’espace disponible à l’écran.

Adaptation à la qualité du réseau

Les navigateurs web ont été conçus initialement pour afficher des contenus issus de serveurs web via une connexion internet. En absence de connexion les navigateurs affichent des messages d’erreurs, ou plus malin avec Chrome, un jeu sommaire avec le tyrannosaure. Les PWA vont pouvoir répondre à cette absence de connectivité en pouvant démarrer, une fois installées, sans connexion internet. Ainsi accéder à un site web via son url sans connexion est désormais possible. Le territoire numérique associé au nom de domaine reste donc toujours joignable.

Notifications

Une PWA, une fois installée dans le navigateur peut proposer à ses utilisateurs des fonctionnalités, même si celle-ci n’est pas active. Si l’utilisateur le souhaite, il peut souscrire aux notifications que l’Application lui propose. Ainsi, si l’Application diffuse des news et que le back-office s’y prête, la publication de nouvelles news peut déclencher des notifications chez l’utilisateur sans que l’Application soit ouverte et ainsi attirer du trafic. Il va de soi que cette fonctionnalité assez intrusive doit être utilisée avec discernement.

Performance

Une fois installée, le navigateur dispose de tous les fichiers nécessaires au démarrage de l’Application. Une fois installée la PWA démarre plus rapidement et tente de se connecter à internet uniquement pour récupérer les contenus (textes, images, vidéos, musiques etc.), s’ils n’ont pas déjà été mis en cache.

Comme nous venons de le voir, une PWA ressemble de très près à une Application native que l’on peut retrouver sur les AppStore d’Apple, de Androïd ou de Microsoft. Nous abordons là un point déterminant dans la manière dont les annonceurs vont décider, dans un proche avenir, de la manière qu’ils vont investir pour promouvoir leurs services et leur capital numérique.

L’avantage non négligeable de la PWA est de pouvoir être référencée via les moteurs de recherche comme n’importe quel site internet, contrairement aux AppStores, dans lesquels les Applications sont bien souvent difficiles à trouver et référencées dans un système fermé.

Ainsi une même Application d’un point de vue marketing, peut être trouvée 3 fois de 3 manières différentes selon le store dans lequel elle est distribuée. Et d’un point de vue technique, ces mêmes Applications peuvent parfois avoir 3 codes sources différents, 3 sources de bugs potentiels. Dans ce cas de figure, plutôt que de parler d’une Application, on pourrait quasiment considérer qu’il s’agit de 3 Applications distinctes.

Rien de tout cela avec une PWA, une seul code source est à maintenir, une PWA peut adresser tous les types de devices. On peut aussi la trouver aussi naturellement qu’on fait une recherche via Google. De plus, étant référencée par le moteurs de recherche, tous les contenus disponibles au sein de l’Application sont candidats au référencement naturel et au partage sur les réseaux sociaux, quand une Application issue des AppStores est une boîte noire, invisible de l’extérieur.

Mise à jour automatisée

Comme toute Application installable, une PWA doit pouvoir détecter et proposer les mises à jour disponibles. Il existe des mécanismes de mises à jour qui vont permettre à la PWA de détecter qu’une nouvelle version est disponible et de l’installer. Une fois la mise à jour effectuée avec succès, l’Application va pouvoir décider d’afficher un message invitant l’utilisateur à rafraîchir son navigateur. Il est également possible de pouvoir manuellement vérifier si des mises à jours sont disponibles ou non.

Poids limité

Une PWA est constituée de fichiers javascript, HTML et CSS compilés, minifiés. Le poids de tous ces fichiers est très inférieur au poids d’une Application compilée pour être distribuée sur IOS ou Android, ce qui représente un gain d’espace disque non négligeable pour les smartphones ou les tablettes.

Kit graphique semblable à une Application

Une PWA est matérialisée, pour le navigateur, par un fichier manifest qui va regrouper les informations essentielles de l’Application, pour être comprise de l’extérieur. Figurent dans ce manifeste, le nom de l’Application, son nom raccourci (qui s’affichera sous l’icône), l’icône de l’Application, le visuel à afficher pendant que l’Application démarre, etc. On retrouve un peu les mêmes types d’éléments à fournir que lorsque l’on soumet une Application aux AppStores d’Apple ou Android.

Intégration de plus en plus poussée dans les OS

Microsoft a annoncé récemment le support des PWA dans Edge, le navigateur par défaut des dernières versions de Windows. Ils ont également annoncé vouloir donner plus de place aux PWA, en permettant notamment de les distribuer via le Windows App Store, ce qui serait un vecteur de diffusion très intéressant, notamment en ce qui concerne le déploiement d’Applications métiers au sein d’un réseau d’une grande entreprise.

Pas de droits administrateurs requis

L’installation de PWA ne nécessite pas les droits administrateurs et permet donc un déploiement plus aisé des Applications au sein des grands groupes. L’intégration poussée avec Windows, que semble vouloir mettre en place Microsoft, pourrait accélérer le déploiement de ce type d’Applications dans un proche avenir.

Le web devrait de moins en moins se limiter à la diffusion de sites internet

Avec l’arrivée des PWA et les capacités étendues des navigateurs, nous allons sans doute assister à une grande évolution des usages du web. Si jusqu’à maintenant il y avait une frontière assez étanche entre un site web et une Application, les usages de la PWA vont permettre de concevoir et développer des Applications qui vont pouvoir être disponibles à tous moments, quelque soit la connexion.

Une PWA va pouvoir s’exprimer en tant que site web classique ou Application installée et répondre ainsi à une très large palette de besoins, autant en communication externe, en services marchands, que dans le cadre d’Applications corporate.

Les CMS commencent à se préparer à ces évolutions

Une PWA, comme un site web, dépends rarement de contenus statiques. La grande majorité des sites web reposent sur des CMS type Wordpress ou Drupal qui permettent aux utilisateurs de créer du contenu. Ces CMS reposaient jusqu’à il y a peu sur le fait que ce qui est affiché à l’écran, la couche de thème, est intimement lié au back-office, à la manière dont les données sont structurées, stockées. Ce couplage fort devient un inconvénient lorsqu’on souhaite développer une Application autonome qui n’a besoin que d’une chose : récupérer puis afficher des données en fonction d’une url donnée.

WordPress et Drupal commencent à prendre en compte ce principe en déclinant leur solution en mode API first, afin de permettre un découplage total entre le back-office et le front-office. Cela permet non seulement de donner une totale liberté de conception à une Application, mais cela permet aussi d’imaginer toute une collection d’Applications, avec des usages différents, allant récupérer leurs données dans la même source, permettant ainsi de fédérer et synchroniser de fait les informations.

L’arrivée des PWAs va se faire progressivement et il va falloir éduquer les utilisateurs pour rendre explicite cette nouvelle caractéristique.
Pour cela nous pensons qu’il est utile de proposer une sorte de résumé des caractéristiques de la PWA, à la manière des Applications disponible dans un AppStore, avec les informations suivantes :

• nom de l’Application
• numéro de version
• date de dernière mise à jour
• espace disque occupée par la PWA
• une fonction de vérification des mises à jour disponibles
• une fonction qui permet de désinstaller la PWA
• une fonction qui permet de souscrire aux notifications de la PWA
• une fonction qui permet d’annuler la souscription aux notifications le cas échéant

Depuis 1998 ICI LA LUNE, imagine, conçoit et réalise des Application web hautement interactives mêlant images, musique, vidéo et 3D temps réel. Exigeante sur la créativité et les émotions que peuvent véhiculer l’interactivité, l’Agence est aussi très sensible à la manière dont tous les éléments d’affichage peuvent être mis à jour par le Client final et traduisible en de multiples langues.

Ainsi, en 2001, l’Agence conçoit et réalise son CMS full Flash qui va lui servir à produire une grande variété d’Applications : sites web, bornes interactives, CD-ROM etc. Ce CMS permettait de modéliser les contenus et de les exporter pour un fonctionnement on-line ou off-line.

En 2007, ICI LA LUNE fait le choix de Drupal pour le back-office de ses réalisations. Attaché à proposer des expériences utilisateurs riches, l’Agence continue à miser sur Flash, la seule technologie en mesure de proposer une navigation immersive dans un contexte graphique maîtrisé.

Depuis 2007, l’Agence utilise Drupal dans le mode qui est appelé aujourd’hui "headless", c'est-à-dire sans la couche de theming, en mode API seul. De 2007 à 2014, nous réalisions des Applications Flash/Flex, à partir de 2014, nous avons identifié Angular comme étant le successeur technologique de Flash.

Pour toutes ces raisons, nous suivons de très près les futurs développements des PWA et nous nous positionnons comme des acteurs précurseurs de ces nouveaux usages. Le site de l’agence est une PWA depuis décembre 2017, des améliorations y sont apportées régulièrement dans le but d’intégrer ces nouvelles fonctionnalités le mieux possible.