PWA vs SPA : semblables mais différents

L'attractivité des sites web standards commence à perdre de son charme, laissant la place aux applications web. Chaque jour qui passe, les applications Web deviennent de plus en plus populaires en raison de leur expérience engageante et incroyablement rapide.

La majeure partie de ce succès technologique ne peut être obtenue qu'en mettant en œuvre certaines architectures dans la structure de votre site Web, garantissant la stabilité, les performances et l'engagement de votre site Web.

Deux approches populaires pour structurer votre application Web en ce moment sont les PWA et les SPA. Selon la conception commune de ces deux approches, elles ne sont pas identiques. Ceci est crucial car leurs différences négligées conduisent souvent à des erreurs coûteuses et à des opportunités perdues ; Vous, probablement un propriétaire de site pour qui chaque milliseconde compte, ne voulez certainement pas que votre application Web soit à la traîne par rapport au reste du monde.

Comment travaillent-ils?

Applications sur une seule page (SPA)

SPA (Single Page Application) est un site Web dont la page actuelle est mise à jour dynamiquement plutôt que d'être entièrement téléchargée depuis un serveur. En d'autres termes, tout le code d'application nécessaire à votre application Web (HTML, CSS, JavaScript) ne doit être chargé qu'une seule fois . Lorsque l'utilisateur navigue dans l'application Web, tous les contenus et éléments qui doivent être mis à jour sont récupérés et restitués sans que l'utilisateur n'ait à recharger le navigateur.

Cela évite le traditionnel aller-retour entre le navigateur et le serveur, permet ainsi des interactions plus rapides et une meilleure satisfaction des utilisateurs.

Vous utilisez probablement SPA tout le temps sans même vous en rendre compte. Remarquez à quel point la plupart des sites Web de médias sociaux ressentent la même chose ? C'est parce qu'ils utilisent tous des SPA pour rationaliser l'expérience utilisateur et créer un flux continu de mise à jour des actualités.

Voici quelques-uns des SPA notables que vous utilisez probablement régulièrement :

• Facebook
• Gmail
• Linkedin
• Netflix
• Google Maps

Applications Web progressives (PWA)

Contrairement à SPA, Progressive Web App (PWA) ressemble plus à un ensemble de directives et de listes de contrôle qu'à une architecture spécifique. Les PWA sont connues et se distinguent des SPA par plusieurs caractéristiques telles que :

• Travailleurs des services : les travailleurs des services fournissent la base technique de nombreuses fonctionnalités importantes de PWA, à savoir la disponibilité hors ligne et les notifications push.
• Manifeste de l'application Web : un fichier JSON qui contient les métadonnées nécessaires pour votre PWA. Les manifestes d'application Web peuvent être générés automatiquement à l'aide du générateur de manifeste PWA.
• HTTPS : les PWA sont toujours servies à partir d'une origine sécurisée.

Les techniciens de service agissent comme un proxy entre le navigateur et le réseau et sont responsables de la mise en cache des actifs du site Web et de l'interception des requêtes réseau, ce qui conduit à la disponibilité hors ligne du site Web et à diverses autres fonctionnalités, notamment les notifications push.

Les travailleurs des services aident également énormément en arrière-plan. En plus d'offrir des fonctionnalités hors ligne, ils sont également responsables d'une grande partie des calculs lourds, ce qui est la principale raison pour laquelle la plupart des sites Web PWA sont si efficaces et se chargent rapidement.

Nous avons rédigé un guide détaillé sur ce qu'est l'application Web progressive. Vous ne pouvez donc pas le manquer !

Comment sont-ils semblables?

S'agissant de technologies à la fois nouvelles et révolutionnaires, ces deux architectures offrent à l'utilisateur une expérience engageante semblable à une application, très différente des sites Web traditionnels. À première vue, ils peuvent facilement être confondus les uns avec les autres ; les processus sous-jacents qui rendent toutes ces expériences possibles ne sont cependant pas les mêmes.

Quelle est la différence?

Il existe une idée fausse commune selon laquelle une PWA est presque toujours une SPA, ce qui est tout simplement faux. D'après les exigences PWA ci-dessus, vous pouvez voir qu'il n'est nulle part indiqué que le contenu de son site Web doit être rendu dans le navigateur ou qu'une PWA ne doit pas demander de pages rendues par le serveur.

Une PWA est, tout simplement, un site Web qui possède toutes les meilleures qualités que le Web a à offrir. C'est fiable, rapide et engageant.

Et comme les PWA nécessitent des services workers qui s'exécutent dans un thread séparé de l'interface utilisateur, les PWA diffèrent de telle sorte que leur contenu est toujours affiché de manière quasi instantanée , contrairement aux SPA qui accompagnent presque toujours un écran de chargement initial spécifique pour la pré-extraction des sites. des atouts. Cela signifie que la plupart, sinon la totalité, de la surcharge JavaScript abondante que le framework JavaScript SPA place sur vos applications Web peut à la place être réaffectée au service worker.

Évidemment, les différences entre ces deux ne sont pas que cela, il y a beaucoup plus à disséquer :

En termes de vitesse

En ce qui concerne la vitesse, ces deux architectures sont assez similaires puisqu'elles sont toutes les deux à la pointe de la technologie. Le dessus, cependant, pourrait aller à PWA ici.

La raison en est que, alors que les SPA et les PWA utilisent JavaScript pour leurs développements, PWA est en mesure de tirer parti de ses travailleurs de service pour rendre certains des travaux. En d'autres termes, une grande partie de la surcharge JavaScript excessive que les SPA ajoutent à vos applications Web peut plutôt être déléguée aux techniciens de service, réduisant ainsi considérablement l'empreinte JavaScript.

Cela permet aux sites PWA de pré-mettre en cache de nombreux actifs de site : scripts, CSS, images et balisage avant qu'ils ne soient requis. Grâce à ces pré-caches, le réseau de l'utilisateur est soulagé des contraintes supplémentaires liées au rendu et peut travailler hors ligne.

En termes de coût

Voici où PWA perd contre SPA. Possédant une technologie de pointe, PWA s'accompagne donc d'un surcoût. Cela ne veut pas dire que le développement de PWA dure souvent des semaines, voire des mois, car ce n'est pas un processus aussi rationalisé que celui des SPA.

PWA : 2 000 $ – 20 000 $

SPA : 1500 $ – 12.000$

De nombreux facteurs influent sur vos coûts de construction, tels que le tarif de votre développeur, la complexité du travail, vos préférences et personnalisations… qui doivent tous être pris en considération lors de l'estimation des coûts.

 Lecture recommandée : Combien coûte la création d'une PWA Magento ?

En termes d'expérience utilisateur/d'interface utilisateur

Alors que les SPA avaient leur place dans le passé, les gens commencent à se convertir aux PWA car ils offrent une meilleure expérience utilisateur (UX).

Possédant tous deux une interface de type application, PWA apporte plus d'engagement et de fiabilité, même dans des conditions de connexion hors ligne ou lentes. Pour ces raisons, des marques influentes telles que Twitter ont lancé le mouvement The PWA en publiant leur propre version PWA de leur site, qui est Twitter Lite.

Et il n'y a pas que Twitter. On s'attend à ce que le mouvement PVA soit là pour rester; De plus, avec la récente participation de Spotify, le mouvement ne semble pas montrer de signe de ralentissement prochainement.

L'application à page unique a sa limite de ne pas être en mesure de fournir une UX satisfaisante sur les grands sites, c'est pourquoi elle fonctionne mieux pour les sites orientés données et pas nécessairement visuellement époustouflants comme Gmail et Facebook.

En termes de sécurité

La sécurité est un sujet délicat. Bien que PWA et SPA utilisent JavaScript comme bibliothèque principale pour les développements, leurs problèmes de sécurité diffèrent beaucoup, la plupart provenant de SPA et de son problème XSS (cross-site scripting).

Beaucoup moins de problèmes de sécurité sont soulevés chez PWA car il est dans la nature de Progressive Web App que toutes les connexions doivent passer par une origine HTTPS sécurisée. Comme les PWA, HTTPS est également l'avenir du Web, grâce auquel des fonctionnalités de pointe telles que les service workers sont rendues accessibles et possibles.

En termes d'accessibilité

Par rapport aux SPA, les PWA sont généralement plus accessibles, en particulier avec la prise en charge récente de Chrome pour Desktop PWA. Les utilisateurs qui interagissent avec les PWA peuvent avoir la possibilité d'ajouter un raccourci de l'application qu'ils utilisent sur leur écran d'accueil ou sur leur bureau.

Les SPA sont en fait terribles en matière d'accessibilité car ils ont tendance à laisser leur utilisateur au milieu de nulle part à chaque fois qu'une transition de page est exécutée. Ceci est particulièrement frustrant pour les utilisateurs handicapés car aucun attribut aria ou rôle ne pourra les aider si la page change constamment sa structure DOM (Document Object Model).

Emballer

Aussi révolutionnaires qu'aient pu être les SPA, le temps semble l'avoir lentement rattrapé. Alors que les SPA et les PWA sont en quelque sorte les mêmes, de plus en plus de gens choisissent les PWA plutôt que les SPA et c'est compréhensible, étant donné les avantages que les PWA apportent.

Avec SimiCart, nous proposons la meilleure solution PWA pour les marchands Magento.