Progressive Web Apps, PWAMP et WordPress, notre avenir à tous ?

Vous avez peut-être déjà entendu ces mots sans vraiment en comprendre le sens. Les Progressive Web Apps autrement dit PWA, ou bien encore l’Accelerated Mobile pages, voire même pour les plus renseignés la concaténation des deux PWAMP ! Bouhhh ça fait peur.

Par cet exercice de rédaction je vais tenter de déchiffrer cela pour vous et répondre à 3 questions : c’est quoi ? dans quel but ? comment ? afin de pouvoir expliquer cela à vos collaborateurs et intégrer cette innovation technologique dans votre environnement de travail. Sympathique n’est-ce pas ?

Nom de diou qu’est-ce que ce charabia ? PWA, AMP, PWAMP ?

Commençons par le commencement : l’AMP, que j’avais déjà présenté dans un précédent article est une technologie développée par Google pour les mobiles, qui a pour but d’alléger et donc d’afficher plus rapidement, tout en consommant moins de data, des pages web (plus généralement du contenu, type article). La technologie est déjà rodée et fonctionne correctement. Les sites la mettent de plus en plus en place et de nombreuses solutions/extensions ont été créées pour faciliter la « transition ». Problème, l’AMP certes performante est très limitée dans ses possibilités (volontairement) et est très difficilement applicable à un site en entier. Ce n’est d’ailleurs pas sa vocation.

C’est là qu’entrent en jeu les PWA. C’est un ensemble de technologies qui, comme l’AMP, sont conçues pour l’ensemble d’un site web. Par la mise en cache de l’ensemble du site et non seulement des ressources comme pour l’AMP, le contenu est chargé presque instantanément et potentiellement hors connexion (si vous avez déjà visité le site bien entendu). Les PWA souhaitent profiter des avantages des applications mobiles tout en évitant leurs contraintes. PWA a vocation à remplacer toutes les versions d’un site web ainsi que les applications mobiles, par un seul et unique site, tout en prenant les avantages des applications (contenu hors ligne) et en gardant une même ligne directrice quant au design et à l’interface utilisateur.

Google à mis en place un site et une checklist pour savoir si son site est correctement mise en place en PWA. Vous l’aurez compris, les PWA sont un ensemble de pratiques qui peuvent être faites avec des langages « basiques ». Mais il existe aussi des langages ou plutôt des frameworks faits pour les PWA, et qui incluent une logique de composants. En somme, chaque composant inclut une fonctionnalité (comme le menu par exemple) et l’ensemble de son code est indépendant du reste du site. Polyler est une librairie Javascript de composants HTML qui suit cette logique (même s’il est plus adapté à des interfaces qu’à des sites web) et dispose déjà d’une bibliothèque de composants pré-existante. Vous pouvez donc très bien imaginer un site web réalisé avec Polymer pour le front, avec du react JS pour le javascript qui est compatible avec Polymer, et un autre langage pour le back end.

Alors pourquoi parler de PWAMP ? Il s’agit bien de deux choses différentes : l’AMP est une technologie plutôt simple à mettre en place, beaucoup la préféreront et vous diront même qu’il vaut mieux mettre cela en place à défaut d’une PWA. Bien qu’ils aient en partie raison (vous pouvez commencez par mettre l’AMP en place sur votre site) il s’agit la encore de deux choses différentes et surtout complémentaires. L’AMP est surtout dédié aux articles, car il permet de mettre en cache les ressources, poser une architecture, repenser pour le HTML, mais bloque le javascript, ce qui pour un site web entier n’est pas viable, et encore moins pour un site tournant sous un CMS tel que WordPress. Les articles n’ont pas nécessairement besoin de javascript pour fonctionner. En revanche, les pages de votre site, les formulaires, les menus, etc, oui ! Les progressive web app, elles, ne limitent pas l’utilisations du javascript et ne changent pas les technologies utilisées, juste la méthode de mise en cache et un ensemble de bonnes pratiques. De ce fait ont peut très bien ajouter de l’AMP qui est une technologie à notre méthode, un contenant à notre conteneur. On parle alors de PWA + AMP = PWAMP.

Y a-t-il un intérêt à mettre en place PWAMP ?

Alors tout ça c’est bien joli mais à quoi ça sert ? Premièrement, toutes ces technologie visent un but commun : la navigation sur mobile. A l’heure actuelle, un site d’envergure doit à minima proposer une version desktop, une version responsive, si utile une application mobile, et si possible ou à défaut de l’application, une version AMP.

Cela présente plusieurs inconvénients :

• multiplie le coût du développement, du maquettage
• plusieurs accès nécessaires pour la gestion et pour l’utilisateur
• une apparence souvent différente de chaque version (ce qui en termes d’ergonomie n’est pas l’idéal)
• une expérience utilisateur qui peut être dégradée sur certaines version du site qui peuvent présenter moins de possibilités ou moins bien fonctionner
• des versions parfois mal développées qui résultent d’une multiplication de développements et d’un budget mangé par cela plutôt que par l’optimisation d’une version
• moins d’engagement sur une application mobile de la part des utilisateurs, que sur un site web plus contraignant.

De ce fait, les PWA veulent remplacer tout cela d’un coup de baguette magique et ne proposer qu’une seule et unique version pour un site web, soit un seul développement pour un site web  (ou presque) tout en gardant les avantages des applications mobiles (la mise en cache et donc la consultation hors ligne). Il est bien plus simple de maintenir un environnement que plusieurs, et de garder une cohérence graphique et technique.

En somme, les PWA et plus globalement les PWAMP sont la nouvelle génération de nos sites web qui vont remplacer les applications mobiles, technologie d’une génération révolue.

Le problème c’est qu’il faut refaire l’ensemble du site pour le convertir, alors que pour l’AMP cela pouvait être fait en activant et configurant deux extensions. De ce fait sa mise en place est fastidieuse bien que pérenne et à mon sens nécessaire.

Le mettre en place sous WordPress ? Une utopie ?

WordPress de par sa structure n’est pas vraiment fait pour les PWA. Certes nous y retrouvons un peu de modularité via les plugins, et les thèmes, mais ceux-ci sont dépendants du corps de WordPress pour fonctionner, et de ce fait, tout les scripts sont appelés au chargement du thème.

Un plugin existe, et propose un thème mobile PWA, ce qui est assez aberrant car la version desktop est la même que celle sur mobile, sans adaptation des composants. De ce fait (et même si je ne l’ai pas installé) je ne pense pas que ce soit une option viable pour WordPress. Je vous mets tout de même le lien si vous êtes curieux, mais prenez garde à ne pas acheter n’importe quoi sous prétexte que si c’est nommé « Progressive web App » c’en est forcément une. Il faut toujours comprendre ce que fait un plugin avant de l’installer sur votre site, et aller plus loin que le titre ou la description.

Techniquement, vous pouvez avoir un site WordPress qui est une PWA, si vous respectez l’ensembles des pratiques indiquées par Google. Lighthouse est une fonctionnalité pour Google Chrome qui vous permet d’améliorer votre site en ce sens. A l’heure actuelle, il n’y a pas réellement d’extensions magiques vous permettant de le mettre en place d’un seul clic : vous devrez passez par la case développement.

Dans un second temps et, à mon sens, respecter ces pratiques ne suffit pas, la notion devrait être étendue à la logique de Polymer, qui est d’avoir des composants indépendants du site pour chaque élément.

Si cet article vous a plu, nous vous invitons à découvrir notre agence wordpress et à télécharger notre livre blanc « Les 11 commandements d’un site internet qui convertit vos visiteurs en clients »