Les progressive web apps (PWA) sont conçues et améliorées à l'aide d'API modernes pour offrir des fonctionnalités, une fiabilité et une installation améliorées, et atteindre tout le monde, partout, sur n'importe quel appareil avec un seul codebase. Pour vous aider à créer la meilleure expérience possible, utilisez les checklists et recommandations essentielles et optimales pour vous guider.
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 rapidité est essentielle pour inciter les utilisateurs à utiliser votre application. En effet, lorsque le temps de chargement d'une page passe d'une seconde à dix secondes, la probabilité qu'un utilisateur le quitte soit 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 ont une incidence sur 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 réelles sur les performances de votre application Web.
Comment
Suivez notre guide sur les temps de chargement rapides pour savoir comment faire en sorte que votre PWA démarre rapidement et reste rapide.
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.
Les internautes utilisent votre site sur différents appareils et 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 possible d'utilisateurs potentiels, y compris ceux qui utilisent des navigateurs et des appareils qui n'existent pas encore.
Comment
Le document Resilient Web Design de Jeremy Keith est une excellente ressource qui explique comment aborder la conception Web dans cette méthodologie progressive multi-navigateur.
Autres ressources
- L'article Understanding Progressive amélioration de List Apart constitue une bonne introduction à ce sujet.
- Amélioration progressive: ce qu'est, et comment l'utiliser ? de Smashing Magazine donne une introduction pratique et des liens vers des sujets plus avancés.
- L'article Mettre en œuvre la détection de caractéristiques de MDN explique comment détecter une fonctionnalité en l'interrogeant directement.
Les utilisateurs peuvent utiliser votre PWA sur n'importe quelle taille d'écran, et l'ensemble de son contenu est disponible dans toutes les tailles de fenêtre d'affichage.
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 nécessitent que les équipes de développement de logiciels 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 limiter cette discussion aux aspects liés au contenu du responsive design, consultez les sections Conception axée sur le contenu et Mises en page responsives basées sur le contenu. Enfin, bien qu'il soit axé sur les mobiles, les leçons tirées de Seven Deadly Mobile Myths de Josh Clark sont tout aussi pertinentes pour les petites vues de sites responsifs que pour les mobiles en général.
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 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 effectuer une mise en cache préalable d'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ée pour voir un exemple concret et apprendre à le mettre en œuvre vous-même.
Les utilisateurs qui installent ou ajoutent des applications sur leur appareil ont tendance à interagir davantage avec ces applications.
Pourquoi
Lorsque vous installez une progressive web app, elle a l'apparence et le comportement de 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 de celle 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 sont votre audience la plus engagée et disposent souvent de métriques d'engagement équivalentes à celles des utilisateurs d'appareils mobiles. Ces métriques incluent un plus grand nombre de visites répétées, un plus grand nombre de visites plus longues sur votre site et des taux de conversion plus élevés que les visiteurs habituels.
Comment
Suivez notre guide à installer pour découvrir comment rendre votre PWA installable.
Checklist pour une progressive web app optimale
Pour créer une PWA de qualité, qui ressemble à une application de pointe, il ne suffit pas d'utiliser la checklist 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 voyages et de compagnies aériennes doivent pouvoir accéder facilement aux informations sur les trajets et aux cartes d'embarquement hors connexion. Les applications de musique, de vidéos et de podcasting doivent permettre la lecture hors connexion. Les applications de réseaux sociaux et d'actualités doivent mettre en cache le contenu récent afin que les utilisateurs puissent le lire hors connexion. Les utilisateurs s'attendent également à rester authentifiés lorsqu'ils sont hors connexion. Concevez donc votre application pour une 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 s'attendent à pouvoir utiliser hors connexion, vous devez faire en sorte que votre contenu soit disponible et adaptable 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 les utiliser pour stocker d'autres types de contenus, tels que des images, des fichiers vidéo et audio, en vue d'une utilisation hors connexion, et pour mettre en œuvre des sessions sécurisées 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 squelettes qui donnent aux utilisateurs une perception de la vitesse et du contenu pendant le chargement. Ils peuvent ensuite revenir au contenu mis en cache ou à un indicateur hors connexion, selon les besoins.
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 selon un spectre donné. Les besoins peuvent être temporaires ou permanents. En rendant votre PWA accessible, vous la rendez utilisable par tous.
Comment
La page
Introduction to Web Accessibility (Présentation de 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. Ainsi, lorsque vous devez créer des fonctionnalités plus avancées, les attentes en matière d'accessibilité sont satisfaites (par exemple, quand utiliser des flèches ou des tabulations).
Les cartes nutritionnelles A11Y fournissent d'excellents conseils à ce sujet pour certains composants courants.
Vous pouvez facilement découvrir 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 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 possède 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 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 de saisie, et les utilisateurs doivent pouvoir passer facilement de l'un à 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 to Refresh").
Comment
L'API Pointer Events fournit une interface unifiée permettant de travailler avec différentes options de saisie. Elle est particulièrement utile pour ajouter la prise en charge des stylets. Pour assurer la compatibilité avec les écrans tactiles 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. Lorsque vous incluez les interactions qui s'activent lorsque l'utilisateur pointe dessus, assurez-vous qu'elles peuvent également l'être lorsque l'utilisateur clique ou appuie dessus.
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 invite 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. Déclenchez plutôt ces invites uniquement après avoir fourni à l'utilisateur une justification contextuelle expliquant pourquoi vous avez besoin de cette autorisation.
Comment
L'article Permission UX (Expérience utilisateur des autorisations) et The Right Ways to Ask Users for Permissions (Les bonnes façons de demander des autorisations aux utilisateurs) 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
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
Il existe un certain nombre de vérifications à priorité élevée pour garantir le bon fonctionnement du codebase:
- Évitez d'utiliser des bibliothèques présentant des failles connues.
- Assurez-vous de ne pas utiliser d'API obsolètes.
- supprimer les pratiques de codage non sécurisées de votre codebase (comme l'utilisation de
document.write()ou les écouteurs d'événements de défilement non passif) ; - Vous pouvez même coder de manière défensive pour vous assurer que votre PWA fonctionne correctement en cas d'échec du chargement des analyses ou d'autres bibliothèques tierces.
- Envisagez de nécessiter une analyse de code statique (avec linting, par exemple), ainsi que des tests automatisés dans plusieurs navigateurs et canaux de publication. Ces techniques peuvent vous aider à détecter les erreurs avant qu'elles ne soient mises en production.