Publié le 13/02/2019 par Michael BOUVY
On en entend parler depuis plusieurs années, 2019 devrait être l'année des PWA, notamment grâce une maturité technologique, et le support depuis mars 2018 des Service Workers dans iOS.
Nous allons présenter dans cet article ce que sont les PWA, mais également et surtout comment elles s'inscrivent dans le contexte d'une boutique e-commerce.
Les Progressive Web Apps sont un ensemble de principes d'expérience utilisateur appliqués aux applications web, et définies par Google comme suit :
En résumé, il s'agit de se rapprocher au maximum de l'expérience offerte par les applications mobiles natives, sans les contraintes de l'installation et de la publication sur les stores, tout en offrant une compatibilité avec tous types de devices et navigateurs (iOS, Android, Chrome, Safari, Firefox, Edge, etc.) à partir d'une unique webapp.
A noter que, bien que les PWA ciblent essentiellement les devices mobiles, les mêmes principes s'appliquent en usage desktop.
Une PWA devra à minima être :
Une checklist complète et détaillée est disponible, toujours chez Google et sur notre infographie.
Parmi les avantages de la PWA sur les applications natives (principalement installées depuis les stores type Google Play et App Store d'Apple) :
Mais également quelques inconvénients, au profit des applications natives :
Les PWA sont étroitement liées aux récentes évolutions technologiques du web, et notamment aux Single Page Applications (SPA), dont le but est d'éviter un rechargement de toute la page au clic sur un lien, et ainsi de bénéficier d'une expérience utilisateur fluide.
Popularisées initialement pour des sites dits vitrine ou des blogs, les SPA ont été popularisées par la maturité de frameworks / bibliothèques Javascript comme React (Facebook), Angular (Google) et Vue.js, et des outils comme Gatsby. Ceux-ci permettent d'offrir une expérience utilisateur riche et dynamique : les SPA s'exécutent dans le navigateur, à l'instar d'une application, et ne communiquent avec le serveur que pour récupérer des données (contenu d'un article par exemple).
JAMstack définit ainsi une architecture moderne de développement, basée sur du Javascript côté client, des APIs (côté serveur) et du Markup pré-généré (HTML en général), avec un ensemble de bonnes pratiques à respecter.
Ci-dessous un exemple de fonctionnement d'une webapp classique :
Et celui d'une PWA :
Un des aspects essentiels des PWA et SPA concerne les performances. Comme présenté ci-dessus, ces applications sont dites statiques : il n'y a pas de traitement nécessaire côté serveur pour générer une page web. Les contenus dynamiques sont récupérés à la demande par des appels à des API (REST et GraphQL principalement), réalisés par le navigateur après le chargement initial.
Ainsi, les SPA / PWA offrent des performances virtuellement illimitées en terme de scalabilité (dimensionnement), tout en assurant un temps de réponse minimal du serveur.
Les PWA s'inscrivent également dans le contexte relativement récent des microservices, visant à découper son application en (micro)services ayant chacun une responsabilité dédiée, autonome, et pas nécessairement dans la même technologie.
Popularisé par Amazon Web Services (AWS) et son service Lambda, le serverless ou FaaS (Function-as-a-Service) va également dans ce sens : il permet de déployer des fonctions (morceaux de code) autonomes, sans se soucier de l'infrastructure sous-jacente (hébergement) : tout est géré par le fournisseur de services (AWS, Google Cloud Platform, Microsoft Azure, etc.).
Devenu une référence depuis plusieurs années maintenant, le REST définit un ensemble de règles permettant d'exposer des ressources (produits, catégories, promos, etc.) via des webservices, le plus souvent au format JSON.
GraphQL, langage de requêtage d'API rendu public par Facebook en 2015, permet d'aller encore plus loin et comble certains manques de REST : récupération de données liées, typage, choix des données à récupérer, etc.
Sur une page catégorie d'une boutique e-commerce par exemple, il est possible en une seule requête GraphQL de récupérer toutes les informations nécessaires (et uniquement celles-ci) : titre de la catégorie, descriptif, et produits (visuel, libellé, prix, URL).
Le mobile représente désormais une part considérable du trafic des sites e-commerce (70 à 80%), mais représente une part bien plus faible des transactions et du chiffre d'affaires.
L'approche mobile-first est alors essentielle, l'expérience utilisateur doit être pensée pour les usages mobile, au niveau de la présentation, des fonctionnalités et des contenus.
L'application des PWA dans le domaine du e-commerce permet d'offrir aux utilisateurs une meilleure expérience, proche de celle d'une application native, plus rassurante, et ainsi d'optimiser la conversion sur les devices mobiles.
Magento et Sylius, pour ne citer qu'eux, l'ont bien compris, en publiant récemment le PWA Studio pour Magento 2.3+, et le ShopApiPlugin pour Sylius, offrant aux développeurs toutes les ressources nécessaires à la réalisation de PWA. A noter également la plateforme PWA open-source Vue Storefront, compatible avec Magento.
Là où le rendu de la totalité des pages d'une boutique était confié à une application côté serveur (Magento par exemple), les applications PWA e-commerce sont composées de 2 briques distinctes :
La partie présentation (affichage) est donc désormais déléguée à la brique frontend, là où la logique métier est confiée à la brique backend. On parle alors d'un backend headless, en opposition avec .
A noter que la brique backend n'est plus nécessairement monolithique : elle peut elle-même être un ensemble de plusieurs composants, chacun ayant un scope de fonctionnalités dédié (catalogue, checkout, client, etc.).
Par exemple, la brique catalogue n'a pas les mêmes contraintes que le checkout, ayant seulement besoin de lire des données, pouvant ainsi offrir des performances élevées.
Parmi les nombreux avantages qu'offrent les PWA dans un contexte e-commerce, citons notamment :
Notons également certains inconvénients à la mise en oeuvre de PWA :