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 informe le navigateur de votre application Web progressive et de son comportement lorsqu'elle est installée sur l'ordinateur ou l'appareil mobile de l'utilisateur. Via la propriété display, vous pouvez personnaliser l'UI du navigateur qui s'affiche lorsque votre application est lancée. Par exemple, vous pouvez masquer la barre d'adresse et le navigateur. Les jeux peuvent même être lancés en plein écran. Pour rappel, 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 l'intégralité 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, 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 la navigation arrière et le rechargement).
browser Une expérience de navigation standard.

Ces modes d'affichage suivent une chaîne de remplacement 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 dans la chaîne.

Inconvénients de la propriété display

Cette approche de chaîne de remplacement câblée présente trois problèmes:

  • 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 pour le mode "standalone".
  • Le comportement actuel rend impossible 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 leur place naturelle dans la chaîne de remplacement.

Propriété display_override

Ces problèmes sont résolus par la propriété display_override, que le navigateur considère avant la propriété display. Sa valeur est une séquence de chaînes considérées comme triées, et le premier mode d'affichage compatible est appliqué. Si aucun n'est compatible, le navigateur évalue le champ display.

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

  1. "window-controls-overlay" (Commencez par consulter display_override.)
  2. "minimal-ui"
  3. "standalone" (Lorsque display_override est épuisé, évaluez display.)
  4. "minimal-ui" (Enfin, utilisez la chaîne de remplacement display.)
  5. "browser"
{
  "display_override": ["window-controls-overlay", "minimal-ui"],
  "display": "standalone",
}

Pour assurer la rétrocompatibilité, tout futur mode d'affichage ne sera accepté que sous la forme d'une 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é de fichier manifeste d'application Web inconnue.

Remerciements

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