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 fournit au navigateur des informations sur votre application Web progressive et sur son comportement lorsqu'elle est installée sur l'ordinateur ou l'appareil mobile de l'utilisateur. La propriété display vous permet de personnaliser l'UI du navigateur qui s'affiche au lancement de votre application. 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 rappel, voici les modes d'affichage spécifiés au moment de la rédaction de cet article.

Propriété Utiliser
fullscreen Ouvre l'application Web sans interface utilisateur de navigateur et occupe toute 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 standard du navigateur, comme 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 en arrière et le rechargement).
browser Une expérience de navigation 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 passe 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 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 pris en charge par 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 de place naturelle dans la chaîne de secours.

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 dans l'ordre, et le premier mode d'affichage compatible est appliqué. Si aucune n'est acceptée, 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" (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 rester rétrocompatible, tout futur mode d'affichage ne sera acceptable que comme valeur de display_override, mais pas de 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.