Les progressive web apps (PWA) sont conçues et améliorées avec des API modernes pour offrir des capacités, une fiabilité et une installation améliorées, tout en permettant d'atteindre tous les utilisateurs, n'importe où, sur n'importe quel appareil à l'aide d'un seul codebase. Pour vous aider à créer la meilleure expérience possible, suivez les checklists et recommandations essentielles et optimales.
Checklist des progressive web apps principales
La checklist des progressive web apps décrit ce qui rend une application installable et utilisable par tous les utilisateurs, quels que soient leur taille ou le type d'entrée.
Une vitesse constante dès le démarrage
Les performances jouent un rôle important dans la réussite de toute expérience en ligne, car les sites très performants attirent et retiennent mieux les internautes que les sites peu performants. Les sites doivent se concentrer sur l'optimisation des métriques de performances axées sur les utilisateurs.
Pourquoi
La vitesse est essentielle pour inciter les utilisateurs à utiliser votre application. En effet, lorsque le temps de chargement d'une page passe d'une à dix secondes, la probabilité que l'utilisateur la quitte augmente de 123%. Les performances ne s'arrêtent pas à l'événement load. Les utilisateurs ne doivent jamais se demander si leur interaction (par exemple, un clic sur un bouton) a été enregistrée ou non. Le défilement et l’animation doivent être fluides.
Les performances affectent l'ensemble de l'expérience, de la façon dont les utilisateurs perçoivent votre application, jusqu'à ses performances réelles.
Bien que toutes les applications aient des besoins différents, les audits de performances de Lighthouse sont basés sur les Core Web Vitals. En obtenant des notes élevées à ces audits, vous augmentez les chances que vos utilisateurs bénéficient d'une expérience agréable. Vous pouvez également utiliser PageSpeed Insights ou le rapport sur l'expérience utilisateur Chrome pour obtenir des données de performances réelles de votre application Web.
Comment
Suivez notre guide sur les temps de chargement rapides pour découvrir comment accélérer le démarrage et la réactivité de votre PWA.
Compatible avec tous les navigateurs
Les utilisateurs peuvent utiliser le navigateur de leur choix pour accéder à votre application Web avant qu'elle ne soit installée.
Pourquoi
Les progressive web apps sont des applications Web en premier. Par conséquent, elles doivent fonctionner sur plusieurs navigateurs, et pas seulement dans l'un d'entre eux.
Selon Jeremy Keith de Resilient Web Design, une méthode efficace consiste à identifier la fonctionnalité de base, à la rendre disponible à l'aide de la technologie la plus simple possible, puis à améliorer l'expérience dans la mesure du possible. Dans de nombreux cas, cela implique de commencer simplement par HTML pour créer la fonctionnalité de base, puis d'améliorer l'expérience utilisateur avec CSS et JavaScript pour créer une expérience plus attrayante.
Prenons l'exemple de l'envoi de formulaires. Le moyen le plus simple de procéder est d'utiliser un formulaire HTML qui envoie une requête POST. Après avoir créé cela, vous pouvez améliorer l'expérience avec JavaScript pour valider le formulaire et l'envoyer à l'aide d'AJAX, ce qui améliore l'expérience des utilisateurs qui peuvent le prendre en charge.
Tenez compte du fait que les utilisateurs verront votre site sur toute une gamme d'appareils et de navigateurs. Vous ne pouvez pas cibler le haut du spectre. La détection des fonctionnalités vous permet de proposer 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 actuellement.
Comment
Le cours Resilient Web Design de Jeremy Keith est une excellente ressource qui explique comment aborder la conception Web dans cette méthodologie progressive multinavigateur.
Autres ressources
- Le cours Understanding Progressive Optimization d'A List Apart constitue une bonne introduction à ce sujet.
- La vidéo Progress Improve: What It Is, And How To Use It? du magazine Smashing du magazine fournit une introduction pratique et des liens vers des sujets plus avancés.
- MDN propose un article intitulé Implementing feature Detection (Mettre en œuvre la détection de fonctionnalités) qui explique comment détecter une fonctionnalité en l'interrogeant directement.
Réactive à toutes les tailles d'écran
Les utilisateurs peuvent utiliser votre PWA sur n'importe quelle taille d'écran, et tout le contenu est disponible, quelle que soit la taille de la fenêtre d'affichage.
Pourquoi
Les appareils sont proposés dans différentes tailles, et les utilisateurs peuvent exploiter votre application dans différentes tailles, même sur le même appareil. Par conséquent, vous devez impérativement vous assurer que votre contenu s'adapte à la fenêtre d'affichage, mais que l'ensemble des fonctionnalités et du 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 d'affichage. Le contenu peut être réorganisé selon différentes tailles de fenêtre d'affichage et doit s'y trouver, d'une manière ou d'une autre. En fait, comme l'explique Luke Wroblewski dans son livre "Mobile First", commencer petit et aller plus loin peut en fait améliorer la conception d'un site:
Les équipes de développement logiciel doivent se concentrer uniquement sur les données et les actions les plus importantes d'une application sur les appareils mobiles. Il n'y a pas de place dans un écran de 320 x 480 pixels pour des éléments superflus et inutiles. Vous devez définir des priorités.
Comment
Il existe de nombreuses ressources sur le responsive design, y compris l'article original d'Ethan Marcette, une collection de concepts importants qui s'y rapportent, ainsi que de nombreux livres et débats. Pour limiter cette discussion aux aspects du contenu du responsive design, vous pouvez vous intéresser aux conceptions axées sur le contenu et aux mises en page responsives avec sortie du contenu. Enfin, bien qu'il soit axé sur les mobiles, les leçons du livre Seven Deadly Mobile Myths de Josh Clark sont tout aussi pertinentes pour les vues réduites des sites responsifs que pour les mobiles.
Fournit une page hors connexion personnalisée
Lorsque les utilisateurs sont hors connexion, les garder dans votre PWA offre une expérience plus fluide que de revenir à la page hors connexion du navigateur par défaut.
Pourquoi
Les utilisateurs s'attendent à ce que les applications installées fonctionnent, quel que soit l'état de leur connexion. Une application spécifique à une plate-forme n'affiche jamais de page blanche lorsqu'elle est hors connexion, et une progressive web app ne doit jamais afficher la page hors connexion par défaut du navigateur. En offrant une expérience hors connexion personnalisée, à la fois lorsqu'un utilisateur accède à une URL qui n'a pas été mise en cache et lorsqu'il tente d'utiliser une fonctionnalité qui nécessite une connexion, vous pouvez donner à votre expérience Web l'impression de faire partie de l'appareil sur lequel elle s'exécute.
Comment
Lors de l'événement install d'un service worker, vous pouvez mettre en cache une page hors connexion personnalisée pour une utilisation ultérieure. Si un utilisateur se déconnecte, vous pouvez répondre avec la page hors connexion personnalisée en pré-cache. Vous pouvez suivre notre exemple de page hors connexion personnalisé pour voir un exemple concret et apprendre à l'implémenter vous-même.
Installation possible
Les utilisateurs qui installent ou ajoutent des applications sur leur appareil ont tendance à interagir davantage avec ces applications.
Pourquoi
L'installation d'une progressive web app vous permet d'améliorer son apparence et son comportement comme toutes les autres applications installées. Il est lancé à l'endroit où les utilisateurs lancent leurs autres applications. Elle s'exécute dans sa propre fenêtre d'application, distincte du navigateur, et apparaît dans la liste des tâches, comme les autres applications.
Pourquoi voudriez-vous qu'un utilisateur installe votre PWA ? Il en va de même pour l'installation de votre application depuis une plate-forme de téléchargement d'applications. Les utilisateurs qui installent vos applications constituent votre audience la plus engagée et enregistrent de meilleures métriques d'engagement que les visiteurs habituels, souvent à un niveau aussi élevé que les utilisateurs d'applications sur les appareils mobiles. Ces métriques incluent un plus grand nombre de visites répétées, des visites plus longues sur votre site et des taux de conversion plus élevés.
Comment
Vous pouvez suivre notre guide d'installation pour découvrir comment rendre votre PWA installable, comment vérifier qu'elle est installable et comment le faire vous-même.
Checklist des progressive web apps optimales
Pour créer une progressive web app de qualité qui ressemble à la meilleure application de sa catégorie, il ne suffit pas de suivre la checklist de base. La checklist optimale de progressive web app consiste à donner à votre PWA l'impression de faire partie de l'appareil sur lequel elle s'exécute, tout en tirant parti de la puissance du Web.
Offre une expérience hors connexion
Lorsque la connectivité n'est pas strictement requise, votre application fonctionne de la même manière hors connexion qu'en ligne.
Pourquoi
En plus de fournir une page hors connexion personnalisée, les utilisateurs s'attendent à ce que les progressive web apps soient utilisables hors connexion. Par exemple, les applications de voyage et de compagnie aérienne doivent proposer les détails des trajets et les cartes d'embarquement hors connexion. Les applications de musique, de vidéos et de podcasts doivent permettre la lecture hors connexion. Les applications de réseaux sociaux et d'actualités doivent mettre en cache le contenu récent pour que les utilisateurs puissent le lire hors connexion. Les utilisateurs s'attendent également à rester authentifiés en mode hors connexion. Concevez donc pour l'authentification hors connexion. Une PWA hors connexion offre aux utilisateurs une véritable expérience semblable à celle d'une application.
Comment
Après avoir déterminé les fonctionnalités que vos utilisateurs attendent du fonctionnement hors connexion, vous devez rendre votre contenu disponible et adapté à des contextes hors connexion. En outre, 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 connexion et de différer les communications du serveur jusqu'à ce qu'ils disposent à nouveau d'une connexion stable. Vous pouvez également utiliser les service workers pour stocker d'autres types de contenus, tels que des images, des fichiers vidéo et des fichiers audio, afin de les utiliser hors connexion. Du point de vue de l'expérience utilisateur, vous pouvez utiliser des écrans squelettes qui donnent aux utilisateurs une idée de la vitesse et du contenu pendant le chargement. Ils peuvent ensuite revenir au contenu mis en cache ou à un indicateur hors connexion si nécessaire.
Est entièrement accessible
Toutes les interactions des utilisateurs répondent aux exigences d'accessibilité WCAG 2.0.
Pourquoi
La plupart des utilisateurs voudront, à un moment donné, tirer parti de votre PWA d'une manière décrite dans les exigences d'accessibilité des WCAG 2.0. La capacité des humains à interagir avec votre PWA et à les comprendre existent à différents niveaux, et les besoins peuvent être temporaires ou permanents. En rendant votre PWA accessible, vous vous assurez qu'elle est utilisable par tous.
Comment
L'article Introduction to Web Accessibility (Présentation de l'accessibilité du Web) du W3C constitue un bon point de départ. La plupart des tests d'accessibilité doivent être effectués manuellement. Des outils tels que les audits d'accessibilité dans Lighthouse, axe 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 les recréer vous-même (par exemple, les éléments a et button). Ainsi, lorsque vous devez créer des fonctionnalités plus avancées, vous répondez aux attentes en termes d'accessibilité (par exemple, quand utiliser des flèches plutôt que des onglets).
Les cartes d'alimentation A11Y fournissent d'excellents conseils à ce sujet pour certains composants courants.
Peuvent être découverts par le biais d'une recherche
Votre PWA peut être découverte par le biais d'une recherche.
Pourquoi
L'un des principaux avantages du Web est la possibilité de découvrir des sites et des applications par le biais d'une recherche. De fait, plus de la moitié du trafic vers le site Web provient de la recherche naturelle. Pour que les utilisateurs puissent trouver votre PWA, vous devez impérativement vous assurer que les URL canoniques existent pour le contenu et que les moteurs de recherche peuvent indexer votre site. Cela est particulièrement vrai lorsque vous adoptez le rendu côté client.
Comment
Commencez par vous assurer que chaque URL a un titre et une meta description uniques et descriptifs. Vous pouvez ensuite utiliser la Google Search Console et les audits d'optimisation du référencement dans Lighthouse pour vous aider à déboguer et à résoudre les problèmes de visibilité avec votre PWA. Vous pouvez également utiliser les outils pour les webmasters de Bing ou Yandex, et envisager d'inclure des données structurées à l'aide de schémas de Schema.org dans votre PWA.
Compatible avec tous les types d'entrées
Vous pouvez aussi bien utiliser votre PWA avec une souris, un clavier, un stylet ou un écran tactile.
Pourquoi
Les appareils proposent divers modes de saisie, et les utilisateurs doivent pouvoir basculer facilement entre eux lorsqu'ils utilisent votre application. Tout aussi important, les modes de saisie ne doivent pas dépendre de la taille de l'écran. Par conséquent, les grandes fenêtres d'affichage doivent être compatibles avec l'écran tactile, et les petites fenêtres d'affichage doivent être compatibles avec les claviers et les souris. Dans la mesure du possible, assurez-vous que votre application et toutes ses fonctionnalités sont compatibles avec l'utilisation de n'importe quel mode de saisie que l'utilisateur peut choisir. Le cas échéant, vous devez également améliorer les expériences pour permettre des contrôles spécifiques aux entrées (comme l'extraction Pull-to-Refresh).
Comment
L'API Pointer Events fournit une interface unifiée permettant de travailler avec diverses options de saisie et est particulièrement utile pour ajouter la prise en charge des stylets. Pour prendre en charge à la fois l'écran tactile et le clavier, assurez-vous d'utiliser les bons éléments sémantiques (ancres, boutons, commandes de formulaire, etc.) et de ne pas les recréer avec du code HTML non sémantique (ce qui est bon pour l'accessibilité). Lorsque vous incluez des interactions qui s'activent au passage de la souris, assurez-vous qu'elles peuvent également s'activer lorsque l'utilisateur clique ou appuie dessus.
Fournit le contexte des demandes d'autorisation
Lorsque vous demandez l'autorisation d'utiliser des API puissantes, indiquez le contexte et ne demandez que 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 identifiants, sont intentionnellement conçues pour perturber l'utilisateur, car elles sont généralement liées à des fonctionnalités puissantes nécessitant une activation. Le déclenchement de ces invites sans contexte supplémentaire (lors du chargement de la page, par exemple) réduit la probabilité que les utilisateurs acceptent ces autorisations et soient plus susceptibles de leur méfier à l'avenir. Ne déclenchez ces invites qu'après avoir expliqué en contexte à l'utilisateur pourquoi vous avez besoin de cette autorisation.
Comment
L'article Permission UX et l'article The Right Ways to Ask Users for Permissions (Les bonnes manières de demander des autorisations aux utilisateurs) d'UX Planet sont de bonnes ressources pour comprendre comment concevoir des invites d'autorisation qui, bien qu'elles s'appliquent aux appareils mobiles, s'appliquent à toutes les PWA.
Suit les bonnes pratiques pour un code opérationnel
Un codebase opérationnel vous permet d'atteindre plus facilement vos objectifs et de proposer de nouvelles fonctionnalités.
Pourquoi
La création d'une application Web moderne implique de nombreux efforts. En maintenant votre application à jour et votre codebase opérationnel, vous pouvez proposer plus facilement de nouvelles fonctionnalités qui répondent aux autres objectifs définis dans cette checklist.
Comment
Il existe un certain nombre de vérifications à priorité élevée pour garantir un codebase opérationnel: évitez d'utiliser des bibliothèques présentant des failles connues, supprimez les anti-modèles Web de votre codebase (comme document.write() ou utilisez des écouteurs d'événements de défilement non passif) et codez même de manière défensive pour éviter que votre PWA ne se bloque si les analyses ou d'autres bibliothèques tierces ne se chargent pas. Envisagez d'exiger une analyse de code statique, telle que l'analyse lint, ainsi que des tests automatisés, dans plusieurs navigateurs et versions disponibles. Ces techniques permettent de détecter les erreurs
avant qu'elles ne passent en production.