Les avantages des applications à page unique et des applications Web progressives : améliorer l'expérience client

Publié: 2019-06-06

Les avantages des applications d'une seule page sont devenus de plus en plus clairs car l'expérience client exige que les fournisseurs de commerce électronique fournissent des interactions rapides et fiables avec eux.

Au cours des 20 dernières années, la plupart des sites Web ont été construits de la même manière - avec l'utilisation de HTML, CSS et JavaScript. Ces technologies sont devenues plus avancées au fil du temps, mais le principe est resté largement le même : un utilisateur interagit avec une page Web et le navigateur de l'utilisateur appelle un serveur Web qui, à son tour, répond avec un autre lot de code HTML, CSS et JavaScript, qui est ensuite chargé et affiché dans le navigateur.

(Ouf. C'est beaucoup.)

Ce processus implique le plus souvent l'actualisation de la page, bien que certaines technologies, telles qu'AJAX, permettent aux développeurs de modifier certains contenus sans actualiser la page entière. Pour cette raison, la plupart des sites Web agissent et se comportent distinctement comme un site Web plutôt que comme une application.

La plupart des sites Web ont également un back-end et une couche de présentation étroitement couplés, ce qui signifie qu'il n'y a pas de véritable séparation entre le front-end et le back-end d'un site Web, car les deux font partie d'une seule application monolithique.

Comment les applications à page unique et les applications Web progressives peuvent améliorer l'expérience client

Au cours de la dernière décennie, les applications iOS et Android natives sont devenues un lieu commun pour presque tous. Ces applications se comportent différemment des sites Web réels, offrant aux utilisateurs une expérience très différente et souvent plus satisfaisante.

Les pages ne s'actualisent pas lorsqu'un lien ou un bouton est enfoncé, les modifications se chargent beaucoup plus rapidement et l'expérience est souvent bien meilleure que le site Web mobile équivalent. Dans le cas d'une application de commerce électronique native, lorsqu'un utilisateur clique sur un lien, l'application appelle un serveur principal, mais plutôt que ce serveur renvoie la couche de présentation HTML, CSS et JavaScript, il s'agit simplement l'envoi des données brutes requises, et l'application gère la façon dont cela est affiché à l'utilisateur.

Par exemple, si un utilisateur clique sur un produit pour afficher ses détails, l'application appellera le serveur principal pour demander les détails de ce produit et le serveur répondra avec une chaîne de données contenant des éléments tels que le nom du produit, son prix et un lien vers une image, mais n'a pas besoin d'envoyer également du code HTML, CSS ou JavaScript pour définir comment il sera affiché.

L'application elle-même est la couche de présentation, elle n'a donc pas besoin de cela du serveur principal. Ceci est beaucoup plus rapide et permet à l'application d'afficher les détails du produit au client sans rafraîchir une page. La technologie donne aux développeurs la liberté de créer une expérience client transparente et fluide sans les contraintes du modèle traditionnel.

Ne serait-il pas formidable qu'une expérience semblable à une application puisse être fournie via un navigateur Web afin que la distinction entre une application native et un site Web devienne floue ?

C'est là qu'interviennent les applications à page unique (SPA) et les applications Web progressives (PWA).

Qu'est-ce qu'une application monopage ?

Un SPA est une application écrite en JavaScript qui s'exécute dans un navigateur Web et ne nécessite généralement pas d'actualisation de la page pour afficher de nouvelles informations.

Lorsqu'un utilisateur visite le site Web pour la première fois, l'application, ainsi que les ressources de présentation (HTML, CSS et certains scripts) sont chargées dans le navigateur. À partir de ce moment, l'utilisateur se trouve sur une seule page Web et l'application charge le contenu pertinent et modifie l'affichage au fur et à mesure des besoins.

Tout comme une application native, lorsqu'un utilisateur clique sur un lien, l'application appelle le serveur principal, qui à son tour envoie les données requises dans une chaîne, qui n'inclut généralement aucune des ressources de présentation, car elles ont déjà été chargé lorsque l'utilisateur a visité le site Web pour la première fois.

Étant donné que l'utilisateur ne se trouve essentiellement que sur une seule page Web, il n'y a pas vraiment de concept d'actualisation d'une page. Au lieu de cela, l'application modifie la page pour afficher des informations différentes si nécessaire.

Les SPA sont généralement entièrement découplés de l'application back-end et des interfaces avec le back-end via un ensemble d'API. Il sera souvent installé sur son propre serveur et peut être déployé séparément. D'une certaine manière, il est assez agnostique vis-à-vis de l'application back-end, car il envoie et reçoit simplement des données vers et depuis celle-ci - le traitant comme un système tiers.

Nous utilisons tous des SPA depuis un certain temps maintenant, probablement sans même nous en rendre compte. Facebook, Gmail, Twitter, LinkedIn et Instagram (parmi beaucoup d'autres) utilisent tous des SPA à la place de leurs sites Web.

Si vous visitez l'un de ces sites Web maintenant, vous remarquerez qu'ils se comportent beaucoup plus comme une application native que comme un site Web traditionnel. Les pages sont rarement, voire jamais, actualisées lorsque vous interagissez avec elles et sont très rapides. Cliquer sur des liens et des boutons modifie le contenu que vous consultez, mais des éléments tels que l'en-tête et le pied de page ne sont presque jamais actualisés une fois qu'ils ont été initialement chargés.

Avantages des applications à page unique

L'avantage le plus important et le plus évident d'un SPA est de savoir comment il peut être utilisé pour améliorer l'expérience client en permettant aux concepteurs et aux développeurs de fournir une expérience semblable à celle d'une application et de ne pas être contraints par l'approche traditionnelle de rechargement des pages.

Cela nécessite une nouvelle façon de concevoir et de penser, car les règles normales ne s'appliquent plus, mais les avantages pour l'expérience utilisateur peuvent être énormes.

Les SPA chargent généralement le contenu beaucoup plus rapidement que les sites Web standard, car la plupart des ressources de présentation (HTML, CSS) ne sont chargées qu'une seule fois. Les interactions avec l'application ne nécessitent qu'un appel au serveur principal pour récupérer de petites quantités de données, plutôt que des pages HTML/CSS entièrement formées. L'application peut alors afficher rapidement les données modifiées sans avoir à recharger la page.

Étant donné qu'un SPA est entièrement découplé de l'application back-end, il peut être déployé séparément, ce qui peut présenter un très gros avantage. Un petit changement frontal ne nécessitera pas le déploiement de toute l'application, ce qui peut être une tâche assez lourde et nécessite parfois des temps d'arrêt.

Inconvénients d'un SPA

L'un des plus grands défis de l'utilisation des SPA est son impact sur le référencement. Comme ils n'ont pas toujours la structure traditionnelle de pages distinctes, chacune avec une URL distincte, cela peut entraîner des problèmes avec les moteurs de recherche qui indexent le contenu. Cependant, cela peut être contré par l'utilisation de techniques telles que le rendu côté serveur et la garantie que les clics génèrent des URL uniques.

Cela devient également moins problématique au fil du temps, car les robots des moteurs de recherche sont modifiés pour faire face aux SPA. Google est l'une des entreprises qui les défendent, après tout.

Certains SPA prennent un peu de temps à se charger lors de la première visite car les ressources de l'application et de la présentation se chargent lors de la première page vue.

Ceci est très visible avec les SPA tels que Gmail, où ils ont une grande image de chargement lorsque vous visitez le site Web pour la première fois. Ce problème peut être résolu par l'utilisation d'un rendu côté serveur et d'une programmation efficace pour garantir que la charge initiale de l'application et des ressources n'est pas trop importante.

Qu'est-ce qu'une application Web progressive ?

Une PWA est un peu difficile à définir, car il ne s'agit pas d'une technologie spécifique, mais plutôt d'une méthodologie de développement ou d'un ensemble de principes qui, ensemble, font d'un site Web ou d'une application plus ou moins une PWA.

Le terme PWA a été inventé à l'origine par Google, qui a créé une liste de contrôle pour définir ce qui fait un PWA. Entre autres choses, Google a défini qu'une PWA doit être :

Sûr – servi sous https
Réactif - s'adapte à n'importe quel facteur de forme
Capable de travailler hors ligne - en utilisant des techniciens de service pour mettre les pages en cache
Rapide - capable de charger rapidement sur une connexion 3G
App-like - en utilisant le mode app-shell et la conception pour se sentir comme une application
Installable - utilisez un fichier manifeste pour permettre l'ajout de l'application à l'écran d'accueil
Engager - en utilisant des outils tels que les notifications push
Progressif - fonctionne sur tous les navigateurs mais s'améliore progressivement sur les navigateurs modernes

Comme vous pouvez le constater, certains éléments de la liste de contrôle sont un peu vagues ou subjectifs. Vous pouvez également voir que certains d'entre eux ressemblent à un SPA. Un site Web HTML/CSS traditionnel peut être transformé en PWA, tout comme un SPA. Un SPA n'est pas automatiquement un PWA, mais possède certaines fonctionnalités qui le poussent dans cette direction.

Confus encore?

Avantages des PWA

Comme pour un SPA, l'un des plus grands avantages d'un PWA est l'amélioration de l'expérience client, en lui donnant une sensation d'application et en comblant le fossé entre un site Web mobile traditionnel et une application iOS ou Android native.

Des fonctionnalités telles que la possibilité d'enregistrer sur votre écran d'accueil ou la possibilité de mettre en cache des pages via des techniciens de service peuvent donner au site Web l'apparence d'une application native.

Les PWA ont également tendance à être très rapides, car c'est l'un des principes clés de la liste de contrôle.

Le système d'exploitation Android permet aux navigateurs d'accéder au matériel de l'appareil mobile. qui permet des choses comme les notifications push et l'utilisation de la numérisation NFC, ce qui peut vraiment améliorer le CX.

Inconvénients des PWA

Le plus gros inconvénient des PWA est le manque de support d'Apple. Pour tirer le meilleur parti d'un PWA, il doit vraiment fonctionner sur un appareil Android, car le système d'exploitation Android donne aux navigateurs accès à une quantité importante de fonctionnalités sur l'appareil, alors qu'Apple restreint sévèrement cela. Cela s'améliore lentement, mais il reste encore un long chemin à parcourir.

Un autre inconvénient est l'absence d'une définition claire, qui peut être sujette à interprétation.

Les SPA et les PWA sont l'avenir du développement de sites Web

Bien que cette technologie ne soit pas encore entièrement courante pour la plupart des sites Web de commerce électronique, c'est sans aucun doute l'avenir du développement de sites Web.

Alors que les SPA sont une technologie spécifique qui peut être utilisée pour créer une application de commerce électronique, les PWA sont généralement des sites Web qui ont été construits selon une méthodologie définie par Google, qui, selon eux, offre la meilleure expérience client.

Toute personne développant un SPA doit viser à respecter autant que possible la liste de contrôle PWA afin de fournir le meilleur CX possible. Ces technologies donnent aux concepteurs et aux développeurs plus de liberté dans l'expérience et les parcours des utilisateurs, leur permettant de s'éloigner du modèle traditionnel page par page.

De nombreux fournisseurs de logiciels comme SAP et IBM investissent massivement dans la création d'interfaces SPA pour leurs plates-formes de commerce électronique, et je soupçonne que d'ici quelques années, la plupart des sites Web de commerce électronique seront construits de cette manière, en utilisant des frameworks JavaScript tels que Angular, Voir ou réagir.

De moins en moins de sites de commerce électronique seront construits en utilisant le modèle HTML/CSS traditionnel, et l'écart entre les sites Web et les applications natives deviendra de plus en plus petit, à un point tel qu'il sera difficile de les distinguer.