Optimiser les PWA pour différents modes d’affichage

• Les progressive web apps (PWA) sont un outil puissant pour donner aux applications web une sensation proche des applications natives, et permettent d’optimiser l’expérience utilisateur via différents modes d’affichage
• Le mode d’affichage défini dans le fichier manifeste d’une PWA ajuste la visibilité de l’interface du navigateur, et permet d’adapter l’interface utilisateur selon chaque mode afin de réduire l’écart entre l’expérience web et l’expérience applicative
• En utilisant les media queries CSS et JavaScript, il est possible d’ajuster le contenu et les fonctionnalités selon le mode d’affichage, afin d’offrir une expérience personnalisée répondant aux besoins des utilisateurs
• Les utilisateurs de PWA et les visiteurs d’un site web classique ont des attentes différentes ; il faut donc optimiser la navigation, les invites d’installation et le contenu selon le mode d’affichage
• L’optimisation par mode d’affichage rend les PWA plus abouties et plus proches d’une app, et constitue une technique importante pour améliorer l’expérience applicative sur le web

---

Modes d’affichage des PWA et nécessité de l’optimisation

• Les PWA sont une technologie qui permet d’implémenter des applications web comme des applications natives ; en sortant du cadre du navigateur, des problèmes d’utilisabilité peuvent apparaître
  • Risque de perdre les fonctions fournies par le navigateur, comme retour arrière, actualisation ou copie de l’URL
  • Des éléments adaptés à un site web peuvent sembler peu naturels dans un environnement applicatif
• Les modes d’affichage configurables dans le fichier manifest sont les suivants
  • fullscreen : masque toute l’interface du navigateur et utilise le plein écran
  • standalone : masque les contrôles du navigateur et donne l’apparence d’une application native
  • minimal-ui : affiche un minimum d’éléments d’interface du navigateur
  • browser : fournit l’interface standard du navigateur
• Lorsque l’interface du navigateur est masquée, cela peut affecter l’expérience utilisateur ; l’optimisation selon chaque mode d’affichage est donc indispensable

Utilisation des media queries de mode d’affichage

• Les media queries permettent d’ajuster styles et fonctionnalités selon le mode d’affichage
  • Exemple : @media (display-mode: standalone) ne s’applique qu’en mode standalone
  • Des requêtes sont prises en charge pour les modes fullscreen, minimal-ui et browser
• Les modes expérimentaux window-controls-overlay et tabbed peuvent être définis dans un ordre personnalisé via display_override
  • window-controls-overlay : affiche les boutons de contrôle de fenêtre en superposition sur desktop
  • tabbed : prend en charge plusieurs environnements applicatifs dans une seule fenêtre
• JavaScript permet de détecter le mode d’affichage et d’ajuster dynamiquement l’interface
  • Exemple : window.matchMedia("(display-mode: standalone)").matches permet de vérifier le mode actuel
  • Il est possible de détecter les changements de mode et d’adapter l’UI dynamiquement

Cas d’usage pratiques

• Contenu personnalisé pour les utilisateurs de PWA : les utilisateurs ayant installé la PWA sont déjà convertis, il faut donc réduire le contenu marketing et se concentrer sur l’expérience utilisateur
  • Masquer les éléments inutiles comme les invites d’installation
• Fournir des options supplémentaires : en l’absence d’interface du navigateur, il faut des alternatives intégrées à l’app comme le réglage de la taille de police, le basculement mode clair/sombre ou le partage
• Fonctionnalités adaptées à la plateforme : une barre de navigation inférieure, courante dans les apps natives mobiles, convient bien à une PWA mais paraît peu naturelle sur un site web
  • Il est approprié de masquer des fonctions comme un bouton d’impression en mode PWA
• Gestion des invites d’installation : éviter qu’une invite d’installation ne s’affiche dans une PWA déjà installée en la contrôlant via media queries ou JavaScript
  • Exemple : masquer des éléments en mode PWA avec une classe utilitaire .hide-in-pwa
• Stratégie de scope et start_url : différencier le contenu entre environnement PWA et web avec scope et start_url
  • scope : définit le chemin racine de la PWA ; en dehors de cette portée, l’interface du navigateur réapparaît
  • start_url : indique la page à afficher au lancement de l’app, par exemple un accès direct au tableau de bord
• Améliorer les transitions de vue : appliquer aux seules PWA des effets de transition entre vues, fréquents dans les apps natives
  • Exemple : définir le CSS de transition de vue à l’intérieur de @media (display-mode: standalone)

Support navigateur et tests

• Les media queries de mode d’affichage bénéficient d’une prise en charge large dans la plupart des navigateurs
  • Firefox ne prend pas en charge les PWA, et Firefox sur Android n’affiche qu’en mode browser
  • Une amélioration progressive permet de garantir une dégradation élégante sur les navigateurs non compatibles
• Les tests doivent être réalisés dans différents environnements, car le comportement varie selon les appareils et les navigateurs
  • Les navigateurs ne fournissent pas de simulation des modes d’affichage ; il faut donc tester sur de vrais appareils et combinaisons d’OS

Résumé et implications

• Les media queries display-mode permettent d’offrir aux PWA une expérience adaptative selon le contexte d’installation et d’affichage
  • Masquage des invites d’installation, prise en charge de la navigation, personnalisation du contenu, renforcement de la sensation native et amélioration progressive possibles
• Les utilisateurs de PWA ont des besoins et attentes différents de ceux des visiteurs web classiques ; des ajustements minutieux selon le mode d’affichage sont donc nécessaires
• À mesure que les PWA gagnent en maturité, une implémentation soignée et l’optimisation deviennent essentielles pour créer une expérience applicative attrayante
• Pour plus d’informations, voir « Extensive Guide To Progressive Web Applications » de Smashing Magazine

[ndrgrd]

Firefox a aussi recommencé à prendre en charge les PWA dans la nightly. Cela sera bientôt ajouté à la version stable.

[draupnir]

Comme il faut l’utiliser via le canal du navigateur… j’ai toujours une préférence pour le natif, mais dès qu’on parle de PWA, je trouve ça toujours intéressant.
On recherche la même optimisation, mais dans une direction différente…