Conception d'applications

Ce chapitre se concentre sur certains aspects essentiels de l'affichage du contenu en dehors de l'onglet du navigateur.

La fenêtre

Les différents systèmes d'exploitation ont des idées différentes de ce qu'est une fenêtre d'application. Par exemple, sur les iPhone, une application occupe toujours 100% de l'écran. Sur Android et sur les iPad, les applications s'exécutent généralement en plein écran, mais il est possible de partager l'écran entre deux applications. Toutefois, une seule instance d'application est ouverte à la fois. En revanche, sur un ordinateur, une application peut avoir plusieurs instances ouvertes à la fois. Elle partage l'espace disponible à l'écran avec toutes les autres applications ouvertes. Chaque instance d'application peut être redimensionnée et placée n'importe où sur l'écran, même en chevauchant d'autres applications.

L'icône

Nous reconnaissons les applications à leur icône. Cette icône s'affiche lorsque vous recherchez des applications, dans les paramètres, partout où vous lancez des applications et où vous voyez des applications en cours d'exécution.

Exemples :

• Écran d'accueil (iOS, iPadOS, Android)
• Lanceur d'applications (macOS, Android)
• Menu Démarrer ou menu des applications (Windows, ChromeOS, Linux)
• Dock, barre des tâches ou panneaux multitâches (tous les systèmes d'exploitation)

Lorsque vous créez l'icône de votre application Web progressive, assurez-vous qu'elle est indépendante de la plate-forme, car chaque système d'exploitation peut afficher des icônes et leur appliquer différents masques de forme, comme ceux de l'image ci-dessous.

Thématiser votre application

Vous pouvez personnaliser le style de l'application de vos PWA de différentes manières, par exemple:

• Couleur du thème: définit la couleur de la barre de titre de la fenêtre sur l'ordinateur et la couleur de la barre d'état sur les appareils mobiles. Grâce à une balise Meta, vous pouvez proposer différents schémas, tels que le mode sombre ou clair, qui seront utilisés en fonction des préférences de l'utilisateur.
• Couleur d'arrière-plan: définit la couleur de la fenêtre avant le chargement de l'application et de son CSS.
• Couleur d'accentuation: définit la couleur des composants du navigateur intégrés, tels que les commandes de formulaire.

Une PWA pour ordinateur de bureau affichant le thème et les couleurs d'accentuation, et un écran de démarrage d'une PWA Android affichant le thème et les couleurs d'arrière-plan.

Remarque : Lorsque vous planifiez l'interface utilisateur de votre application Web progressive, n'oubliez pas que vous ne pouvez pas utiliser d'images ni de dégradés pour votre thème, mais uniquement des couleurs. Il est préférable de choisir des couleurs sans transparence et d'utiliser les couleurs rgb ou hsl, les codes hexadécimaux ou les couleurs nommées. La thématisation de votre application peut également affecter la thématisation du navigateur, même sans installer l'application, par exemple lorsque vous utilisez l'élément <meta name="theme-color">.

Modes d'affichage

Vous pouvez définir le type d'expérience de fenêtre que vous souhaitez pour votre progressive web app. Trois options s'offrent à vous:

• Plein écran
• Autonome
• Interface utilisateur minimale

Vous pouvez également utiliser la zone de la barre de titre à côté des commandes de fenêtre pour donner à votre PWA l'apparence d'une application avec le mode d'affichage avancé appelé "Superposition des commandes de fenêtre". Consultez Personnaliser la superposition des commandes de fenêtre de la barre de titre de votre PWA.

Remarque : Si un mode d'affichage particulier n'est pas compatible ou ne peut pas être utilisé pour afficher votre PWA, le mode d'affichage suivant disponible est utilisé. Le mode plein écran sera remplacé par le mode autonome, le mode autonome par l'interface utilisateur minimale, et l'interface utilisateur minimale par le navigateur, qui est l'option par défaut. Vous pouvez utiliser le champ display_override pour spécifier votre propre chaîne de remplacement du mode d'affichage qui s'appliquera avant d'évaluer le membre display. Le mode d'affichage du navigateur ne s'affiche pas dans une fenêtre distincte, mais dans un onglet du navigateur à partir duquel il a été installé, comme un favori Web sur un écran d'accueil.

Expérience en plein écran

Une expérience en plein écran convient aux expériences immersives, comme les jeux, la RV ou la RA. Pour le moment, elle n'est disponible que sur les appareils Android. Elle masque la barre d'état et la barre de navigation, ce qui permet à votre PWA d'utiliser 100% de l'écran pour votre contenu.

Sur ordinateur et iPadOS, les PWA en plein écran ne sont pas compatibles. Toutefois, vous pouvez utiliser l'API Fullscreen depuis votre PWA pour afficher votre application en plein écran à la demande de l'utilisateur.

Expérience autonome

Option la plus courante pour une progressive web app (PWA), le mode autonome affiche votre PWA dans une fenêtre standard de l'OS sans interface utilisateur de navigation dans le navigateur. La fenêtre peut également inclure un menu contrôlé par le navigateur dans lequel l'utilisateur peut:

• Copiez l'URL actuelle.
• Afficher, appliquer ou désactiver des extensions de navigateur
• Afficher et modifier les autorisations
• Vérifiez l'origine actuelle et le certificat SSL.

La barre de titre peut également afficher les autorisations et l'utilisation du matériel à la place de la barre d'adresse ou de la barre d'URL lorsque la PWA s'affiche dans l'onglet.

Les images ci-dessus montrent comment une PWA s'affiche en mode autonome sur un ordinateur de bureau dans Microsoft Edge et Chrome.

Sur les appareils mobiles, une expérience PWA autonome crée un écran standard qui maintient la barre d'état visible afin que l'utilisateur puisse toujours voir les notifications, l'heure et le niveau de la batterie. Il n'inclut souvent pas de menu contrôlé par le navigateur, comme peuvent le faire les expériences autonomes sur ordinateur.

Certains navigateurs sur Android créent une notification fixe et silencieuse lorsque la PWA est au premier plan. Elle permet à l'utilisateur de copier l'URL actuelle ou d'autres options.

Interface utilisateur minimale

Ce mode est disponible pour les progressive web apps sur les systèmes d'exploitation Android et pour ordinateur. Lorsque vous l'utilisez, le navigateur qui effectue le rendu de votre PWA affiche une interface utilisateur minimale pour aider l'utilisateur à naviguer dans l'application.

Sur Android, une barre de titre affiche l'élément <title> actuel et l'origine, avec un petit menu déroulant disponible. Sur ordinateur, un ensemble de boutons s'affiche dans la barre de titre pour faciliter la navigation. Il comprend un bouton "Retour" et une commande qui permet de basculer entre une action d'arrêt et une action de recharge, en fonction de l'état de chargement actuel.

Avertissement : Safari sur iOS et iPadOS n'est pas compatible avec le mode UI minimal pour les PWA. À la place, un raccourci de navigateur est utilisé comme solution de secours. L'utilisateur peut ajouter une icône à l'écran d'accueil, mais cette icône renverra vers Safari en tant que favori. L'utilisateur n'aura donc pas accès à l'application en dehors de l'onglet du navigateur.

Optimiser la conception pour ordinateur

Lorsque vous concevez une progressive web app pour qu'elle fonctionne sur un ordinateur de bureau, vous devez réfléchir aux possibilités infinies de taille de fenêtre par rapport à l'onglet du navigateur ou à une application dans un système d'exploitation mobile.

Dans le chapitre 3, nous avons mentionné le mode mini: une application de bureau peut être aussi petite que 200 x 100 pixels. Cette fenêtre utilisera le contenu de l'élément <title> dans votre code HTML comme titre de la fenêtre. Ce contenu est également affiché lorsque vous passez d'une application à une autre avec la touche Alt.

Prêtez attention à l'élément <title> de votre code HTML et repensez votre utilisation. <title> n'est pas uniquement destiné au référencement ni à l'affichage des premiers caractères dans l'onglet d'un navigateur. Il fait partie de l'expérience utilisateur de votre fenêtre de bureau autonome.

Remarque : Si vous développez votre application à l'aide d'une bibliothèque côté client, telle que React ou Vue, n'oubliez pas de remplacer <title> par une valeur pratique lorsque vous passez d'une section ou d'un parcours à un autre de votre application. Il est temps de repenser <title> !

Bonnes pratiques CSS

Toute votre expérience de la mise en page, de la conception et de l'animation CSS est valable lorsque votre contenu est affiché dans son expérience autonome. Toutefois, voici quelques conseils pour améliorer l'expérience dans une fenêtre autonome.

N'oubliez pas que le CSS ne définit que les styles du contenu de la PWA. Plus tard dans ce cours, nous verrons comment spécifier des déclarations de style pour la fenêtre autour de votre contenu, comme les propriétés du fichier manifeste d'application Web.

Requêtes multimédias

La première requête multimédia que vous pouvez utiliser dans votre PWA est la propriété display-mode, qui accepte les valeurs browser, standalone, minimal-ui ou fullscreen.

Cette requête multimédia applique des styles différents à chaque mode. Par exemple, vous pouvez n'afficher une invitation à installer que lorsque vous êtes en mode navigateur, ou n'afficher une information particulière que lorsque l'utilisateur utilise votre application à partir de l'icône du système. Vous pouvez par exemple ajouter un bouton Retour à utiliser lorsque votre application se lance en mode autonome.

/* It targets only the app used within the browser */
@media (display-mode: browser) {
}
/* It targets only the app used with a system icon in standalone mode */
@media (display-mode: standalone) {
}
/* It targets only the app used with a system icon in all mode */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
}

Remarque : Les utilisateurs s'attendent à ce que les applications s'intègrent à la plate-forme. Pensez donc à proposer des modes sombre et clair à l'aide de prefers-colors-scheme et à respecter les requêtes multimédias prefers-reduced-motion pour désactiver ou réduire les transitions et les animations.

Expérience dans l'application

Lorsque les utilisateurs utilisent une PWA installée, ils s'attendent à un comportement de l'application. Bien qu'il ne soit pas simple de définir ce que cela signifie, le comportement Web par défaut n'offre pas toujours la meilleure expérience dans certaines situations.

Sélection de l'utilisateur

Le contenu est généralement sélectionnable à l'aide d'une souris ou d'un pointeur, ou par un geste tactile de pression prolongée. Bien qu'il soit utile pour le contenu, il n'offre pas la meilleure expérience pour les éléments de navigation, les menus et les boutons de votre PWA.

Il est donc recommandé de désactiver la sélection de l'utilisateur sur ces éléments à l'aide de user-select: none et de sa version avec préfixe -webkit-:

.unselectable {
   user-select: none;
}

La sélection des utilisateurs est une fonctionnalité essentielle de toute application Web pour l'usabilité et l'accessibilité. Ne désactivez pas la sélection de l'utilisateur pour l'ensemble du contenu, mais uniquement pour les éléments d'interface utilisateur lorsque cela crée une expérience mauvaise ou inattendue.

Couleur d'accentuation

Dans votre PWA, vous pouvez définir une couleur correspondant à votre marque dans les commandes de formulaire HTML à l'aide de la propriété accent-color.

Polices du système

Si vous souhaitez qu'un élément, comme les boîtes de dialogue ou les messages, corresponde à la police de la plate-forme par défaut de l'utilisateur, vous pouvez utiliser la famille de polices suivante:

selector {
  font-family: -apple-system, BlinkMacSystemFont,
    "Segoe UI", system-ui, Roboto, Oxygen-Sans, Ubuntu, Cantarell,
    "Helvetica Neue", sans-serif;
}

Faire glisser pour actualiser

Les navigateurs mobiles modernes, tels que Google Chrome et Safari, disposent d'une fonctionnalité qui actualise la page lorsqu'elle est tirée vers le bas. Dans certains navigateurs, comme Chrome sur Android, ce comportement est également activé pour les PWA autonomes.

Vous pouvez désactiver cette action. Par exemple, lorsque vous fournissez votre propre gestion des gestes ou votre propre action d'actualisation, ou si votre utilisateur risque de déclencher l'action de manière involontaire.

Vous pouvez désactiver ce comportement à l'aide de overscroll-behavior-y: contain:.

  body {
    overscroll-behavior-y: contain;
  }

Zones sécurisées

Certains appareils ne disposent pas d'écrans rectangulaires sans obstruction. Au lieu de cela, leur écran peut avoir une forme différente, comme un cercle, ou comporter des parties inutilisables, comme la encoche de l'iPhone 13. Dans ce cas, certains navigateurs exposent des variables d'environnement avec des zones sécurisées pouvant afficher du contenu.

Si vous souhaitez un accès complet à l'écran, y compris à la zone invisible, pour afficher votre couleur ou votre image, incluez viewport-fit=cover dans le contenu de votre balise <meta name="viewport">. Utilisez ensuite les variables d'environnement safe-area-inset-* pour étendre votre contenu de manière sécurisée dans ces zones.

Attention : Lorsque vous appliquez viewport-fit=cover, n'oubliez pas que vous pouvez désormais afficher des pixels derrière les coins arrondis et les encoches. Vous devez donc toujours utiliser des marges ou des marges intérieures sécurisées pour le contenu essentiel et les éléments interactifs.

Ressources

• Requête multimédia CSS display-mode
• Contrôler le défilement: personnaliser le rafraîchissement par glissement et les effets de débordement
• prefers-color-scheme: Hello darkness, my old friend
• prefers-reduced-motion: parfois, moins de mouvement, c'est mieux
• Fonction CSS env()
• Couleur d'accentuation CSS
• Superposition des commandes de fenêtre