PWA & e-commerce
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.
PWA ?
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 :
- Fiables : disponibilité même hors-ligne et quasi-instantanée (grâce aux Service Workers)
- Rapides : une fois chargée, l'application doit être très réactive
- Engageantes : mode plein écran, notification push
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 :
- Servie de manière sécurisée en HTTPS
- Responsive sur tablette et mobiles
- Disponible offline (même en offrant un mode dégradé)
- Installable comme icône sur la homepage de son mobile (grâce à un Web App Manifest)
- Rapide, même sur des réseaux téléphoniques lents, en 3G par exemple
- Compatible avec les principaux navigateurs (Chrome, Safari, Firefox, Edge)
- Fluide grâce des transitions non-bloquantes entre les pages (utilisation de loaders et de skeleton screens)
- Linkable en offrant des URLs uniques par page, afin notamment de pouvoir être partagées
Une checklist complète et détaillée est disponible, toujours chez Google et sur notre infographie.
Mieux qu'une app native ?
Parmi les avantages de la PWA sur les applications natives (principalement installées depuis les stores type Google Play et App Store d'Apple) :
- Pas de déploiement sur les app stores, et donc pas de contrainte imposée par leurs règles de publication
- Installation instantannée, pas de téléchargement d'app
- Une fois développée (dans des langages web standard : HTML/JS/CSS), la PWA est compatible avec tous les appareils
Mais également quelques inconvénients, au profit des applications natives :
- Niveau de compatibilité PWA différent selon l'OS cible (possibilité de suggérer l'installation sur l'écran d'accueil sous Android seulement, espace disque disponibile limité sous iOS, etc.)
- Accès à la totalité des fonctionnalités offertes par l'OS (pas d'accès aux contacts par exemple depuis une PWA)
- Mode hors-ligne limité aux contenus pré-chargés dans les PWA
PWA : un (petit) peu de technique
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 :
Performances et scalabilité
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.
Microservices
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.).
REST & GraphQL
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).
PWA, e-commerce et mobile-first
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.
Découplage frontend & backend
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 :
- Frontend : application statique riche Javascript, exécutée côté navigateur
- Backend : application côté serveur (Magento ou Sylius par exemple), exposant des APIs (REST, GraphQL) consommées par le frontend
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.
Avantages et inconvénients
Parmi les nombreux avantages qu'offrent les PWA dans un contexte e-commerce, citons notamment :
- Une expérience utilisateur optimale (fluidité, rapidité et sécurité), et donc une meilleure conversion
- Une scalabilité (capacité de trafic) quasi-illimitée pour la brique frontend, et optimisée pour le backend (découpage en composants, sharding, etc.)
- La possibilité de déployer des évolutions frontend plus rapidement, sans impact sur le backend
- Une meilleure architecture applicative : le frontend et le backend ne sont plus couplés, et peuvent évoluer distinctement
Notons également certains inconvénients à la mise en oeuvre de PWA :
- Maintenance de deux briques applicatives au lieu d'une seule, nécessitant des compétences différentes (Javascript pour le frontend, et PHP, Java, Ruby ou autre pour le backend)
- Intégration plus complexe de solution tierces (moteur de recommandation, de recherche, etc.) nécessitant à la fois une intégration frontend et backend
- SEO : le moteur d'indexation (crawler) de Google exécute le Javascript, mais avec certaines limitations ; il peut ainsi être nécessaire de mettre en place une solution type Server-Side Rendering (SSR), qui consiste à pré-générer les pages côté serveur, avant de les servir aux crawlers des moteurs de recherche.