Développement du commerce électronique PWA : les choses à faire et à ne pas faire en matière d'investissement

Vous avez du mal à inciter vos clients sur mobile à se convertir ? Ou peut-être souhaiteriez-vous que vos clients puissent utiliser votre site Web comme une application ? La PWA de commerce électronique pourrait être la solution nécessaire qui vous aidera à combler le fossé entre le Web et le mobile, à stimuler les ventes et à améliorer considérablement l'expérience client. 

Les PWA modernes permettent aux entreprises de commerce électronique d'utiliser des méthodologies de développement contemporaines en fusionnant les attributs les plus avantageux de la conception Web conventionnelle avec ceux inhérents aux applications spécifiques à la plate-forme.

Contenu:
PWA de commerce électronique : qu'est-ce qui vaut la peine d'être lancé ?
Comment créer une bonne PWA e-commerce ?
PWA pour le commerce électronique : périls et pièges potentiels
Capacités PWA
Solutions PWA basées sur une plateforme de commerce électronique
Témoignages de réussite de PWA de commerce électronique
Coûts de développement de PWA de commerce électronique

PWA de commerce électronique : qu'est-ce qui vaut la peine d'être lancé ? 

À mesure que de plus en plus de tâches informatiques sont effectuées via des navigateurs Web, la frontière entre les applications en ligne et les programmes de bureau est moins claire. Et les PWA visent à brouiller davantage cette frontière.

Fondamentalement, les PWA sont un type spécifique d’application Web qui peut être conçue pour fonctionner comme des programmes de bureau autonomes. 

Lancer une PWA ne signifie pas avoir automatiquement toutes les belles choses comme l'évolutivité et la possibilité de recherche par défaut, vous devez donc vous assurer que votre équipe de développement fait les choses correctement. Si vous êtes prêt à lancer une PWA, vous devez vous conformer aux critères décrits ci-dessous.    

Alors, qu’en est-il de la PWA pour laquelle les développeurs doivent travailler si dur pour la mettre en œuvre ?

Comment créer une bonne PWA e-commerce ?

Vitesse

Des performances en ligne supérieures, caractérisées à la fois par la vitesse et la qualité, captivent et soutiennent efficacement l'engagement des utilisateurs dans une plus grande mesure que des performances médiocres (imaginez cela). Donner la priorité aux mesures centrées sur l'utilisateur devrait être de la plus haute importance en raison du rôle crucial que joue la vitesse dans la promotion de l'engagement des utilisateurs. Pourquoi s'en soucier ? Naturellement, la lenteur des temps de chargement des pages déclenche une augmentation de 123 % des taux de rebond.   

Travaillez dans n'importe quel navigateur

PWA doit fonctionner sur tous les navigateurs Web. Garantissant ainsi l’accessibilité et affinant l’UX. De cette façon, le processus de développement commence généralement par HTML pour les fonctionnalités de base, suivi par CSS et JavaScript pour l'UX. Les formulaires HTML peuvent transmettre des données à l'aide de requêtes POST, avec JavaScript pour la validation et la soumission AJAX. 

N'importe quelle taille d'écran

En raison de leur capacité à s'adapter à différentes tailles de fenêtres d'affichage, les PWA permettent à vos clients de consommer du contenu de manière transparente sur différents appareils, quel que soit l'appareil spécifique utilisé. L’importance de cela réside dans le fait que vos clients peuvent utiliser la même application sur des appareils de dimensions différentes. Le contenu doit rester cohérent quelles que soient les dimensions de la fenêtre, même si sa disposition peut nécessiter des modifications.

Peut être installé 

Lorsqu'une PWA est installée sur un appareil, elle présente un comportement comparable à celui des autres applications installées, car elle s'ouvre dans une fenêtre séparée et apparaît dans le gestionnaire de tâches de l'appareil. Il a été observé que le téléchargement de l'application d'une entreprise en tant que telle augmente la probabilité de retour, par rapport à une navigation occasionnelle. Cela englobe une augmentation des taux de conversion, de la durée moyenne des sessions et des visites répétées. 

Disponible en ligne

Les PWA doivent être conçues pour fonctionner sans connexion Internet. Vos clients doivent avoir accès à divers contenus, comme des itinéraires de voyage, des billets d'embarquement, des fichiers multimédias, des publications sur les réseaux sociaux et des articles d'actualité. Si l'authentification hors ligne est cruciale pour la sécurité, l'accessibilité et la modifiabilité du contenu sont essentielles à la convivialité dans les environnements hors ligne. IndexedDB, une base de données NoSQL, peut stocker et synchroniser les données de manière basée sur un navigateur, prenant en charge les opérations asynchrones. Les techniciens de service peuvent stocker des éléments multimédias dans un cache, permettant ainsi une récupération même lorsque Internet est désactivé. 

Consultable 

La majorité des visiteurs d’un site Web, dépassant 50 %, provenant de la recherche organique, la visibilité de votre PWA peut être considérablement améliorée. L'établissement d'URL canoniques pour le contenu et l'indexation des sites Web par les moteurs de recherche sont essentiels pour améliorer leur découvrabilité. 

Toute entrée

PWA doit prendre en charge diverses méthodes de saisie, comme une souris ou un stylet, garantissant des transitions sans friction pour les utilisateurs, quelle que soit la taille de l'écran. Par exemple, la fonctionnalité tactile doit être prise en charge sur les grandes fenêtres, tandis que les fenêtres plus petites doivent donner la priorité aux entrées au clavier et à la souris. L'application Web progressive doit s'adapter à diverses méthodes de saisie et améliorer les interactions des utilisateurs avec des fonctionnalités spécifiques à la saisie telles que l'extraction pour actualiser. 

PWA pour le commerce électronique : périls et pièges potentiels

Quelles sont les préoccupations lorsqu’on décide de lancer une PWA de commerce électronique ? Quelles sont les chutes et comment pouvez-vous les éviter ?

Perception et confiance

La perception et la confiance associées aux PWA continuent d'être entachées par l'idée dominante selon laquelle il s'agit d'applications inférieures ou même non reconnues comme des applications en premier lieu. Les utilisateurs se sont habitués à rechercher des applications sur des plateformes numériques telles que Google Play ou l'App Store, et ils peuvent ne pas être familiers avec la notion d'installation directe d'applications à partir de sites Web. La confiance est une considération importante puisque les consommateurs sont habitués à s’appuyer sur les magasins d’applications pour vérifier la sécurité des applications téléchargées.

Installation

Le processus d'installation d'une PWA sur iOS nécessite que les utilisateurs accèdent au panneau Partager, puis choisissent l'option « Ajouter à l'écran d'accueil ». La procédure est plus complexe que l’installation d’une application iOS native. L'expérience utilisateur pourrait être améliorée si Safari incluait la prise en charge du avant l'invite d'installation événement ou modifiez la langue de l’invite pour « Installer l’application ».

Modification du manifeste

Les éléments essentiels d'un manifeste PWA, y compris l'icône, le nom et les écrans de démarrage, ne sont pas facilement modifiables une fois la PWA installée. Bien qu'il y ait eu des avancées récentes dans la version de bureau de Chrome qui permettent la modification des noms d'applications, l'amélioration de la flexibilité dans la modification des attributs du manifeste améliorera la compétitivité des PWA.

Gestion du périmètre

La gestion du périmètre dans les PWA peut parfois présenter des défis en raison de sa nature contre-intuitive. Le problème des barres obliques finales peut conduire à des incohérences dans la définition des portées, introduisant ainsi la possibilité d'erreurs. De plus, dans le contexte d'iOS, lorsque l'on tente d'accéder à un lien hypertexte dans les limites d'une PWA à partir d'une application externe, le comportement par défaut est de lancer le navigateur Safari au lieu de la PWA désignée.

Accès à l'appareil

La question qui se pose porte sur la question de savoir si les PWA devraient avoir accès aux services natifs, tels que les contacts, le calendrier, les SMS/MMS et les alarmes, malgré leurs avantages inhérents en matière de sécurité découlant de leur portée restreinte. Permettre aux PWA d’accéder à ces fonctionnalités peut potentiellement compromettre les mesures de sécurité et brouiller la distinction entre les PWA et les applications natives.

Notifications push sur iOS 

Les notifications push sur iOS n'étaient accessibles aux PWA que récemment. En conséquence, les développeurs ne pouvaient pas compter sur les notifications push pour transmettre des informations cruciales aux utilisateurs iOS. Apple a récemment déclaré son intention de prendre en charge les notifications push sur les appareils iOS à partir de 2023. Cependant, de nombreux consommateurs ont exprimé leur mécontentement à l'égard des invites de notification push en raison de leur exploitation par les sites Web. Par conséquent, les navigateurs Web ont inclus des mécanismes de blocage automatique de ces invites.

Capacités PWA

Les PWA offrent une expérience utilisateur de type mobile native bien qu'elles soient beaucoup plus légères – par exemple, la taille de la PWA BookMyShow est 54 fois plus petite que celle de l'application Android et 180 fois plus petite que celle de l'application iOS – que les applications natives. Ces applications utilisent une conception Web réactive et des améliorations progressives pour adapter leur style visuel et leurs fonctionnalités aux capacités de l'appareil et du navigateur Web de l'utilisateur. 

Comme les applications natives, les PWA peuvent être installées via le navigateur Web et affichées sur l'écran d'accueil du mobile. Les notifications push, l'actualisation automatique du contenu, ainsi que la navigation et l'interaction de type application sont toutes disponibles avec les PWA.

Pour le commerce électronique, cela signifie que les PWA permettent la création d'expériences d'achat numériques transparentes sur différents appareils et navigateurs, offrant la simplicité et les performances des applications mobiles natives sans les limitations d'un développement et d'une distribution séparés. 

Les PWA permettent aux entreprises de commerce électronique de créer des boutiques en ligne plus attrayantes qui ressemblent à de véritables applications pour les clients sur n'importe quel appareil.

Sur quoi est basée une PWA

1. Employés de services la technologie est essentielle au déploiement de PWA. Avec les notifications push, la mise en cache et les fonctionnalités hors ligne, l'interface utilisateur ressemble à celle d'une application mobile.
2. La manifeste d'application Web est un fichier JSON qui spécifie le nom, les icônes et la palette de couleurs de l'application. Avec cette fonctionnalité, les utilisateurs peuvent ajouter la PWA à leurs favoris.
3. Pour des raisons de confidentialité et de sécurité, HTTPS est obligatoire.
4. Les éléments HTML, CSS et JavaScript nécessaires sont inclus dans le shell de l'application. Le cadre et l'interface utilisateur de l'application sont configurés ici.
5. Il va sans dire qu’en raison de leur polyvalence pour répondre à différentes tailles d’affichage, les sites Web réactifs peuvent constituer une base parfaite pour les PWA.

PWA : en quoi diffère-t-elle d’une application mobile native

Google Play et App Store donnent accès à des applications natives développées spécifiquement pour leurs plateformes. Ces applications n'ont besoin d'aucun logiciel intermédiaire pour accéder aux fonctionnalités et aux API de l'appareil.

C'est pourquoi les applications natives fonctionnent plus facilement et ont une plus grande interaction avec le système d'exploitation.

Les PWA sont louées pour leur capacité à être indépendantes de la plate-forme, à fonctionner sur plusieurs plates-formes et navigateurs Web et à obtenir automatiquement des mises à jour. 

PWA de commerce électronique : en quoi diffère-t-elle d'un site Web réactif

Alors que l’objectif principal des PWA et des sites Web réactifs est d’améliorer l’expérience utilisateur, les PWA imitent les fonctionnalités des applications mobiles natives, telles que l’interface utilisateur et les notifications push. Et les sites Web réactifs visent à offrir une expérience de visualisation transparente sur plusieurs appareils sans avoir besoin de logiciel supplémentaire.

PWA vs applications natives vs sites Web réactifs 

Développer une PWA de commerce électronique à partir de zéro ou convertir un modèle existant ?

Si vous possédez actuellement un site Web de commerce électronique ou une application native et envisagez de lancer une PWA de commerce électronique, vous vous demandez peut-être s'il est préférable de repartir de zéro ou de convertir vos actifs existants.

D’une manière générale, la conversion d’un site Web réactif est l’approche la plus simple. Le code est déjà basé sur le Web et optimisé pour différentes tailles d'écran. La conversion d'une application native nécessite la mise à jour du code existant pour fonctionner sur le Web. Développer une PWA de commerce électronique à partir de zéro offre la meilleure expérience mais nécessite le plus de travail.

Conversion à partir d'un site Web réactif

Avantages : réutiliser le contenu/la conception Web existante, familiarisé avec les normes du Web

Inconvénients : non optimisé pour les fonctionnalités PWA, la mise en œuvre peut nécessiter des efforts supplémentaires

Conversion à partir de l'application native

Avantages : réutiliser la logique de l'application, l'interface

Inconvénients : nécessite des mises à jour pour se conformer aux normes PWA, un travail supplémentaire pour prendre en charge le Web

Développer une PWA à partir de zéro

Avantages : Entièrement personnalisé pour les normes PWA dès le départ

Inconvénients : Plus de temps/coût impliqué 

PWA : en quoi diffère-t-il des autres frameworks hybrides 

PWA a tendance à offrir une expérience utilisateur plus transparente que les autres frameworks hybrides. Par exemple, PWA permet des fonctionnalités hors ligne et est accessible via un navigateur Web, tandis que certaines applications hybrides doivent être téléchargées et installées.

PWA et Ionic 

Ionic est un framework permettant de créer des applications mobiles hybrides. Alors que PWA peut fonctionner sur n'importe quel appareil doté d'un navigateur compatible, Ionic offre une expérience plus native avec accès aux fonctionnalités de l'appareil.

PWA et Flutter

Fondamentalement, Flutter est un framework permettant de créer des applications mobiles natives. Flutter utilise le langage de programmation Dart. Et, bien que PWA soit plus adapté aux applications axées sur le contenu, Flutter convient mieux aux applications complexes et visuellement riches.

PWA et React Native

React Native est un framework open source permettant de créer des applications mobiles à l'aide de React. React peut également être utilisé pour développer le front-end d’une PWA, fournissant une interface utilisateur réactive et interactive.

Solutions PWA basées sur une plateforme de commerce électronique

Studio PWA Magento

Les PWA peuvent être créées à l'aide de Magento PWA Studio, qui est une suite d'outils et de bibliothèques créées à cet effet. La plateforme profite d'outils de pointe tels que React, Redux et GraphQL pour créer des boutiques en ligne réactives et puissantes.

Kit PWA Salesforce Commerce Cloud

Si vous souhaitez créer une PWA de commerce électronique sur la plateforme Salesforce Commerce Cloud, le kit Commerce Cloud PWA vous offre tout ce dont vous avez besoin pour commencer. Pour atteindre son objectif de fournir une expérience d'achat réactive et engageante, cette solution utilise des frameworks JavaScript tels que React et Vue.js.

Architecture de référence de vitrine Salesforce Commerce Cloud (SFRA)

L'architecture de référence Storefront (SFRA) de Commerce Cloud est un autre cadre utile pour créer des PWA. Lors de la création de PWA pour Commerce Cloud, le framework SFRA peut fournir une base solide. Une adaptabilité accrue et une multitude d’options de personnalisation ne sont que deux des nombreux avantages qu’elle offre.

SAP Commerce Spartacus

Sur SAP Commerce Cloud, les PWA peuvent être développées à l'aide du robuste framework SAP Commerce Spartacus. L'interface de l'application est construite sur Angular et communique avec les services backend de SAP Commerce Cloud sans aucun problème notable.

Vue Storefront

Vue Storefront est un framework open source avancé conçu pour créer des boutiques en ligne évolutives et fiables. Le framework Vue.js est utilisé pour créer rapidement des PWA capables de s'adapter aux besoins de leurs utilisateurs et d'offrir une expérience fluide et réactive. Les notifications push et la possibilité de naviguer sur le Web tout en étant déconnecté sont deux fonctionnalités notables.

Plus d'outils PWA de commerce électronique à considérer

• ScandiPWA : solution PWA open source spécialement conçue pour la plateforme Magento 2.
• Gatsby : générateur de sites statiques pouvant être utilisé pour créer des PWA avec React.Les
• GoPWA : framework de développement PWA pour créer des PWA évolutives et performantes.

Témoignages de réussite de PWA de commerce électronique

De nombreuses entreprises, dont certaines des plus grandes dans le domaine du commerce électronique, ont déjà trouvé la PWA plutôt efficace. 

Les deux mesures les plus cruciales, les taux de conversion (plusieurs exemples ont montré une augmentation du taux de conversion de 27 % à plus de 80 %) et d'engagement (les exemples comprenaient 3 fois plus de temps sur le site, des pages vues plus élevées, plus de produits consultés), affichent de manière stable une amélioration remarquable.

Cependant, les avantages de PWA ne s'arrêtent pas là :

• Performances améliorées – Beaucoup ont signalé des temps de chargement beaucoup plus rapides, une utilisation moindre des données et une réduction des rebonds.
• Augmentation du trafic/nouveaux clients – Certains ont vu 2x utilisateurs quotidiens, 50 % de nouveaux clients de PWA.
• Revenus plus élevés – Cas avec augmentation des revenus par visite, revenus issus du trafic en hausse de 79 %.
• Coûts inférieurs – Coûts d’acquisition de clients inférieurs, tailles d’applications beaucoup plus petites que celles natives.
• Accès hors ligne – Permet de continuer ses achats sans connexion Internet.
• Notifications push – Push augmentation du réengagement, des taux de clics et des paniers récupérés.
• Accès sur toutes les plateformes – Expérience unifiée sur n’importe quel appareil via les technologies Web.
• Fonctionnalités de type natif – Capacités matérielles/système d'exploitation exploitées normalement uniquement dans les applications natives.

Coûts de développement de PWA de commerce électronique

Le développement de PWA de commerce électronique entraîne des dépenses de développement et de maintenance comparables à celles du développement de sites Web de commerce électronique. Pourtant, les PWA peuvent fonctionner sur une plus grande variété d’appareils que les applications natives, et il n’y a aucun frais supplémentaire pour l’accès au matériel ou le placement dans les magasins d’applications. 

Source à partir de Grinteq

Avis de non-responsabilité : les informations présentées ci-dessus sont fournies par grinteq.com indépendamment d'Alibaba.com. Alibaba.com ne fait aucune représentation ni garantie quant à la qualité et à la fiabilité du vendeur et des produits.