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 valeurs cœur et optimale des checklists et des recommandations pour vous guider.
Checklist pour les progressive web apps principales
La checklist des progressive web apps décrit les éléments qui rendent une application installable et utilisable par tous les utilisateurs, quels que soient la taille ou le type d’entrée.
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 centrées sur l'utilisateur.
Pourquoi
La rapidité est essentielle pour inciter les utilisateurs à utiliser votre application.
En fait, lorsque le temps de chargement d'une page passe d'une à dix secondes,
la probabilité qu'un utilisateur le refuse augmente de 123%. Les performances ne s'arrêtent pas non plus avec 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, aussi bien dans la façon dont votre application
et comment les utilisateurs la perçoivent.
Bien que toutes les applications aient des besoins différents, les audits de performances dans Lighthouse se base sur Core Web Vitals, et un score élevé pour ces audits rendra vos utilisateurs plus susceptibles une expérience agréable. Vous pouvez également utiliser PageSpeed Insights ou Rapport sur l'expérience utilisateur de Chrome afin d'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 n'importe quel 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, ce qui signifie qu'elles doivent fonctionner entre les navigateurs.
Selon Jeremy Keith, Resilient Web Design identifier les principales fonctionnalités et les mettre à disposition à l'aide de la technologie la plus simple possible, puis l'amélioration dans la mesure du possible. Dans de nombreux cas, cela signifie simplement commencer HTML pour créer les principales fonctionnalités et 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. La façon la plus simple de le faire est
Un formulaire HTML qui envoie une requête POST. Après la construction
que vous pouvez améliorer l'expérience avec JavaScript
validation et l'envoi du formulaire via AJAX, ce qui améliore l'expérience
pour les utilisateurs qui peuvent le prendre en charge.
Vos utilisateurs utilisent votre site sur différents appareils et des navigateurs. Vous ne pouvez pas simplement cibler l'extrémité supérieure de ce spectre. Utilisez la détection des fonctionnalités afin d'offrir une expérience aussi exploitable que possible un éventail d'utilisateurs potentiels, 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 décrivant comment penser à la conception Web dans cette méthodologie progressive multi-navigateurs.
Autres ressources
- L'article Understanding Progressive Enhancement (Comprendre l'amélioration progressive) d'A List Apart est un bon point de départ pour ce sujet.
- Article de Smashing Magazine sur la amélioration progressive fournit une introduction pratique et des liens vers des sujets plus avancés.
- MDN Implémenter la détection de caractéristiques explique comment détecter une caractéristique 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 à n'importe quelle taille de fenêtre.
Pourquoi
Les appareils sont de tailles différentes et les utilisateurs peuvent utiliser votre application différentes tailles, même sur le même appareil. Il est donc essentiel de s'assurer non seulement que votre contenu s'adapte à la fenêtre d'affichage, mais aussi que toutes les fonctionnalités et tous les contenus de votre site sont utilisables à toutes les tailles de fenêtre d'affichage.
Les tâches que les utilisateurs souhaitent accomplir 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 différentes tailles de fenêtre d'affichage. Il devrait être visible, d'une manière ou d'une autre. En fait, comme Luke Wroblewski le déclare dans son livre Mobile First, commencer par un petit écran et ajuster votre conception pour les écrans plus grands peut améliorer la conception d'un site :
Avec les appareils mobiles, les équipes de développement de logiciels doivent se concentrer uniquement les données et actions les plus importantes dans une application. Un écran de 320 x 480 pixels n'a tout simplement pas la place pour des éléments superflus. Vous devez établir des priorités.
Comment
De nombreuses ressources sont disponibles sur le responsive design, y compris l'article original d'Ethan Marcotte, une collection de concepts importants associés, ainsi que de nombreux livres et conférences. Pour affiner ceci les aspects du contenu de la conception réactive, reportez-vous à 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 Sept mythes mortels sur mobile par Josh Clark sont tout aussi pertinentes pour les petites vues vers les sites mobiles, en général.
Lorsque les utilisateurs sont hors connexion, les garder dans votre PWA offre une une expérience plus fluide que de revenir au navigateur par défaut hors connexion. .
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 hors connexion. Une PWA ne doit jamais afficher la page hors connexion par défaut du navigateur. Fournir 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é nécessitant une connexion, permet de donner l'impression que votre expérience Web fait partie de l'appareil sur lequel elle s'exécute.
Comment
Lors d'un événement install d'un service worker, vous pouvez effectuer une pré-mise en cache
Une page hors connexion personnalisée qui s'affiche lorsqu'un utilisateur se déconnecte. Consultez la section Créer une page de remplacement hors connexion pour savoir comment l'implémenter vous-même. Notez que Chrome
afficher une page hors connexion de base si aucune page n'est fournie.
Les utilisateurs qui installent ou ajoutent des applications à leur appareil ont tendance à interagir davantage avec ces applications.
Pourquoi
En installant une progressive web app, vous lui donnez l'apparence et le comportement toutes les autres applications installées. Il se lance au même endroit que les utilisateurs leurs autres applications. Il s'exécute dans sa propre fenêtre d'application, distincte de l'application navigateur, et il apparaît dans la liste des tâches, tout 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 optimale d'une PWA votre PWA de faire partie de l'appareil sur lequel elle s'exécute tirer parti de ce qui rend le Web puissant.
Lorsque la connectivité n'est pas strictement nécessaire, votre application fonctionne de la même manière hors ligne et 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 les informations détaillées et les cartes d'embarquement sont facilement accessibles hors connexion. Musique les vidéos et les applications de podcasting doivent permettre la lecture hors connexion. Réseaux sociaux et les applications 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 en mode hors connexion. l'authentification hors connexion. Une PWA hors connexion offre une véritable expérience pour les 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 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 de 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 utilisateur respectent les exigences d'accessibilité WCAG 2.0.
Pourquoi
La plupart des utilisateurs, à un moment donné de leur vie, veulent utiliser votre PWA d'une manière couvertes par les WCAG 2.0 les exigences d'accessibilité. La capacité des utilisateurs à interagir avec votre PWA et à la comprendre s'étend sur un spectre, 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
manuellement. Des outils tels que l'accessibilité
les audits dans Lighthouse, axe,
et Insights sur l'accessibilité
peut vous aider à automatiser certains tests d'accessibilité. Il est également important de
utiliser des éléments sémantiquement corrects au lieu de les recréer.
vous-même, par exemple, a et button
éléments. 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).
Les cartes nutritionnelles A11Y contiennent
excellent conseil à ce sujet
pour certains composants courants.
Votre PWA peut être facilement découvert dans la recherche.
Pourquoi
L'un des plus grands avantages du Web est la possibilité de découvrir des sites et des applications via la recherche. En fait, plus de la moitié de tout le trafic du site Web provient de la recherche naturelle. Il est essentiel de s'assurer que des URL canoniques existent pour le contenu et que les moteurs de recherche peuvent indexer votre site pour permettre aux utilisateurs potentiels de trouver votre PWA. C'est surtout quand 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 Google Search Console et les audits relatifs à l'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 de 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. Tout aussi important, les méthodes d'entrée ne doivent pas dépendre de la taille de l'écran. Autrement dit, les grands viewports doivent être compatibles avec l'écran tactile, et les petits viewports doivent être compatibles avec les claviers et les souris. Dans la mesure du possible, veillez à ce que et toutes ses fonctionnalités sont compatibles avec l'utilisation de n'importe quel mode de saisie que votre utilisateur pourrait choisir. Le cas échéant, améliorez les expériences pour permettre également des commandes spécifiques aux entrées (comme le rafraîchissement par glissement).
Comment
API Pointer Events fournit une interface unifiée permettant de travailler avec différentes options de saisie ; est particulièrement utile pour prendre en charge des stylets. 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. Si vous incluez les interactions qui s'activent lorsque l'utilisateur pointe sur l'élément, s'assurent qu'ils peuvent également s'activer lorsque l'utilisateur clique ou appuie dessus.
Lorsque vous demandez l'autorisation d'utiliser des API puissantes, fournissez du contexte et posez la question 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 conçues intentionnellement pour perturber l'utilisateur, car elles ont tendance à être liées à des fonctionnalités puissantes qui nécessitent une activation. Le déclenchement de ces requêtes sans contexte supplémentaire, comme lors du chargement de la page, rend les utilisateurs moins susceptibles d'accepter ces autorisations et plus susceptibles de ne pas leur faire confiance à l'avenir. Déclenchez ces invites uniquement après en fournissant à l'utilisateur une justification en contexte de la raison pour laquelle vous en avez besoin l'autorisation.
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
La création d'une application Web moderne nécessite de nombreux éléments. En gardant votre application à jour et votre codebase en bon état, vous pouvez plus facilement 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 tombe pas en panne ou d'autres bibliothèques tierces ne se chargent pas.
- Envisagez de demander une analyse de code statique, comme le linting, des tests automatisés dans plusieurs navigateurs et canaux de publication. Ces peuvent aider à détecter les erreurs avant qu'elles ne soient mises en production.