Checklist : Qu'est-ce qui fait une bonne Progressive Web App ? - Letecode
Formation en Ligne en Développement Web Full stack : Début le 28 Février Inscrivez vous ici

Qu'est-ce qui fait une bonne Progressive Web App ?

Dernière mise à jour : 26/09/2022

Les applications Web progressives (PWA) sont conçues et améliorées avec des API modernes pour offrir des capacités, une fiabilité et une installabilité améliorées tout en atteignant n'importe qui, n'importe où, sur n'importe quel appareil avec une seule base de code. Pour vous aider à créer la meilleure expérience possible, utilisez les listes de contrôle et les recommandations de base et optimales pour vous guider.

La checkliste  d'une application Web progressive de base

La liste de contrôle des applications Web progressives décrit ce qui rend une application installable et utilisable par tous les utilisateurs, indépendamment de la taille ou du type d'entrée.

Démarre rapidement, reste rapide

Les performances jouent un rôle important dans le succès de toute expérience en ligne, car les sites très performants engagent et retiennent mieux les utilisateurs que ceux qui le sont moins. Les sites doivent se concentrer sur l'optimisation des mesures de performances centrées sur l'utilisateur.

Les performances jouent un rôle important dans le succès de toute expérience en ligne, car les sites très performants engagent et retiennent mieux les utilisateurs que ceux qui le sont moins. Les sites doivent se concentrer sur l'optimisation des mesures de performances centrées sur l'utilisateur.

Pourquoi #

La vitesse est essentielle pour inciter les utilisateurs à utiliser votre application. En fait, lorsque les temps de chargement des pages passent d'une seconde à dix secondes, la probabilité qu'un utilisateur rebondisse augmente de 123 %. La performance ne s'arrête pas à l' loadévénement. Les utilisateurs ne doivent jamais se demander si leur interaction (par exemple, cliquer sur un bouton) a été enregistrée ou non. Le défilement et l'animation doivent être fluides. Les performances affectent l'ensemble de votre expérience, de la façon dont les utilisateurs perçoivent votre application à ses performances réelles.

Bien que toutes les applications aient des besoins différents, les audits de performance de Lighthouse sont basés sur le modèle de performance centré sur l'utilisateur RAIL , et un score élevé sur ces audits rendra plus probable que vos utilisateurs aient une expérience agréable. Vous pouvez également utiliser PageSpeed ​​Insights ou le rapport d'expérience utilisateur Chrome pour obtenir des données de performances réelles pour votre application Web.

Comment #

Suivez notre guide sur les temps de chargement rapides pour savoir comment faire démarrer votre PWA rapidement et rester rapide.

Fonctionne dans n'importe quel navigateur

Les utilisateurs peuvent utiliser n'importe quel navigateur de leur choix pour accéder à votre application Web avant son installation.

Les utilisateurs peuvent utiliser n'importe quel navigateur de leur choix pour accéder à votre application Web avant son installation.

Pourquoi #

Les applications Web progressives sont avant tout des applications Web, ce qui signifie qu'elles doivent fonctionner sur tous les navigateurs, et pas seulement sur l'un d'entre eux.

Un moyen efficace de le faire est, selon les mots de Jeremy Keith dans Resilient Web Design , d'identifier la fonctionnalité de base, de rendre cette fonctionnalité disponible en utilisant la technologie la plus simple possible, puis d'améliorer l'expérience dans la mesure du possible. Dans de nombreux cas, cela signifie commencer avec HTML uniquement pour créer la fonctionnalité de base et améliorer l'expérience utilisateur avec CSS et JavaScript pour créer une expérience plus attrayante.

Prenez la soumission de formulaire par exemple. Le moyen le plus simple d'implémenter cela est un formulaire HTML qui soumet une requêtte POST. Après avoir construit cela, vous pouvez améliorer l'expérience avec JavaScript pour valider le formulaire et soumettre le formulaire via AJAX, améliorant ainsi l'expérience des utilisateurs qui peuvent le prendre en charge.

Considérez que vos utilisateurs découvriront votre site sur un éventail d'appareils et de navigateurs. Vous ne pouvez pas simplement cibler l'extrémité supérieure du spectre. En utilisant la détection de fonctionnalités, vous serez en mesure d'offrir une expérience utilisable au plus grand nombre d'utilisateurs potentiels, y compris ceux qui utilisent des navigateurs et des appareils qui n'existent peut-être pas aujourd'hui.

Comment #

Resilient Web Design de Jeremy Keith est une excellente ressource décrivant comment penser à la conception Web dans cette méthodologie progressive multi-navigateurs.

Lecture supplémentaire

Réactif à n'importe quelle taille d'écran

Les utilisateurs peuvent utiliser votre PWA sur n'importe quelle taille d'écran et tout le contenu est disponible dans n'importe quelle taille de fenêtre.

Pourquoi #

Les appareils sont disponibles dans une gamme de tailles, et les utilisateurs peuvent utiliser votre application dans une gamme de tailles, même sur le même appareil. Par conséquent, il est essentiel de s'assurer que votre contenu tient non seulement dans la fenêtre d'affichage, mais que toutes les fonctionnalités et le contenu de votre site sont utilisables dans toutes les tailles de fenêtre d'affichage.

Les tâches que les utilisateurs souhaitent effectuer et le contenu auquel ils souhaitent accéder ne changent pas avec la taille de la fenêtre. Le contenu peut être réorganisé selon différentes tailles de fenêtre d'affichage, et tout devrait être là, d'une manière ou d'une autre. En fait, comme l'indique Luke Wroblewski dans son livre Mobile First, commencer petit et grandir au lieu de l'inverse peut en fait améliorer la conception d'un site :

Les appareils mobiles exigent que les équipes de développement de logiciels se concentrent uniquement sur les données et les actions les plus importantes dans une application. Il n'y a tout simplement pas de place dans un écran de 320 x 480 pixels pour des éléments superflus et inutiles. Vous devez prioriser.

Comment #

Il existe de nombreuses ressources sur la conception réactive, y compris l' article original d'Ethan Marcotte , une collection de concepts importants qui s'y rapportent, ainsi que des livres et des conférences à gogo. Pour limiter cette discussion aux aspects de contenu de la conception réactive, vous pouvez approfondir la conception axée sur le contenu et les mises en page réactives sans contenu . Enfin, bien qu'elles soient axées sur le mobile, les leçons de Seven Deadly Mobile Myths de Josh Clark sont tout aussi pertinentes pour les petites vues de sites réactifs que pour le mobile.

Fournit une page hors ligne personnalisée

Lorsque les utilisateurs sont hors ligne, les conserver dans votre PWA offre une expérience plus transparente que de revenir à la page hors ligne du navigateur par défaut.

Pourquoi #

Les utilisateurs s'attendent à ce que les applications installées fonctionnent quel que soit leur état de connexion. Une application spécifique à la plate-forme n'affiche jamais une page vierge lorsqu'elle est hors ligne, et une application Web progressive ne doit jamais afficher la page hors ligne par défaut du navigateur. Offrir une expérience hors ligne personnalisée, à la fois lorsqu'un utilisateur navigue vers une URL qui n'a pas été mise en cache et lorsqu'un utilisateur essaie d'utiliser une fonctionnalité qui nécessite une connexion, donne à votre expérience Web l'impression qu'elle fait partie de l'appareil sur lequel elle s'exécute.

Comment #

Lors de l' installévénement d'un service worker, vous pouvez mettre en pré-cache une page personnalisée hors ligne pour une utilisation ultérieure. Si un utilisateur se déconnecte, vous pouvez répondre avec la page hors ligne personnalisée pré-cachée. Vous pouvez suivre notre exemple de page hors ligne personnalisée pour en voir un exemple en action et apprendre à l'implémenter vous-même.

Est installable

Les utilisateurs qui installent ou ajoutent des applications sur leur appareil ont tendance à interagir davantage avec ces applications.

Pourquoi #

L'installation d'une application Web progressive lui permet de ressembler, de se sentir et de se comporter comme toutes les autres applications installées. Il est lancé à partir du même endroit où les utilisateurs lancent leurs autres applications. Il s'exécute dans sa propre fenêtre d'application, distincte du navigateur, et il apparaît dans la liste des tâches, tout comme les autres applications.

Pourquoi voudriez-vous qu'un utilisateur installe votre PWA ? La même raison pour laquelle vous voudriez qu'un utilisateur installe votre application à partir d'un magasin d'applications. Les utilisateurs qui installent vos applications constituent votre public le plus engagé et ont de meilleures mesures d'engagement que les visiteurs typiques, souvent à parité avec les utilisateurs d'applications sur les appareils mobiles. Ces mesures incluent plus de visites répétées, des temps plus longs sur votre site et des taux de conversion plus élevés.

Comment #

Vous pouvez suivre notre guide d'installation pour savoir comment rendre votre PWA installable, comment tester pour voir qu'il est installable et essayer de le faire vous-même.

La checkliste optionnelle d'une application Web progressive

Pour créer une application Web progressive vraiment géniale, une application qui ressemble à la meilleure de sa catégorie, vous avez besoin de plus que la simple liste de contrôle de base. La liste de contrôle optimale de l'application Web progressive consiste à donner à votre PWA l'impression qu'elle fait partie de l'appareil sur lequel elle s'exécute tout en tirant parti de ce qui rend le Web puissant.

Fournit une expérience hors ligne

Lorsque la connectivité n'est pas strictement requise, votre application fonctionne de la même manière hors ligne qu'en ligne.

Pourquoi #

En plus de fournir une page hors ligne personnalisée, les utilisateurs s'attendent à ce que les Progressive Web Apps soient utilisables hors ligne. Par exemple, les applications de voyage et de compagnie aérienne doivent avoir les détails du voyage et les cartes d'embarquement facilement disponibles lorsqu'elles sont hors ligne. Les applications de musique, de vidéo et de podcasting doivent permettre une lecture hors ligne. Les applications sociales et d'actualités doivent mettre en cache le contenu récent afin que les utilisateurs puissent le lire lorsqu'ils sont hors ligne. Les utilisateurs s'attendent également à rester authentifiés lorsqu'ils sont hors ligne, donc concevez pour l'authentification hors ligne. Une PWA hors ligne offre une véritable expérience de type application aux utilisateurs.

Comment #

Après avoir déterminé les fonctionnalités que vos utilisateurs s'attendent à utiliser hors ligne, vous devez rendre votre contenu disponible et adaptable aux contextes hors ligne. De plus, vous pouvez utiliser IndexedDB , un système de stockage NoSQL intégré au navigateur, pour stocker et récupérer des données, et la synchronisation en arrière -plan pour permettre aux utilisateurs d'effectuer des actions hors ligne et de différer les communications du serveur jusqu'à ce que l'utilisateur ait à nouveau une connexion stable. Vous pouvez également utiliser les techniciens de service pour stocker d'autres types de contenu, tels que des images, des fichiers vidéo et des fichiers audio pour une utilisation hors connexion, ainsi que pour mettre en œuvre des sessions sécurisées et de longue durée afin de maintenir l'authentification des utilisateurs. Du point de vue de l'expérience utilisateur, vous pouvez utiliser des écrans squelettesqui donnent aux utilisateurs une perception de la vitesse et du contenu lors du chargement, qui peuvent ensuite revenir au contenu mis en cache ou à un indicateur hors ligne selon les besoins.

Est entièrement accessible

Toutes les interactions des utilisateurs satisfont aux exigences d'accessibilité WCAG 2.0 .

Pourquoi #

La plupart des gens, à un moment donné de leur vie, voudront tirer parti de votre PWA d'une manière couverte par les exigences d'accessibilité WCAG 2.0 . La capacité des humains à interagir avec et à comprendre votre PWA existe sur un spectre et les besoins peuvent être temporaires ou permanents. En rendant votre PWA accessible, vous vous assurez qu'elle est utilisable par tous.

Comment #

L' introduction à l'accessibilité Web du W3C est un bon point de départ. La majorité des tests d'accessibilité doivent être effectués manuellement. Des outils tels que les audits d' accessibilité dans Lighthouse, ax et Accessibility Insights peuvent vous aider à automatiser certains tests d'accessibilité. Il est également important d'utiliser des éléments sémantiquement corrects au lieu de recréer ces éléments par vous-même, par exemple, aet buttonelements. Cela garantit que lorsque vous avez besoin de créer des fonctionnalités plus avancées, les attentes d'accessibilité sont satisfaites (par exemple, quand utiliser les flèches par rapport aux onglets). A11Y Nutrition Cards donne d'excellents conseils à ce sujet pour certains composants courants.

Peut être découvert par la recherche

Votre PWA peut être facilement découvert grâce à la recherche .

Pourquoi #

L'un des principaux avantages du Web est la possibilité de découvrir des sites et des applications via la recherche. En fait, plus de la moitié du trafic sur les sites Web provient de la recherche organique. S'assurer que des URL canoniques existent pour le contenu et que les moteurs de recherche peuvent indexer votre site est essentiel pour que les utilisateurs puissent trouver votre PWA. Cela est particulièrement vrai lors de l'adoption du rendu côté client.

Comment #

Commencez par vous assurer que chaque URL a un titre et une méta description uniques et descriptifs. Ensuite, vous pouvez utiliser Google Search Console et les audits d'optimisation des moteurs de recherche dans Lighthouse pour vous aider à déboguer et résoudre les problèmes de découverte avec votre PWA. Vous pouvez également utiliser les outils pour webmasters de Bing ou Yandex et envisager d'inclure des données structurées via des schémas de Schema.org dans votre PWA.

Fonctionne avec n'importe quel type d'entrée

Votre PWA est utilisable aussi bien avec une souris, un clavier, un stylet, ou tactile.

Pourquoi #

Les appareils offrent une variété de méthodes de saisie, et les utilisateurs doivent pouvoir basculer de manière transparente entre eux lors de l'utilisation de votre application. Tout aussi important, les méthodes de saisie ne doivent pas dépendre de la taille de l'écran, ce qui signifie que les grandes fenêtres doivent prendre en charge le toucher et les petites fenêtres doivent prendre en charge les claviers et les souris. Au mieux de vos capacités, assurez-vous que votre application et toutes ses fonctionnalités prennent en charge l'utilisation de toute méthode de saisie que votre utilisateur peut choisir d'utiliser. Le cas échéant, vous devez également améliorer les expériences pour permettre également des contrôles spécifiques à l'entrée (tels que pull-to-refresh).

Comment #

L' API Pointer Events fournit une interface unifiée pour travailler avec diverses options d'entrée, et est particulièrement utile pour ajouter la prise en charge du stylet. Pour prendre en charge à la fois le toucher et le clavier, assurez-vous d'utiliser les éléments sémantiques corrects (ancres, boutons, contrôles de formulaire, etc.) et de ne pas les reconstruire avec du HTML non sémantique (ce qui est bon pour l'accessibilité). Lorsque vous incluez des interactions qui s'activent au survol, assurez-vous qu'elles peuvent également s'activer au clic ou au toucher.

Fournit un contexte pour les demandes d'autorisation

Lorsque vous demandez l'autorisation d'utiliser des API puissantes, fournissez un contexte et demandez uniquement lorsque l'API est nécessaire.

Pourquoi #

Les API qui déclenchent une invite d'autorisation, telles que les notifications, la géolocalisation et les informations d'identification, sont intentionnellement conçues pour perturber un utilisateur, car elles ont tendance à être liées à des fonctionnalités puissantes qui nécessitent une activation. Le déclenchement de ces invites sans contexte supplémentaire, comme lors du chargement de la page, rend les utilisateurs moins susceptibles d'accepter ces autorisations et plus susceptibles de s'en méfier à l'avenir. Au lieu de cela, ne déclenchez ces invites qu'après avoir fourni à l'utilisateur une justification contextuelle expliquant pourquoi vous avez besoin de cette autorisation.

Comment #

L' article Permission UX et The Right Ways to Ask Users for Permissions d' UX Planet sont de bonnes ressources pour comprendre comment concevoir des invites d'autorisation qui, bien que axées sur le mobile, s'appliquent à toutes les PWA.

Suit les meilleures pratiques pour un code sain

Garder votre base de code saine vous permet d'atteindre plus facilement vos objectifs et de proposer de nouvelles fonctionnalités.

Pourquoi #

Il y a beaucoup de choses à faire dans la création d'une application Web moderne. Garder votre application à jour et votre base de code saine vous permet de fournir plus facilement de nouvelles fonctionnalités qui répondent aux autres objectifs énoncés dans cette liste de contrôle.

Comment #

Il existe un certain nombre de vérifications hautement prioritaires pour garantir une base de code saine : éviter d'utiliser des bibliothèques avec des vulnérabilités connues, s'assurer que vous n'utilisez pas d'API obsolètes, supprimer les anti-modèles Web de votre base de code (comme l'utilisation document.write()ou l'utilisation d'écouteurs d'événements de défilement non passifs ), et même coder de manière défensive pour s'assurer que votre PWA ne se cassera pas si les analyses ou d'autres bibliothèques tierces ne se chargent pas. Envisagez d'exiger une analyse de code statique, comme le peluchage, ainsi que des tests automatisés, dans plusieurs navigateurs et canaux de publication. Ces techniques peuvent aider à détecter les erreurs avant qu'elles ne soient mises en production.

 

Formation en Ligne en Développement Web Full stack : Début le 28 Février Inscrivez vous ici