Qu'est-ce qu'une PWA ?

Qu'est-ce que les PWA ?

Bien qu'il ne s'agisse pas d'une technologie nouvelle, elles ont gagné en importance car de plus en plus de programmes tels que Google Chrome, Firefox et Safari les prennent en charge. À cela s'ajoute le fait que Microsoft a déjà commencé à inclure certaines PWA dans sa boutique, prêtes à être utilisées après la dernière mise à jour de son système d'exploitation Windows 10. De plus en plus de compagnies telles que Twitter, Skyscanner, Trivago, Tinder ou Starbucks se sont lancées dans l'exploration du potentiel des progressive web apps.

Pour mieux comprendre ce à quoi nous faisons référence lorsque nous parlons d'une progressive web app, nous commencerons par indiquer ce qu'une PWA N'EST PAS :

• Ce n'est pas une extension de navigateurs web
• Ce n'est pas un plugin ou une bibliothèque pour les frameworks
• Ce n'est pas un framework comme React, Angular ou Vue.js
• Ce n'est pas seulement du Responsive Design
• Ce n'est pas similaire à React Native, Native Script ou Ionic

Une PWA peut être définie en résumé comme une application mobile accessible via le navigateur. Il s'agit d'un point intermédiaire entre les applications web et les applications natives, tirant parti des meilleures fonctionnalités de chacune d'elles : design responsive, possibilité de l'installer sur l'appareil, accès hors ligne, toujours à jour grâce à l'utilisation des Service Workers, indexable depuis le navigateur et partageable via URL, accès aux fonctions natives de l'appareil mobile…
Illustration sur les progressive web apps.

Et, pourquoi ont-ils pris tant d'importance ?

Alors que visiter les sites internet traditionnels est un processus rapide et simple, il est vrai qu'ils offrent généralement une expérience utilisateur beaucoup plus pauvre que les applications. De leur côté, les applications natives, c'est-à-dire celles qui sont installées sur le téléphone, fournissent une meilleure expérience aux utilisateurs, mais elles sont limitées par les caractéristiques du terminal et du système d'exploitation. Le fait qu'il soit nécessaire de les télécharger implique que les consommateurs doivent faire un effort initial plus important, qui se perd ensuite à mesure que cette impulsivité diminue avec le temps.

C'est pourquoi une PWA est une bonne alternative pour développer notre application, car elles sont capables d'offrir les mêmes fonctionnalités et expérience utilisateur que les applications natives, tout en étant plus efficaces en occupant moins d'espace dans la mémoire du téléphone et en consommant moins de données.

À quoi sert une Progressive Web Application ?

Expliqué de manière simple, les PWA fonctionnent comme les applications habituelles, car elles se basent sur un environnement qui permet le même style de navigation et d'interaction gestuelle que ces outils. La principale différence est qu'il n'est pas nécessaire de les télécharger depuis un magasin d'applications, car elles s'exécutent directement dans le navigateur.

Ci-dessous, nous détaillons les principales caractéristiques de cette technologie :

• Progressive : fonctionne pour tous les utilisateurs, quel que soit le choix du navigateur, car elle est construite avec une amélioration progressive comme principe central.
• Adaptable : s'adapte à tout facteur de formulaire, que ce soit un bureau, un mobile, une tablette ou ce qui viendra à l'avenir.
• Indépendant de la connectivité : amélioré avec des service workers pour fonctionner hors ligne ou avec des réseaux de mauvaise qualité.
• Style d'application : l'utilisateur perçoit une application avec des interactions et une navigation de style application, car elle est construite avec un modèle de shell d'application.
• Frais: toujours à jour grâce au processus de mise à jour du service worker.
• Sécurisée : émise via HTTPS pour éviter les intrusions et garantir que le contenu n'a pas été altéré.
• Découvrable : peut être identifié comme une « app » grâce au manifeste W3C et à la portée d'enregistrement du service worker, ce qui permet aux moteurs de recherche de la trouver.
• Possibilité de réinteragir : facilite la possibilité de réinteragir grâce à des fonctions telles que les notifications push.
• Installable : permet aux utilisateurs de « conserver » les applications qu'ils trouvent les plus utiles sur leur écran principal sans les tracas d'une boutique d'applications.
• Vinculable: se puede compartir fácilmente vía URL, no requiere instalación compleja.

En fait, une progressive web app peut être considérée comme une évolution des applications web telles que celles offertes par HTML5 et la technologie des service workers, qui permet d'exécuter des services en arrière-plan dans les navigateurs. Grâce à la combinaison de ces outils, les PWA peuvent se charger presque instantanément, même dans des zones avec une faible connectivité. De plus, ces applications utilisent des standards ouverts et sont développées avec des langages de programmation et des modèles similaires à ceux utilisés pour les applications web traditionnelles.

Ainsi, l'un des piliers fondamentaux d'une progressive web app est ce que l'on appelle l'architecture de shell d'application ou app shell, un modèle qui permet de créer une PWA qui se charge rapidement à l'écran, de manière similaire aux applications natives. L'app shell n'est rien d'autre que le squelette ou la structure de base de l'application, celle qui permet d'activer l'interface utilisateur et dans laquelle le contenu sera chargé.

Une fois que nous ouvrons une PWA, ce paquet de base sera stocké dans le cache du navigateur et utilisera un service worker pour fonctionner. À partir de ce moment, comme nous aurons déjà les composants nécessaires pour lancer l'application, nous pourrons rouvrir l'application web progressive rapidement et sans avoir besoin d'une connexion Internet lors des visites suivantes, assurant ainsi une meilleure performance et fiabilité.

Grâce à ces technologies qui permettent leur exécution en arrière-plan, il est possible non seulement de les utiliser dans le navigateur, mais aussi de les ajouter au mobile comme s'il s'agissait d'une application native de plus, tout en occupant beaucoup moins d'espace sur le téléphone que celles-ci. Après tout, la seule chose que nous installons est le service worker chargé de stocker le cache et de s'assurer que l'outil continue de fonctionner même si la connectivité est instable.

Quels sont les avantages d'une PWA par rapport à d'autres options ?

Une progressive web app présente de nombreux avantages par rapport aux applications natives et aux applications web traditionnelles. Par rapport aux premières, elles sont beaucoup plus efficaces en occupant moins d'espace dans la mémoire du téléphone et en consommant moins de données, tout cela en offrant les mêmes fonctionnalités et expérience utilisateur que les applications natives.

En outre, utiliser une PWA permet de l'essayer avant de l'installer (si on le souhaite) et d'économiser le processus fastidieux de téléchargement et la prise de décisions relatives à l'installation ou à la désinstallation de l'outil, accélérant ainsi les démarches et éliminant les étapes inutiles.

Du point de vue des développeurs, la création et la maintenance d'une application web progressive sont plus économiques et plus simples que dans le cas des applications natives. Tant leur confection que leur mise à jour sont beaucoup plus rapides et il n'est pas nécessaire de créer une version de la PWA pour chaque type d'appareil, une seule suffit pour s'exécuter et s'afficher correctement sur tout type d'écran, c'est pourquoi elles se chargent également plus rapidement. Il n'est même pas nécessaire de distinguer entre Android ou iOS, car elles fonctionnent dans des navigateurs communs aux deux systèmes d'exploitation.

Parmi les autres raisons de leur adoption, il y a le fait qu'elles offrent une plus grande sécurité contre les logiciels malveillants, car les attaquants ont plus de mal à accéder à certaines parties du système, et qu'elles permettent d'envoyer des notifications push aux utilisateurs qui peuvent s'afficher en plein écran, de sorte que l'utilisateur perd de vue le navigateur pendant qu'il les utilise.

Comment assurer une bonne UX dans le développement de notre Progressive Web App ?

Comme nous l'avons mentionné, une PWA peut être une bonne option pour développer notre application, mais si nous ne prenons pas en compte certains aspects lors de sa conception dans le but de fournir une bonne expérience utilisateur, il est possible que notre application ne rencontre pas le succès escompté.

Bien que le processus de conception d'une PWA puisse être similaire à celui d'une application native, il existe certaines particularités auxquelles nous devons prêter attention et que nous avons rassemblées ci-dessous :

Approche native

Il est important que la conception d'une PWA ait l'aspect et la sensation d'une application native pour que l'utilisateur se sente totalement familier.

Éviter les transitions d'écran lentes dues aux blocages du réseau

Les problèmes de transition entre les écrans dans une PWA peuvent survenir lorsque les utilisateurs touchent un élément interactif, doivent attendre et fixer l'écran sur lequel ils se trouvent avant d'être soudainement redirigés vers le nouvel écran souhaité.

Cela rend l'utilisateur frustré de ne pas recevoir de réponse immédiate. Par conséquent, une PWA doit éviter cette sensation en donnant à l'utilisateur l'impression que toute l'application est stockée localement sur l'appareil et que seul le contenu est chargé dynamiquement. Pour ce faire, nous devons recourir à l'utilisation d'écrans squelettiques.

Les écrans squelettiques sont essentiellement des écrans vides qui s'affichent après une interaction de l'utilisateur et dont le contenu se charge progressivement comme nous pouvons l'observer dans l'exemple suivant :

Afficher l'interaction

Lorsque l'utilisateur interagit avec les éléments de l'interface de notre application, il doit avoir la sensation immédiate que le toucher a été reconnu. Pour cela, nous devons mettre en évidence l'élément sélectionné avec une couleur différente ou avec une animation.

Le contenu ne doit pas sauter pendant le chargement de la page

Pour que le navigateur puisse concevoir correctement l'écran même si l'image n'a pas été chargée, il est important que toutes les balises img de notre PWA aient leurs dimensions définies. Sinon, le contenu de l'écran sautera lorsque les images seront téléchargées, affectant négativement l'expérience utilisateur.

Pour éviter cela, nous pouvons afficher un espace réservé où l'image sera affichée à l'aide d'un cadre gris ou d'une miniature floue comme indiqué ci-dessous :

Conserver la position exacte de défilement de la liste

Lorsque un utilisateur sélectionne un élément d'une liste et visualise son détail, en appuyant sur l'option "retour", il doit revenir à la page de la liste avec la même position de défilement qu'il avait avant d'appuyer sur l'élément. Cela augmente le niveau de satisfaction de l'expérience utilisateur lors de l'interaction, surtout avec de grandes listes.

Fournir une option de partage

Dans le cas où notre PWA affiche des informations susceptibles d'être partagées, il est important de s'assurer que l'utilisateur puisse facilement partager ce qu'il voit à ce moment-là via un bouton permettant de copier l'URL dans le presse-papiers ou de la partager sur les réseaux sociaux populaires de manière simple et rapide.

Se débarrasser du pied de page

Le pied de page est quelque chose de commun sur les pages web. Cependant, lorsque nous développons une PWA depuis un appareil mobile, cet élément occupe trop d'espace pour contenir toujours les mêmes informations sur toutes les pages.

Les applications natives, pour ces raisons, n'ont pas de pied de page et notre PWA doit suivre le même exemple.

Nous pouvons profiter de cet espace pour ajouter une barre de navigation avec les éléments de navigation les plus pertinents.

Utiliser les polices du système

Une PWA est accessible depuis de nombreuses plateformes différentes, qui ont chacune une police recommandée à laquelle les utilisateurs sont déjà habitués. Utiliser ces polices dans notre PWA favorise une expérience utilisateur beaucoup plus familière et proche.

Ne pas masquer les champs de texte par le clavier

Lorsqu'un utilisateur touche un champ de saisie d'un formulaire, le clavier s'ouvre pour qu'il puisse insérer du texte. Parfois, le clavier, en s'ouvrant, masque ce champ, ce qui empêche l'utilisateur de voir le texte qu'il est en train de saisir, ce qui est très gênant. Dans notre PWA, nous devons essayer de nous déplacer à différentes positions sur la page et ensuite toucher l'élément de saisie de texte pour qu'il ne soit jamais masqué.

Auditer votre PWA avec Google Lighthouse

Et une fois que j'ai développé ma PWA, comment puis-je savoir si toutes ses fonctions ont été correctement mises en œuvre ? Google peut nous donner un coup de main en le vérifiant via Google Lighthouse.

Google Lighthouse est un outil d'audit open-source pour les sites web lancé par Google au début de 2018. Il utilise un ensemble de 5 paramètres pour classer un site web sur une échelle de 0 à 100.

En ce qui concerne les PWA, il fournit un ensemble de métriques basées sur des exigences liées à la vitesse, la sécurité, les performances hors ligne, la mise en cache, les notifications push, l'indexation, le design réactif et l'expérience utilisateur, entre autres.

Lighthouse teste si votre application :

• Peut se charger dans des conditions de réseau hors ligne ou instable
• Est relativement rapide
• Est servie depuis une origine sécurisée
• Utilise les bonnes pratiques en matière d'accessibilité