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 manifeste d'application Web est un fichier JSON qui informe le navigateur sur votre application Web progressive et sur son comportement lorsqu'elle est installée sur l'ordinateur ou l'appareil mobile de l'utilisateur. Grâce à la propriété display, vous pouvez personnaliser l'interface utilisateur du navigateur qui s'affiche lorsque votre application est lancée. Par exemple, vous pouvez masquer la barre d'adresse et le chrome du navigateur. Les jeux peuvent même être lancés en plein écran. Pour récapituler, 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 aucune interface utilisateur de navigateur et occupe toute la zone d'affichage disponible.
standalone Ouvre l'application Web pour qu'elle ressemble à une application autonome app. L'application s'exécute dans sa propre fenêtre, distincte du navigateur, et masque les éléments d'interface utilisateur standard du navigateur, comme la barre d'URL.
minimal-ui Ce mode est semblable à standalone, mais fournit à l'utilisateur un ensemble minimal d'éléments d'interface utilisateur pour contrôler la navigation (comme les boutons "Retour" et "Actualiser").
browser Expérience de navigateur standard.

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

Limites de la propriété display

Cette approche de chaîne de secours câblée présente trois inconvénients :

  • Un développeur ne peut pas demander "minimal-ui" sans être forcé 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 "Retour" dans la fenêtre du mode "standalone".
  • Le comportement actuel empêche l'introduction de nouveaux modes d'affichage de manière rétrocompatible, car les explorations telles que le mode d'application à onglets n'ont pas de place naturelle dans la chaîne de secours.

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 qui sont prises en compte dans l'ordre, et le premier mode d'affichage compatible est appliqué. Si aucun n'est compatible, le navigateur revient à l'évaluation du champ display.

Dans l'exemple ci-dessous, la chaîne de secours du mode d'affichage serait la suivante. (Les détails de "window-controls-overlay" ne sont pas abordés dans cet article.)

  1. "window-controls-overlay" (Tout d'abord, examinez display_override.)
  2. "minimal-ui"
  3. "standalone" (Lorsque display_override est épuisé, évaluez display.)
  4. "minimal-ui" (Enfin, utilisez la chaîne de secours display.)
  5. "browser"
{
  "display_override": ["window-controls-overlay", "minimal-ui"],
  "display": "standalone",
}

Pour rester rétrocompatible, tout futur mode d'affichage ne sera acceptable que comme valeur de display_override, mais pas display. Les navigateurs qui ne sont pas compatibles avec display_override reviennent à la propriété display et ignorent display_override en tant que propriété inconnue du fichier manifeste de l'application Web.

Remerciements

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