Les applications Progressive Web App (PWA) sont conçues et améliorées avec des API modernes pour offrir des fonctionnalités, une fiabilité et une facilité d'installation améliorées, tout en touchant tous les utilisateurs, partout et sur n'importe quel appareil avec un seul codebase. Pour vous aider à créer la meilleure expérience possible, utilisez les checklists et recommandations de base et optimales.
Checklist pour les 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 sa taille et 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 suscitent et fidélisent davantage les utilisateurs que les moins performants. Optimisez vos campagnes en fonction de 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 de page passe d'une à dix secondes, la probabilité qu'un utilisateur quitte votre application augmente de 123 %. Les performances ne s'arrêtent pas non plus à 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 votre expérience, à la fois dans le comportement de votre application et dans 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. Si vous obtenez un score élevé pour ces audits, vos utilisateurs seront plus susceptibles de bénéficier 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 de performances réelles pour votre application Web.
Comment
Suivez notre guide sur les temps de chargement rapides pour découvrir comment faire démarrer et rester rapide votre PWA.
Les utilisateurs peuvent utiliser le navigateur de leur choix pour accéder à votre application Web avant l'installation de celle-ci.
Pourquoi
Les progressive web apps sont des applications Web en avant-première, ce qui signifie qu'elles doivent fonctionner sur plusieurs navigateurs.
Selon Jeremy Keith de Resilient Web Design, un moyen efficace d'y parvenir consiste à identifier les principales fonctionnalités, à 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 implique de commencer par du code HTML pour créer les fonctionnalités principales, et d'améliorer l'expérience utilisateur avec CSS et JavaScript afin de créer une expérience plus attrayante.
Prenons l'exemple de l'envoi de formulaires. Le moyen le plus simple d'implémenter cela est d'utiliser un formulaire HTML qui envoie une requête POST. Une fois cette opération terminé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 pouvant le prendre en charge.
Vos utilisateurs accèdent à votre site sur un large éventail d'appareils et de navigateurs. Vous ne pouvez pas vous contenter de cibler le haut de gamme. Utilisez la détection de fonctionnalités pour offrir une expérience utilisable au plus grand nombre d'utilisateurs potentiels possible, y compris ceux qui utilisent des navigateurs et des appareils qui n'existent pas encore.
Comment
Resilient Web Design de Jeremy Keith est une excellente ressource qui décrit comment penser la conception Web dans cette méthodologie progressive multinavigateur.
Autres ressources
- L'article Understanding Progressive amélioration de List Apart constitue une bonne introduction à ce sujet.
- Article de Smashing Magazine sur la amélioration progressive donne 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 la interrogeant directement.
Les utilisateurs peuvent utiliser votre PWA sur n'importe quelle taille d'écran, et l'ensemble de son contenu est disponible à n'importe quelle taille de fenêtre.
Pourquoi
Les appareils sont de tailles différentes, et les utilisateurs peuvent utiliser 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 bien à 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 en fonction de la taille de la fenêtre d'affichage. Vous pouvez réorganiser votre contenu pour l'adapter à différentes tailles de fenêtre d'affichage, le tout devrait y figurer d'une manière ou d'une autre. Comme l'indique Luke Wroblewski dans son ouvrage Mobile First, commencer à petite échelle et ajuster votre conception pour les écrans plus grands peut améliorer la conception d'un site:
Les appareils mobiles exigent que les équipes de développement logiciel se concentrent uniquement sur les données et les actions les plus importantes d'une application. Un écran de 320 x 480 pixels ne laisse tout simplement pas de place à des éléments superflus. Vous devez établir des priorités.
Comment
Il existe de nombreuses ressources sur le responsive design, y compris l'article original d'Ethan Marcotte, un recueil de concepts importants en lien avec le responsive design, ainsi que de nombreux livres et conférences. Pour affiner cette discussion sur les aspects de contenu du responsive design, consultez la conception axée sur le contenu et les mises en page responsives axées sur le contenu. Enfin, bien que l'article Seven Deadly Mobile Myths (Sept mythes mortels sur les mobiles) de Josh Clark soit axé sur les mobiles, les leçons qu'il contient sont tout aussi pertinentes pour les vues de petite taille des sites responsifs que pour les mobiles en général.
Lorsque les utilisateurs sont hors connexion, les laisser 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 leur état de 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 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 qu'il essaie d'utiliser une fonctionnalité nécessitant une connexion, vous offrez à votre expérience Web l'impression qu'elle fait partie de l'appareil sur lequel elle s'exécute.
Comment
Lors de l'événement install d'un service worker, vous pouvez pré-cacher une page hors connexion personnalisée à afficher lorsqu'un utilisateur passe en mode hors connexion. Consultez Créer une page de remplacement hors connexion pour savoir comment l'implémenter vous-même. Si aucune page n'est fournie, Chrome affiche une page hors connexion de base.
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 lui permet de ressembler à toutes les autres applications installées et de se comporter comme elles. 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.
Comme pour les applications spécifiques à un appareil, les utilisateurs qui installent vos applications constituent votre audience la plus engagée. Ils présentent souvent des métriques d'engagement équivalentes à celles des utilisateurs d'applications sur les appareils mobiles. Ces métriques incluent un plus grand nombre de visites répétées, une durée de visite plus longue sur votre site et des taux de conversion plus élevés que ceux des visiteurs habituels.
Comment
Suivez notre guide sur les applications installables pour découvrir comment rendre votre PWA installable.
Checklist optimale pour les Progressive Web Apps
Pour créer une PWA vraiment exceptionnelle, qui semble être une application de premier ordre, vous devez aller au-delà de la liste de contrôle de base. La checklist d'une PWA optimale consiste à donner à votre PWA l'impression de faire partie de l'appareil sur lequel elle s'exécute, tout en tirant parti de ce qui rend le Web puissant.
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 PWA soient utilisables hors connexion. Par exemple, les applications de voyage et de compagnie aérienne doivent proposer les informations sur le voyage et les cartes d'embarquement facilement accessibles lorsque vous êtes hors connexion. Les applications de musique, de vidéo et de podcasting doivent permettre la lecture hors connexion. Les applications de réseaux sociaux et d'actualités doivent mettre en cache les contenus récents afin que les utilisateurs puissent les lire hors connexion. Les utilisateurs s'attendent également à rester authentifiés lorsqu'ils sont hors connexion. Concevez donc votre application pour l'authentification hors connexion. Une PWA hors connexion offre une véritable expérience semblable à celle d'une application aux utilisateurs.
Comment
Après avoir déterminé les fonctionnalités que vos utilisateurs s'attendent à utiliser hors connexion, vous devez rendre vos contenus disponibles et adaptables aux contextes hors connexion. 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 différer les communications serveur jusqu'à ce que l'utilisateur dispose à nouveau d'une connexion stable. Vous pouvez également utiliser des workers de service pour stocker d'autres types de contenus, 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 perception de la vitesse et du contenu pendant le chargement, qui peut ensuite revenir au contenu mis en cache ou à un indicateur hors connexion si nécessaire.
Toutes les interactions des utilisateurs respectent les exigences d'accessibilité de la norme WCAG 2.0.
Pourquoi
La plupart des utilisateurs souhaitent, à un moment donné de leur vie, utiliser leur PWA d'une manière conforme aux exigences d'accessibilité de la WCAG 2.0. La capacité des humains à interagir avec les PWA et à les comprendre existent très souvent, et les besoins peuvent être temporaires ou permanents. En rendant votre PWA accessible, vous la rendez utilisable par tous.
Comment
La Introduction à l'accessibilité Web du W3C constitue 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, 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. Cela garantit que lorsque vous devez créer des fonctionnalités plus avancées, les attentes en termes 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.
Votre PWA peut être facilement découvert dans la 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. En effet, plus de la moitié de l'ensemble du trafic vers votre site Web provient de la recherche naturelle. Il est essentiel de s'assurer que des URL canoniques existent pour votre contenu et que les moteurs de recherche peuvent indexer votre site pour permettre aux utilisateurs potentiels de trouver votre PWA. Cela est particulièrement vrai lorsque vous adoptez le rendu côté client.
Comment
Commencez par vous assurer que chaque URL comporte 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 visibilité 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.
La PWA fonctionne aussi bien avec une souris, un clavier, un stylet qu'avec un écran tactile.
Pourquoi
Les appareils proposent différentes méthodes d'entrée, et les utilisateurs doivent pouvoir passer facilement de l'une à l'autre lorsqu'ils utilisent votre application. Il est important de noter que les méthodes 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 du possible, assurez-vous que votre application et toutes ses fonctionnalités sont compatibles avec n'importe quelle méthode de saisie choisie par l'utilisateur. Le cas échéant, améliorez les expériences en intégrant des commandes spécifiques aux entrées (telles que "Pull" pour "Actualiser").
Comment
L'API Pointer Events fournit une interface unifiée pour travailler avec différentes options d'entrée. Elle est particulièrement adaptée pour ajouter la compatibilité avec le stylet. Pour prendre en charge à la fois l'écran tactile et le clavier, 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 lorsque l'utilisateur pointe dessus, assurez-vous qu'elles peuvent également s'activer en cas de clic ou d'appui.
Lorsque vous demandez l'autorisation d'utiliser des API puissantes, fournissez du contexte et ne demandez que les cas où l'API est nécessaire.
Pourquoi
Les API qui déclenchent une demande d'autorisation, comme les notifications, la géolocalisation et les identifiants, sont intentionnellement conçues pour perturber l'utilisateur, car elles ont tendance à être liées à des fonctionnalités puissantes qui nécessitent une activation. Si vous déclenchez ces invites sans contexte supplémentaire, par exemple lors du chargement de la page, les utilisateurs seront moins susceptibles d'accepter ces autorisations et de ne plus leur faire confiance à l'avenir. À la place, ne déclenchez ces invites qu'après avoir expliqué à l'utilisateur pourquoi vous avez besoin de cette autorisation dans le contexte.
Comment
L'article UX des autorisations et l'article Les bonnes façons de demander des autorisations aux utilisateurs d'UX Planet sont de bonnes ressources pour comprendre comment concevoir des requêtes d'autorisation qui, bien que centrées sur le mobile, s'appliquent à tous les PWA.
En gardant votre codebase saine, vous pouvez plus facilement atteindre vos objectifs et proposer de nouvelles fonctionnalités.
Pourquoi
Il y a beaucoup de choses qui entrent dans la création d'une application web moderne. En maintenant votre application à jour et votre codebase opérationnel, il est plus facile de proposer de nouvelles fonctionnalités qui répondent aux autres objectifs définis dans cette checklist.
Comment
Plusieurs vérifications de priorité élevée permettent de s'assurer que le codebase est 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 codebase (par exemple, en utilisant
document.write()ou en disposant d'é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 plante pas si les données analytiques ou d'autres bibliothèques tierces ne se chargent pas.
- Envisagez d'exiger une analyse de code statique, comme l'analyse lint, 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.