Conception d'applications

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

La fenêtre

Chaque système d'exploitation a des idées différentes sur ce qu'est une fenêtre d'application. Par exemple, sur l'iPhone, une application occupe toujours la totalité de l'écran. Sur Android et sur 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 de bureau, plusieurs instances d'une application peuvent être ouvertes en même temps. Il partage l'espace disponible à 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 en chevauchant d'autres applications.

L'icône

Nous reconnaissons les applications grâce à leur icône. Cette icône s'affiche lorsque vous recherchez des applications, dans les paramètres, quel que soit l'appareil sur lequel vous lancez des applications et où vous voyez les applications en cours d'exécution.

par exemple :

• Écran d'accueil (iOS, iPadOS, Android)
• Lanceur d'applications (macOS, Android)
• Menu Démarrer ou Menu d'application (Windows, ChromeOS, Linux)
• Panneaux station d'accueil, 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 qu'elle est compatible avec toutes les plates-formes, car chaque système d'exploitation peut afficher des icônes et leur appliquer des masques de forme différents, comme ceux illustrés ci-dessous.

Appliquer un thème à votre application

Vous pouvez personnaliser le style de vos PWA de plusieurs façons, par exemple:

• 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. Avec une balise Meta, vous avez le choix entre différents schémas, tels que le mode sombre ou le mode clair. Ils seront utilisés en fonction des préférences de l'utilisateur.
• Couleur de l'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.

Une PWA pour ordinateur affichant les couleurs de thème et d'accentuation, ainsi qu'un écran de démarrage de la PWA Android affichant les couleurs du thème et de l'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 ni de dégradés pour votre thème. Vous ne pouvez utiliser que 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 avoir un impact sur 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 alors rétabli. Le mode plein écran revient à la version autonome, la version autonome revient à l'interface utilisateur minimale, et l'interface utilisateur minimale revient au navigateur, par défaut. Le mode d'affichage du navigateur ne s'affiche pas dans sa propre fenêtre, mais affiche votre PWA dans un onglet du navigateur à partir duquel elle a été installée, comme un favori Web sur un écran d'accueil.

Expérience plein écran

Le mode plein écran est adapté aux expériences immersives (jeux, RV ou RA, par exemple). Pour le moment, cette fonctionnalité 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'afficher 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 à partir de 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 de l'OS sans aucune UI 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
• Consulter 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 en remplacement de l'omnibox ou de la barre d'adresse lorsque la PWA s'affiche dans l'onglet.

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

Sur les appareils mobiles, l'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. Bien souvent, elle ne comporte pas de menu contrôlé par le navigateur, contrairement aux expériences sur ordinateur de bureau.

Certains navigateurs sur Android génèrent une notification fixe et silencieuse lorsque la PWA est 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, une barre de titre affiche l'élément <title> actuel et l'origine, avec un petit menu déroulant disponible. Sur ordinateur, la barre de titre comprend un ensemble de boutons qui facilitent la navigation, y compris un bouton "Retour" et une commande qui permet de basculer entre un arrêt et une action de rechargement, en fonction de l'état de chargement actuel.

Avertissement : Sur iOS et iPadOS, Safari n'est pas compatible avec le mode UI minimal pour les PWA. Un raccourci de navigateur est alors utilisé à la place. L'utilisateur peut ajouter une icône à l'écran d'accueil, mais celle-ci pointera vers Safari comme favori et 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 penser aux possibilités infinies en termes de taille de fenêtre par rapport à l'utilisation de l'onglet du navigateur ou à une application dans un système d'exploitation mobile.

Dans le chapitre 3, nous avons mentionné le mini-mode, qui permet de limiter la taille d'une application de bureau à 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 cliquez sur la touche Alt pour passer d'une application à une autre ou ailleurs.

Faites attention à l'élément <title> de votre code HTML et repensez la façon dont vous l'utilisez. L'élément <title> n'est pas seulement destiné au SEO, ni à afficher uniquement les premiers caractères dans l'onglet d'un navigateur. Il fera partie de l'expérience utilisateur de la fenêtre autonome de votre ordinateur.

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 dans votre application. Il est temps de réinventer le <title>.

Bonnes pratiques CSS

Votre expérience concernant la mise en page, la conception et l'animation CSS est valable lorsque votre contenu est affiché dans sa version autonome. Voici cependant quelques conseils et astuces qui vous permettront d'optimiser l'utilisation d'une fenêtre autonome.

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

Requêtes médias

La première requête média dont vous pouvez tirer parti 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 n'afficher une information spécifique que lorsque l'utilisateur se sert de votre application via l'icône système. Cela peut inclure l'ajout d'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, envisagez de proposer des modes sombre et clair à l'aide de prefers-colors-scheme, et de respecter les requêtes média prefers-reduced-motion pour désactiver ou réduire les transitions et les animations.

Expérience dans l'application

Lorsque les utilisateurs se servent d'une PWA installée, ils s'attendent à ce qu'elle se comporte. Bien qu'il ne soit pas simple de le définir, le comportement par défaut sur le Web n'offre pas une expérience optimale dans certaines situations.

Sélection de l'utilisateur

Vous pouvez généralement sélectionner le contenu avec la souris ou le pointeur, ou en appuyant de manière prolongée sur l'écran. Bien qu'utile pour le contenu, il n'offre pas la meilleure expérience possible pour les éléments de navigation, les menus et les boutons de votre PWA.

Par conséquent, nous vous recommandons 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 tous les contenus, mais uniquement pour les éléments de l'interface utilisateur si cela nuit à une expérience médiocre 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 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 modernes, tels que Google Chrome et Safari, disposent d'une fonctionnalité qui actualise la page lorsque l'utilisateur la retire. Dans certains navigateurs, comme Chrome sous Android, ce comportement est également activé sur les PWA autonomes.

Nous vous conseillons de désactiver cette action. Par exemple, lorsque vous fournissez votre propre gestion des gestes ou que vous actualisez la page, ou s'il est possible que l'utilisateur déclenche l'action involontairement.

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é. Au lieu de cela, leur écran peut avoir une forme différente, comme un cercle, ou présenter des parties de l'écran qui ne peuvent pas être utilisées, comme l'encoche de l'iPhone 13. Dans ce cas, certains navigateurs affichent les variables d'environnement avec des zones de sécurité pouvant afficher du contenu.

Si vous souhaitez bénéficier 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é à ces zones.

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

Ressources

• Requête média CSS en mode display
• Prenez le contrôle du défilement: personnalisez les effets d'extraction pour l'actualisation et de dépassement
• prefers-color-scheme: Salut les ténèbres, mon vieil ami
• préfère les mouvements réduits: parfois, moins vous bougez, plus il y a de plus
• Fonction CSS env()
• Couleur d'accentuation CSS