Les applications Web progressives (PWA) sont conçues et améliorées à l'aide d'API modernes pour offrir des fonctionnalités, une fiabilité et une facilité d'installation améliorées, tout en permettant de toucher n'importe qui, n'importe où et sur n'importe quel appareil avec une seule base de code. Pour vous aider à créer la meilleure expérience possible, utilisez les checklists et les recommandations de base et optimales.
Checklist de base pour les progressive web apps
La checklist des Progressive Web Apps décrit ce qui rend une application installable et utilisable par tous les utilisateurs, quelle que soit sa taille ou son type d'entrée.
Une vitesse constante dès le démarrage
Les performances jouent un rôle important dans le succès de toute expérience en ligne, car les sites très performants enregistrent un meilleur engagement et une meilleure fidélisation des utilisateurs que les sites moins performants. Concentrez-vous sur l'optimisation des métriques de performances axées sur l'utilisateur.
Pourquoi
La vitesse est essentielle pour inciter les utilisateurs à utiliser votre application. En effet, si le temps de chargement des pages passe de une à dix secondes, la probabilité qu'un utilisateur rebondisse augmente de 123 %. Les performances ne s'arrêtent pas à l'événement load. Les utilisateurs ne doivent jamais se demander si leur interaction, comme le fait de cliquer sur un bouton, a été enregistrée ou non. Le défilement et les animations doivent être fluides. Les performances ont une incidence sur l'ensemble de votre expérience, à la fois sur le comportement de votre application et sur la façon dont les utilisateurs la perçoivent.
Bien que toutes les applications aient des besoins différents, les audits de performances dans Lighthouse sont basés sur les Core Web Vitals. Obtenir un score élevé lors de ces audits permettra à vos utilisateurs de profiter d'une expérience agréable. Vous pouvez également utiliser PageSpeed Insights ou le rapport d'expérience utilisateur Chrome pour obtenir des données réelles sur les performances de votre application Web.
Comment
Suivez notre guide sur les temps de chargement rapides pour découvrir comment rendre votre PWA rapide au démarrage et pendant l'utilisation.
Fonctionne dans n'importe quel navigateur
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 avant tout des applications Web, ce qui signifie qu'elles doivent fonctionner sur tous les navigateurs.
Selon Jeremy Keith dans Resilient Web Design, une façon efficace de procéder consiste à identifier les fonctionnalités de base, à les rendre disponibles à 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 signifie commencer par le HTML pour créer les fonctionnalités de base, puis améliorer l'expérience utilisateur avec CSS et JavaScript pour créer une expérience plus attrayante.
Prenons l'exemple de l'envoi d'un formulaire. Le moyen le plus simple d'implémenter cela est un formulaire HTML qui envoie une requête POST. Une fois cette étape effectuée, vous pouvez améliorer l'expérience avec JavaScript pour valider le formulaire et l'envoyer via AJAX, ce qui améliore l'expérience des utilisateurs qui peuvent le prendre en charge.
Vos utilisateurs accèdent à votre site sur différents appareils et navigateurs. Vous ne pouvez pas cibler uniquement le haut de ce spectre. Utilisez la détection de fonctionnalités pour offrir une expérience utilisable au plus grand nombre possible d'utilisateurs potentiels, y compris ceux qui utilisent des navigateurs et des appareils qui n'existent pas encore.
Comment
L'excellent ouvrage de Jeremy Keith, Resilient Web Design, décrit comment aborder la conception Web dans cette méthodologie progressive et multi-navigateur.
Autres ressources
- L'article Understanding Progressive Enhancement d'A List Apart est une bonne introduction au sujet.
- L'article Progressive Enhancement: What It Is, And How To Use It? de Smashing Magazine propose une introduction pratique et des liens vers des sujets plus avancés.
- L'article Implémenter la détection de fonctionnalités de MDN explique comment détecter une fonctionnalité en l'interrogeant directement.
S'adaptent à toutes les tailles d'écran
Les utilisateurs peuvent utiliser votre PWA sur n'importe quelle taille d'écran, et l'ensemble de son contenu est disponible quelle que soit la taille de la fenêtre d'affichage.
Pourquoi
Les appareils sont de différentes tailles, et les utilisateurs peuvent utiliser votre application à différentes tailles, même sur le même appareil. Il est donc essentiel de vous assurer que votre contenu s'adapte à la fenêtre d'affichage et que toutes les fonctionnalités et tous les contenus de votre site sont utilisables quelle que soit la taille de la fenêtre d'affichage.
Les tâches que les utilisateurs souhaitent effectuer et les contenus auxquels ils veulent accéder ne changent pas en fonction de la taille de la fenêtre d'affichage. Vous pouvez réorganiser votre contenu pour différentes tailles de fenêtre d'affichage. Il devrait être disponible d'une manière ou d'une autre. En fait, comme l'indique Luke Wroblewski dans son livre Mobile First, commencer petit et ajuster votre conception pour les écrans plus grands peut améliorer la conception d'un site :
"Les appareils mobiles exigent des équipes de développement logiciel qu'elles se concentrent uniquement sur les données et les actions les plus importantes d'une application. Il n'y a tout simplement pas de place sur 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 la conception responsives, y compris l'article original d'Ethan Marcotte et une collection de concepts importants qui y sont liés, ainsi que de nombreux livres et conférences.
Pour limiter cette discussion aux aspects liés au contenu de la conception responsives, consultez :
- Conception axée sur le contenu
- Mises en page responsives avec contenu sortant
- Sept mythes mortels sur le mobile, qui s'applique aussi bien aux vues de petite taille des sites responsifs qu'à tous les mobiles.
Fournit une page hors connexion personnalisée
Lorsque les utilisateurs sont hors connexion, le fait de les garder dans votre PWA leur offre une expérience plus fluide que de les rediriger vers 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 vierge lorsqu'elle est hors connexion, et une PWA ne doit jamais afficher la page hors connexion par défaut du navigateur. En proposant 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 contribuez à ce que votre expérience Web soit perçue comme faisant partie de l'appareil sur lequel elle s'exécute.
Comment
Lors de l'événement install d'un service worker, vous pouvez prémettre en cache une page hors connexion personnalisée à afficher lorsqu'un utilisateur se déconnecte. Consultez Créer une page de secours hors connexion pour savoir comment l'implémenter vous-même. Chrome continue d'afficher une page hors connexion de base si aucune n'est fournie.
Installable
Les utilisateurs qui installent ou ajoutent des applications sur leur appareil ont tendance à les utiliser davantage.
Pourquoi
L'installation d'une progressive web app lui permet de ressembler à toutes les autres applications installées, de se comporter comme elles et d'offrir la même expérience. Il se lance au même endroit que les autres applications des utilisateurs. 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.
Comme pour les applications spécifiques à un appareil, les utilisateurs qui installent vos applications constituent votre audience la plus engagée. Leurs métriques d'engagement sont souvent équivalentes à celles des utilisateurs d'applications sur les appareils mobiles. Ces métriques incluent plus de visites répétées, des durées de visite plus longues sur votre site et des taux de conversion plus élevés que ceux des visiteurs classiques.
Comment
Suivez notre guide d'installation.
Checklist pour une progressive web app optimale
Pour créer une PWA vraiment performante, qui ressemble à une application de premier ordre, vous avez besoin de plus que la checklist de base. La checklist PWA optimale consiste à faire en sorte que votre PWA ait l'impression de faire partie de l'appareil sur lequel elle s'exécute, tout en tirant parti de ce qui fait 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 que lorsqu'elle est en ligne.
Pourquoi
En plus de fournir une page hors connexion personnalisée, les utilisateurs s'attendent à ce que les PWA soient utilisables hors connexion. Par exemple, les applications de voyage et de compagnies aériennes doivent permettre d'accéder facilement aux détails des voyages et aux cartes d'embarquement hors connexion. Les applications de musique, de vidéo et de podcast doivent autoriser la lecture hors connexion. Les applications d'actualités et de réseaux sociaux doivent mettre en cache les contenus récents pour que les utilisateurs puissent les lire hors connexion. Les utilisateurs s'attendent également à rester authentifiés lorsqu'ils sont hors connexion. Prévoyez donc l'authentification hors connexion.
Une PWA hors connexion offre aux utilisateurs une expérience véritablement semblable à celle d'une application.
Comment
Après avoir déterminé les fonctionnalités que vos utilisateurs s'attendent à pouvoir utiliser hors connexion, vous devez rendre votre contenu disponible et adaptable aux contextes hors connexion. Vous pouvez utiliser IndexedDB, un système de stockage NoSQL dans le 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 avec le serveur jusqu'à ce que l'utilisateur dispose à nouveau d'une connexion stable. Vous pouvez utiliser des service workers pour stocker d'autres types de contenu, tels que des images, des fichiers vidéo et des fichiers audio, pour une utilisation hors connexion, et pour implémenter des sessions sécurisées et durables afin de maintenir l'authentification des utilisateurs.
Du point de vue de l'expérience utilisateur, vous pouvez utiliser des écrans squelettes qui donnent aux utilisateurs une impression de vitesse et de contenu pendant le chargement, puis revenir au contenu mis en cache ou à un indicateur hors connexion si nécessaire.
Entièrement accessible
Toutes les interactions utilisateur respectent la dernière norme internationale WCAG (Web Content Accessibility Guidelines).
Pourquoi
La plupart des utilisateurs souhaitent, à un moment donné de leur vie, utiliser votre PWA d'une manière couverte par les WCAG. La capacité des utilisateurs à interagir avec votre PWA et à la comprendre varie. Leurs besoins peuvent être temporaires ou permanents. En rendant votre PWA accessible, vous la rendez utilisable par tous.
Comment
Le guide d'introduction à l'accessibilité Web du W3C est un bon point de départ. La majorité des tests d'accessibilité doivent être effectués manuellement. Les outils Audit de l'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, comme les éléments <a> et <button>. Cela garantit que, lorsque vous avez besoin de créer des fonctionnalités plus avancées, les attentes en matière d'accessibilité sont satisfaites, par exemple quand utiliser des flèches plutôt que des onglets.
A11Y Nutrition Cards fournit d'excellents conseils à ce sujet pour certains composants courants.
Visible dans la recherche
Votre PWA peut être facilement découverte grâce à la recherche.
Pourquoi
L'un des principaux avantages du Web est la possibilité de découvrir des sites et des applications grâce à la recherche. En effet, plus de la moitié du trafic Web provient de la recherche naturelle. Il est essentiel de vous assurer que des URL canoniques existent pour votre contenu et que les moteurs de recherche peuvent indexer votre site afin de permettre aux utilisateurs potentiels de 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 possède un titre et une meta description uniques et descriptifs. Vous pouvez ensuite utiliser la Google Search Console et les audits d'optimisation pour les moteurs de recherche dans Lighthouse pour déboguer et résoudre les problèmes de détectabilité de votre PWA.
Vous pouvez également utiliser les outils pour les propriétaires de sites de Bing ou Yandex, et envisager d'inclure des données structurées à l'aide de schémas de Schema.org dans votre PWA.
Fonctionne avec n'importe quel type d'entrée
Votre PWA est utilisable de la même manière avec une souris, un clavier, un stylet ou un écran tactile.
Pourquoi
Les appareils offrent différentes méthodes de saisie, et les utilisateurs doivent pouvoir passer facilement de l'une à l'autre lorsqu'ils utilisent votre application. Tout aussi important, les méthodes de saisie ne doivent pas dépendre de la taille de l'écran. Cela signifie que les grandes fenêtres d'affichage doivent être compatibles avec le toucher et que 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 n'importe quelle méthode de saisie que votre utilisateur pourrait choisir. Le cas échéant, améliorez les expériences pour autoriser également les commandes spécifiques aux entrées (comme l'actualisation par balayage).
Comment
L'API Pointer Events fournit une interface unifiée pour travailler avec différentes options d'entrée. Elle est particulièrement utile pour ajouter la prise en charge du stylet. Pour prendre en charge à la fois le clavier et l'écran tactile, assurez-vous d'utiliser les éléments sémantiques appropriés (ancres, boutons, commandes de formulaire, etc.) et de ne pas les reconstruire avec du code HTML non sémantique. Lorsque vous incluez des interactions qui s'activent au passage de la souris, assurez-vous qu'elles peuvent également s'activer au clic ou au toucher.
Fournit le contexte des demandes d'autorisation
Lorsque vous demandez l'autorisation d'utiliser des API puissantes, fournissez du contexte et ne demandez l'autorisation que lorsque l'API est nécessaire.
Pourquoi
Les API qui déclenchent une invite d'autorisation, comme 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 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 explication contextuelle de la raison pour laquelle vous avez besoin de cette autorisation.
Comment
L'article UX des autorisations et Les bonnes pratiques pour demander des autorisations aux utilisateurs d'UX Planet sont de bonnes ressources pour comprendre comment concevoir des invites d'autorisation qui, bien que principalement axées sur le mobile, s'appliquent à toutes les PWA.
Respect des bonnes pratiques pour un code sain
Un codebase sain 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 éléments. En gardant votre application à jour et votre codebase sain, vous pouvez plus facilement proposer de nouvelles fonctionnalités qui répondent aux autres objectifs de cette checklist.
Comment
Il existe plusieurs vérifications de haute priorité pour garantir un code de base sain :
- Évitez d'utiliser des bibliothèques présentant des failles connues.
- Assurez-vous de ne pas utiliser d'API obsolètes.
- Supprimez les pratiques de codage dangereuses de votre base de code, telles que
document.write()ou les écouteurs d'événements de défilement non passifs. - Vous pouvez même coder de manière défensive pour vous assurer que votre PWA ne tombe pas en panne si les bibliothèques d'analyse ou d'autres bibliothèques tierces ne parviennent pas à se charger.
- Envisagez d'exiger une analyse de code statique, comme le linting, ainsi que des tests automatisés dans plusieurs navigateurs et canaux de diffusion. Ces techniques peuvent vous aider à détecter les erreurs avant qu'elles ne soient mises en production.