Conception d'applications

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

La fenêtre

Chaque système d'exploitation a une idée différente de la fenêtre d'une application. Par exemple, sur un iPhone, une application occupe toujours 100% de l'écran. Sur les appareils Android et les iPad, les applications s'exécutent généralement en plein écran, mais il est possible de partager l'écran entre deux applications. Cependant, une seule instance d'application est ouverte à la fois. En revanche, sur un ordinateur, plusieurs instances d'une application peuvent être ouvertes à la fois. Il partage l'espace disponible sur l'écran avec toutes les autres applications ouvertes. Chaque instance d'application peut être redimensionnée et positionnée n'importe où sur l'écran, même s'il se superpose à d'autres applications.

L'icône

Nous reconnaissons les applications grâce à leur icône. Cette icône apparaît lorsque vous recherchez des applications, dans les paramètres, partout où vous lancez des applications et là 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 d'application" (Windows, ChromeOS, Linux)
• Panneau " Dock", "Barre des tâches" ou "Multitâche" (tous les systèmes d'exploitation).

Lorsque vous créez l'icône de votre progressive web app assurez-vous que son icône 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.

Appliquer un thème à votre application

Vous pouvez personnaliser le style d'une application dans vos PWA de plusieurs façons:

• Couleur du thème: définit la couleur de la barre de titre de la fenêtre sur le bureau et celle de la barre d'état sur les appareils mobiles. Une balise Meta vous permet de disposer d'options pour différents schémas (mode sombre ou clair, par exemple). Celles-ci seront utilisées 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 code CSS.
• Couleur d'accentuation: définit la couleur des composants intégrés du navigateur tels que les commandes de formulaire.

<ph type="x-smartling-placeholder">

</ph>

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

Remarque : Lorsque vous planifiez l'interface utilisateur de votre progressive web app, méfiez-vous que vous ne pouvez pas utiliser d'images ou de dégradés pour votre thème, mais uniquement des couleurs unies. 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 si vous ne l'installez pas, par exemple lorsque vous utilisez l'élément <meta name="theme-color">.

Modes d'affichage

Vous pouvez définir le type de fenêtre que vous souhaitez pour votre progressive web app. Vous avez le choix entre trois options:

• Plein écran
• Autonome
• Interface utilisateur minimale

Remarque : Si un mode d'affichage spécifique n'est pas compatible ou ne peut pas être utilisé pour afficher votre PWA, le mode d'affichage suivant est activé. Le mode plein écran reviendra à la version autonome, l'interface autonome à l'interface utilisateur minimale, tandis que l'interface utilisateur minimale reviendra à l'interface par défaut du navigateur. Le mode d'affichage du navigateur n'apparaît pas dans sa propre fenêtre. Il affiche votre PWA dans un onglet du navigateur à partir duquel elle a été installée, à la manière d'un favori Web sur un écran d'accueil.

Expérience en plein écran

Le mode plein écran est adapté aux expériences immersives telles que les jeux, la RV ou la RA. Elle n'est actuellement disponible que sur les appareils Android et masque la barre d'état et la barre de navigation. Votre PWA occupe donc 100% de l'écran pour votre contenu.

Les PWA plein écran ne sont pas compatibles avec les ordinateurs de bureau et iPadOS. 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

Il s'agit de l'option la plus courante pour les progressive web apps. Le mode autonome affiche votre PWA dans une fenêtre standard du système d'exploitation, sans interface utilisateur de navigation. La fenêtre peut également inclure un menu contrôlé par le navigateur dans lequel l'utilisateur peut:

• Copiez l'URL actuelle.
• Voir, 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 au lieu de l'omnibox ou de la barre d'URL lorsque la PWA s'affiche dans l'onglet.

<ph type="x-smartling-placeholder">

</ph>

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

Sur les appareils mobiles, une PWA autonome crée un écran standard qui garde la barre d'état visible, de sorte que l'utilisateur peut toujours voir les notifications, l'heure et le niveau de batterie. Il n'y a souvent pas de menu contrôlé par un navigateur, contrairement aux expériences autonomes sur ordinateur.

Certains navigateurs sur Android créent une notification fixe et silencieuse lorsque la PWA est exécutée au premier plan, ce qui 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 de bureau. Lorsque vous l'utilisez, le navigateur qui affiche votre PWA affiche une interface utilisateur minimale pour aider l'utilisateur à naviguer dans l'application.

Sur Android, vous obtiendrez une barre de titre qui affiche l'élément <title> actuel et l'origine, ainsi qu'un petit menu déroulant disponible. Sur ordinateur, la barre de titre contient un ensemble de boutons qui facilitent la navigation, y compris un bouton "Retour" et une commande permettant de passer d'une action d'arrêt à une action d'actualisation, en fonction de l'état de chargement actuel.

<ph type="x-smartling-placeholder">

</ph>

<ph type="x-smartling-placeholder">

</ph>

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é en remplacement. L'utilisateur peut ajouter une icône à l'écran d'accueil, mais cette icône pointera vers Safari en tant que favori et il ne pourra pas utiliser l'application en dehors de l'onglet du navigateur.

Optimiser la conception pour les ordinateurs

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

Dans le chapitre 3, nous avons mentionné le mini-mode: une application de bureau peut mesurer jusqu'à 200 x 100 pixels. Le contenu de l'élément <title> de votre code HTML sera utilisé comme titre pour cette fenêtre. Ce contenu s'affiche également lorsque vous utilisez la touche Alt entre les applications et ailleurs.

Faites attention à l'élément <title> de votre code HTML et réfléchissez à la façon dont vous l'utilisez. Le <title> n'est pas réservé au SEO ou n'affiche que les premiers caractères dans un onglet de navigateur. elle fera 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'une route à une autre. Il est temps de réinventer <title> !

Bonnes pratiques CSS

Tout ce que vous pouvez faire avec la mise en page, la conception et l'animation CSS est valable lorsque votre contenu s'affiche de façon autonome. Cependant, voici quelques conseils et astuces pour améliorer l'expérience sur une fenêtre indépendante.

Rappelez-vous que le CSS définit uniquement les styles du contenu de la PWA. Dans la suite de ce cours, nous verrons comment spécifier des déclarations de style pour la fenêtre autour de votre contenu, telles que les propriétés du fichier manifeste d'application Web.

Requêtes média

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

Cette requête média applique différents styles à chaque mode. Par exemple, vous pouvez afficher une invitation d'installation uniquement en mode navigateur ou afficher une information spécifique uniquement lorsque l'utilisateur utilise votre application à partir de l'icône système. Par exemple, vous pouvez 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. Par conséquent, pensez à proposer les modes sombre et clair à l'aide de prefers-colors-scheme et à accepter prefers-reduced-motion les requêtes média 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 sa signification, le comportement Web par défaut n'offre pas une expérience optimale dans certaines situations.

Sélection de l'utilisateur

Le contenu peut généralement être sélectionné à l'aide d'une souris ou d'un pointeur, ou d'un geste d'appui prolongé. Bien qu'utiles pour le contenu, il n'offre pas une expérience optimale pour les éléments de navigation, les menus et les boutons de votre PWA.

Par conséquent, il est recommandé de désactiver la sélection de l'utilisateur sur ces éléments à l'aide de user-select: none et de sa version de préfixe -webkit-:

.unselectable {
   user-select: none;
}

La sélection des utilisateurs est une fonctionnalité essentielle de toute application Web en termes de facilité d'utilisation et d'accessibilité. Ne désactivez pas la sélection de l'utilisateur pour tout le contenu, mais uniquement pour les éléments de l'interface utilisateur si cela nuit à l'expérience utilisateur.

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 système

Si vous souhaitez qu'un élément, tel que des boîtes de dialogue ou des messages, corresponde à la police par défaut de la plate-forme 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 récents, 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é sur les PWA autonomes.

Vous pouvez désactiver cette action. Par exemple, lorsque vous proposez votre propre action de gestion des gestes ou d'actualisation, ou s'il est possible que votre utilisateur déclenche l'action de manière involontaire.

Il est possible de désactiver ce comportement en utilisant overscroll-behavior-y: contain :

  body {
    overscroll-behavior-y: contain;
  }

Zones sûres

Certains appareils n'ont pas d'écran rectangulaire non obstrué. Il se peut que leur écran ait une autre forme, comme un cercle, ou que certaines parties de l'écran ne soient pas utilisables, comme l'encoche de l'iPhone 13. Dans ce cas, certains navigateurs affichent des variables d'environnement avec des zones de sécurité pouvant afficher le contenu.

Si vous souhaitez disposer d'un accès complet à l'écran, même à 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 en toute sécurité dans ces zones.

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

Ressources

• Requête média CSS en mode display
• Prenez le contrôle de votre défilement: personnalisez les effets "Tirez pour actualiser" et "Dépassement"
• prefers-color-scheme: Salut les ténèbres, mon vieil ami
• prefers-reduced-motion: parfois, moins il y a de mouvement, plus
• Fonction CSS env()
• Couleur d'accentuation CSS