Se préparer aux modes d'affichage de demain

Les PWA peuvent utiliser la propriété "display_override" pour gérer les modes d'affichage spéciaux.

Thomas Steiner

Un fichier manifeste d'application Web est un fichier JSON qui indique au navigateur votre progressive web app et son comportement une fois installée sur l'ordinateur ou l'appareil mobile de l'utilisateur. La propriété display vous permet de personnaliser l'interface utilisateur du navigateur à afficher au lancement de votre application. Par exemple, vous pouvez masquer la barre d'adresse et le chrome du navigateur. Il est même possible de créer des jeux pour qu'ils s'affichent en plein écran. Pour résumer, voici les modes d'affichage spécifiés au moment de la rédaction de cet article.

Propriété Utilisation
fullscreen Ouvre l'application Web sans interface utilisateur de navigateur et occupe la totalité de la zone d'affichage disponible.
standalone Ouvre l'application Web pour qu'elle ressemble à une application autonome. L'application s'exécute dans sa propre fenêtre, distincte du navigateur, et masque les éléments d'interface utilisateur standards du navigateur, tels que la barre d'adresse.
minimal-ui Ce mode est semblable à standalone, mais il fournit à l'utilisateur un ensemble minimal d'éléments d'interface utilisateur pour contrôler la navigation (comme le retour et l'actualisation).
browser Une expérience de navigateur standard.

Ces modes d'affichage suivent une chaîne de remplacement bien définie ("fullscreen" → "standalone" → "minimal-ui" → "browser"). Si un navigateur n'accepte pas un mode donné, il passe au mode d'affichage suivant dans la chaîne.

Caractéristiques de la propriété display

Le problème avec cette approche avec une chaîne de remplacement filaire est triple:

  • Un développeur ne peut pas demander "minimal-ui" sans être obligé de revenir au mode d'affichage "browser" si "minimal-ui" n'est pas compatible avec un navigateur donné.
  • Les développeurs n'ont aucun moyen de gérer les différences entre les navigateurs, par exemple si le navigateur inclut ou exclut un bouton de retour dans la fenêtre du mode "standalone".
  • Le comportement actuel ne permet pas d'introduire de nouveaux modes d'affichage de manière rétrocompatible, car les explorations telles que le mode d'application par onglets n'ont pas de place naturelle dans la chaîne de remplacement.

La propriété display_override

Ces problèmes sont résolus par la propriété display_override, que le navigateur prend en compte avant la propriété display. Sa valeur est une séquence de chaînes considérées dans l'ordre. Le premier mode d'affichage compatible est appliqué. Si aucun champ n'est accepté, le navigateur revient à l'évaluation du champ display.

Dans l'exemple ci-dessous, la chaîne de remplacement du mode d'affichage se présenterait comme suit. (Les détails de "window-controls-overlay" ne sont pas pris en charge pour cet article.)

  1. "window-controls-overlay" (Observez tout d'abord display_override.)
  2. "minimal-ui"
  3. "standalone" (Lorsque la valeur de display_override est épuisée, évaluez display.)
  4. "minimal-ui" (Enfin, utilisez la série de créations de remplacement display.)
  5. "browser"
{
  "display_override": ["window-controls-overlay", "minimal-ui"],
  "display": "standalone",
}

Pour rester rétrocompatible, tout mode d'affichage futur ne sera accepté qu'en tant que valeur display_override, mais pas display. Les navigateurs qui ne sont pas compatibles avec display_override utilisent la propriété display et ignorent display_override en tant que propriété manifeste d'application Web inconnue.

Remerciements

La propriété display_override a été formalisée par Daniel Murphy.