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.
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. L'objectif des sites est d'optimiser les métriques de performances axées sur l'utilisateur.
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 utilisateur, 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 dans Lighthouse sont basés sur les Core Web Vitals. Si vous obtenez des notes élevées pour ces audits, il est plus probable 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 sur les 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.
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 dans 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. Une fois cette étape terminée, vous pouvez améliorer l'expérience avec JavaScript pour valider le formulaire et l'envoyer via AJAX, améliorant ainsi 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 simplement cibler le haut du spectre. En utilisant la détection de fonctionnalités, vous pourrez 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 décrit comment aborder la conception Web avec cette méthodologie progressive multinavigateur.
Autres ressources
- Le cours Understanding Progressive Optimization d'A List Apart constitue une bonne introduction à ce sujet.
- L'amélioration progressive: qu'est-ce et comment l'utiliser ? par Smashing Magazine propose 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 caractéristique en l'interrogeant directement.
Les utilisateurs peuvent se servir de votre PWA sur n'importe quelle taille d'écran, et l'ensemble du 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 et que l'ensemble des fonctionnalités et contenus 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 la taille de la fenêtre d'affichage. Il doit être disponible d'une manière ou d'une autre. En fait, comme l'explique Luke Wroblewski dans son livre "Mobile First", le fait de commencer petit, puis de grandir au lieu de l'inverse peut en fait améliorer la conception d'un site:
> Les appareils mobiles nécessitent que les équipes de développement logiciel se concentrent uniquement sur les données et actions les plus importantes d'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 établir des priorités.
Comment
Il existe de nombreuses ressources sur le responsive design, dont l'article original d'Ethan Marcette, un ensemble de concepts importants en lien avec ce concept, ainsi que de nombreux livres et débats. Pour axer cette discussion aux aspects du responsive design sur le contenu, 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.
Lorsque les utilisateurs sont hors connexion, les garder dans votre PWA leur 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, que ce soit lorsqu'un utilisateur accède à une URL qui n'a pas été mise en cache ou lorsqu'il tente d'utiliser une fonctionnalité nécessitant une connexion, vous pouvez donner l'impression que votre expérience Web fait 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.
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 permet d'améliorer l'apparence et le comportement de l'application comme toutes les autres applications installées. Il est lancé à partir de 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 ? Pour la même raison, vous souhaitez qu'un utilisateur installe votre application à partir d'une plate-forme de téléchargement d'applications. Les utilisateurs qui installent vos applications constituent votre audience la plus engagée. Ils enregistrent de meilleures métriques d'engagement que les visiteurs classiques, 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 des avantages du Web.
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 permettre d'accéder facilement aux détails des voyages et aux 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. Pensez donc à concevoir pour l'authentification hors connexion. Une PWA hors connexion offre aux utilisateurs une véritable expérience semblable à celle d'une application.
Comment
Une fois que vous avez déterminé les fonctionnalités que vos utilisateurs attendent du mode 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 que l'utilisateur dispose à 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 pour une utilisation hors connexion, ainsi que pour mettre en œuvre des sessions sûres et de longue durée afin de garder les utilisateurs authentifiés. 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.
Toutes les interactions utilisateur répondent aux exigences d'accessibilité WCAG 2.0.
Pourquoi
La plupart des utilisateurs souhaiteront, à un moment ou à un autre, exploiter votre PWA d'une manière décrite dans les exigences d'accessibilité de WCAG 2.0. La capacité des humains à interagir avec votre PWA et à les comprendre existent à différents niveaux, et leurs besoins peuvent être temporaires ou permanents. En rendant votre PWA accessible, vous vous assurez qu'elle peut être utilisée 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 contiennent d'excellents conseils à ce sujet pour certains composants courants.
Vous pouvez facilement trouver votre PWA en effectuant une recherche.
Pourquoi
L'un des principaux avantages du Web est la possibilité de découvrir des sites et des applications en effectuant 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 de Lighthouse pour vous aider à déboguer et à résoudre les problèmes de visibilité de votre PWA. Vous pouvez également utiliser les outils pour les webmasters de Bing ou Yandex, et envisager d'inclure des données structurées via des schémas de Schema.org dans votre PWA.
Vous pouvez aussi bien utiliser votre PWA avec une souris, un clavier, un stylet ou un écran tactile.
Pourquoi
Les appareils offrent divers modes de saisie, et les utilisateurs doivent pouvoir passer facilement de l'un à l'autre lorsqu'ils utilisent votre application. Tout aussi important, les modes de saisie ne doivent pas dépendre de la taille de l'écran. Autrement dit, 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 de vos capacités, 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 (telles que la fonctionnalité Pull-to-Refresh).
Comment
L'API Pointer Events fournit une interface unifiée qui permet 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 par clic ou par appui.
Lorsque vous demandez l'autorisation d'utiliser des API puissantes, fournissez des informations contextuelles 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 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 requêtes 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 se méfier à l'avenir. 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 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 que axées sur les mobiles, s'appliquent à toutes les PWA.
Un codebase opérationnel vous permet d'atteindre vos objectifs et de proposer de nouvelles fonctionnalités plus facilement.
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 plante si les analyses ou d'autres bibliothèques tierces échouent. Envisagez d'exiger une analyse de code statique, telle que le linting, ainsi que des tests automatisés, dans plusieurs navigateurs et versions disponibles. Ces techniques permettent de détecter les erreurs avant qu'elles ne soient mises en production.