Agence Dn'DNos solutionsPWA Studio

PWA Studio

Logo de la solution PWA Studio

La technologie PWA made by Magento

Lancée en 2018, PWA Studio est une extension qui s’intègre directement à Adobe Commerce (Magento), offrant la possibilité aux e-commerçants de créer, déployer et maintenir des vitrines évolutives. L’outil a été conçu de manière à proposer une nouvelle architecture front-end aux développeurs afin de les aider à concevoir des PWA sur Adobe Commerce (Magento), dans le but de gérer l’ensemble des canaux via une base de code et un workflow efficace. 

Composé de 3 briques (Pwa-buildpack, Peregrine et Venia storefront), PWA Studio apporte de nouvelles fonctionnalités à Adobe Commerce (Magento) telles que les notifications push, l’option plein-écran, le mode hors-ligne et le paiement sécurisé. Via sa version 2.4.3, Adobe Commerce (Magento) a introduit des optimisations performantes concernant PWA Studio ; la technologie s’accompagne désormais d’un kit Adobe XD (UI) doté de composants préconfigurés dans le but de permettre aux concepteurs de créer des expériences digitales encore plus intuitives et mobile-friendly. 

L’Agence Dn’D : partenaire de PWA Studio

Partenaire historique d’Adobe Commerce (Magento), l’Agence Dn’D propose l’implémentation de PWA Studio à ses clients e-commerçants afin de les aider à atteindre tous leurs objectifs de croissance. Impliquées dans la communauté Open Source d’Adobe Commerce (Magento), nos équipes maîtrisent les rouages de PWA Studio et ont récemment rédigé un article sur le façon de déployer l’outil dans Magento Cloud. Pour en savoir plus, n’hésitez pas à découvrir notre blogpost : How to deploy PWA Studio in Magento Cloud ?

à supprimer

La Progressive Web App est un site internet composé de fonctionnalités identiques à celles des applications mobiles natives. La PWA permet un accès au contenu sans avoir besoin d’une connexion internet et offre aux utilisateurs une expérimentation identique à celle d’une application mobile. Par exemple, même hors ligne, vous pouvez utiliser l’application Twitter sur votre smartphone et accéder au contenu de votre fil d’actualité (dans une certaine mesure, vous pouvez même retweeter et commenter des messages). Une fois la connexion rétablie, toutes les opérations sont automatiquement transférées en arrière-plan. La PWA suit cette logique et offre une expérience similaire à celle des applications natives, sans qu’il soit nécessaire de la télécharger ou de la mettre à jour régulièrement. 

Pourquoi les PWA représentent l’avenir du E-Commerce ?

Plus de rapidité pour votre plateforme 

  • Les PWA offrent une navigation rapide et efficace tout en réduisant considérablement le temps de chargement des pages.
  • Les PWA sont automatiquement mises à jour lors de leur chargement.
  • Lorsque vous enregistrez une PWA dans vos favoris, une icône s’affiche sur votre écran d’accueil (tout comme une application native), ce qui réduit le chemin d’accès des utilisateurs.
  • La PWA n’est développée qu’une seule fois et compatible à tous les systèmes, tandis que les applications natives nécessitent deux développements distincts : un pour Android et l’autre pour iOS.

Puisqu’elles utilisent une architecture Headless, les PWA peuvent être implémentées à votre magasin E-Commerce par API en seulement 3 mois.

dnd-pwa

Un gage de performance reconnu

  • Grâce à un temps de chargement plus rapide, la PWA diminue la charge du serveur. Pendant les périodes de trafic élevé telles que le Black Friday, votre boutique en ligne ne s’effondrera pas sous le poids des visites.
  • La PWA peut envoyer des notifications push sur mobile en temps réel pour attirer les utilisateurs même s’ils ne sont pas sur l’application.
  • En raison de son utilisation hors connexion, la PWA est très facilement accessible partout et à tout moment.  

Les PWA offrent à votre plateforme une ergonomie très intéressante. Exemple : Uber voulait implémenter une expérience native au sein d’une application Internet légère pour étendre ses services sur de nouveaux marchés et de nouvelles plateformes. La sortie de la PWA d’Uber a été un grand succès car l’application se charge rapidement, même avec une mauvaise connexion. L’enseigne a utilisé plusieurs astuces pour rendre l’application aussi légère que possible et cela a fonctionné, car le noyau de l’application m.uber ne pèse que 50 ko.

  • Grâce aux PWA, vous pouvez vous passer des web stores et déployer des applications sur un simple serveur réseau.
  • Selon Google, si le temps de chargement dépasse 3 secondes, 53 % des utilisateurs abandonneront votre site. Après le chargement, les utilisateurs s’attendent à ce qu’il soit rapide, sans qu’il y ait d’interface de défilement ou de réponse lente durant le parcours utilisateur. Les PWA répondent parfaitement à cette problématique, puisqu’elles utilisent ce que l’on appelle des “service workers”. Ces fichiers JavaScript s’exécutent séparément du fil principal du navigateur et contrôlent de façon proactive la mise en cache des ressources, ce qui leur permet d’offrir de bien meilleures performances que les applications web traditionnelles !

Magento PWA Studio : qu’est-ce que c’est ?

Magento PWA Studio est une nouvelle solution implémentée dans Adobe Commerce (Magento) conçue pour intégrer facilement des PWA E-Commerce. Via ce module, Adobe apporte une série d’outils et de bibliothèques modernes pour créer, déployer et maintenir des vitrines évolutives sur Magento. 

Lancée en 2018, l’un des grands objectifs de cette extension est de proposer une nouvelle architecture front-end aux développeurs afin de les aider à concevoir des PWA sur Magento, dans le but de gérer l’ensemble des canaux via une base de code et un workflow efficaces.

dnd-pwa-studio-magento

La solution possède tous les avantages des PWA traditionnelles. Pour une meilleure utilisation, elle nécessite GraphQL, qui fait partie de la version de développement d’Adobe Commerce (Magento). Compte tenu de la suite d’outils actuellement fournie par Magento PWA Studio, la solution apporte de nouvelles fonctionnalités à Magento telles que les notifications push, l’option plein écran, le mode hors ligne et le paiement sécurisé. 

L’outil se compose de 3 briques :  

  • Pwa-buildpack : contient les outils de développement et le processus de construction nécessaire à Magento pour développer une PWA avec, entre autres, l’utilisation de Webpack plutôt que Grunt.
  • Peregrine : une bibliothèque de composants React qui simplifie le développement de PWA Magento en fournissant l’ensemble des fonctionnalités de bases nécessaires.
  • Venia storefront : il s’agit d’un thème de démonstration qui peut également être utilisé comme thème de base. Il est entièrement construit à l’aide des outils mentionnés ci-dessus.
dnd-pwa-studio-magento-2

À travers sa version 2.4.3, Adobe Commerce (Magento) a introduit un lot de nouveautés intéressantes concernant PWA Studio. Désormais, la technologie s’accompagne d’un kit Adobe XD (UI) doté de composants préconfigurés pour permettre aux concepteurs de créer des expériences digitales encore plus intuitives et mobile-friendly. Consultez notre article sur les fonctionnalités d’Adobe Commerce 2.4.3 pour en savoir plus !

Caractéristiques et avantages de PWA Studio

Magento PWA Studio est une extension qui s’intègre directement à Magento . Par conséquent, c’est l’ensemble de l’environnement de développement PWA qui est à votre disposition, plus seulement un CMS E-Commerce. Un autre avantage de cette solution est sa grande flexibilité. En effet, même si elle fonctionne avec des thèmes génériques, l’application peut offrir une grande liberté de développement, ce qui permet de personnaliser entièrement la vitrine de votre plateforme et de l’adapter aux besoins de vos activités, le tout dans le respect des standards de la toile actuellement en vigueur.

Magento PWA Studio bénéficie de nombreux autres avantages :

  • M-Commerce : selon une étude menée par PayPal en 2019, 57% des consommateurs en France utilisent leurs appareils mobiles pour acheter ou payer en ligne (43% à l’échelle mondiale). Lorsqu’un visiteur se rend sur un site soutenu par le dispositif, une fenêtre pop-up “ajouter à l’écran d’accueil” apparaît. Une fois que l’utilisateur a cliqué dessus, la version PWA de la boutique est ajoutée sur son écran d’accueil, ce qui lui permet d’accéder encore plus rapidement à vos produits. De plus, PWA Studio réduit le temps de chargement, diminue la taille des images de votre plateforme et propose des méthodes de paiement appropriées, ce qui vous place en parfaite position pour augmenter votre taux de conversion mobile. 
  • Compatibilité multi-plateforme : un seul code web suffit à PWA Studio pour fonctionner sur plusieurs sites. Votre store peut donc être consulté sur tous les navigateurs et sous toutes les plateformes mobiles. En outre, il n’est pas nécessaire de mettre à jour votre PWA à partir de l’App Store, celle-ci étant déjà actualisée en temps réel.
  • Augmentation des taux de conversion : les applications mobiles bénéficient d’un taux de conversion plus élevé sur la toile. La PWA développée par Magento offre une navigation et des ressentis sensiblement identique à celle d’une application avec les avantages d’un chargement rapide, d’une faible utilisation des données et d’une compatibilité multi-stores. Autant de leviers décisifs pour augmenter efficacement vos conversions ! 
  • Webpack : l’utilisation de Webpack sur PWA Studio offre une grande liberté aux développeurs pour renforcer la performance de votre boutique digitale. Webpack permet de réaliser des configurations riches et dynamiques au sein d’un écosystème en perpétuelle évolution et en pleine expansion.
  • Modules CSS : l’utilisation de la méthode CSS est un atout intéressant pour PWA Studio. Cette méthodologie s’adapte parfaitement au raisonnement par composant imposé par la conception d’application Front en divisant les styles en fonction des scopes composants.

PWA Studio : un outil solide pour les e-commerçants

Avec PWA Studio, Magento propose un outil solide aux E-Commerçants afin de maîtriser leur projet de bout en bout. L’extension respecte les standards de la solution, intègre le concept de PWA en totalité et offre une grande liberté de personnalisation grâce à une stack cohérente et moderne. À l’heure où le trafic augmente significativement sur mobile, les E-Commerçants ont tout à gagner des PWA : elles leur permettent de bénéficier d’une boutique responsive, optimisant le parcours d’achat des consommateurs en omnicanalité.

En savoir plus sur les fonctionnalités de  Adobe Commerce (Magento) :