Se préparer aux modes d'affichage de demain

Les PWA peuvent utiliser la commande "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 l'état de vos Application Web et son comportement attendu lorsqu'elle est installée sur l'ordinateur ou l'appareil mobile de l'utilisateur Via la propriété display, vous pouvez personnaliser l'interface utilisateur du navigateur à afficher lorsque votre application est lancée. Par exemple, vous pouvez masquer la barre d'adresse et le navigateur Chrome. Il est même possible de faire des jeux pour qu'ils s'ouvrent en plein écran. Pour rappel, vous trouverez ci-dessous 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 la totalité de la zone d'affichage disponible.
standalone Ouvre l'application Web pour qu'elle ressemble à une application autonome. l'application. L'application s'exécute dans sa propre fenêtre, distincte du navigateur. masque les éléments standard de l'interface utilisateur du navigateur, tels que la barre d'adresse.
minimal-ui Ce mode est semblable à standalone, mais fournit le à l'utilisateur un ensemble minimal d'éléments d'interface utilisateur permettant de contrôler la navigation (par exemple, "Retour" et "Actualiser").
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 ne prend pas en charge un il passe au mode d'affichage suivant dans la chaîne.

Limites de la propriété display

Le problème de cette approche câblée de la chaîne de remplacement est triple:

  • Un développeur ne peut pas demander "minimal-ui" sans être de nouveau obligé de passer en 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 d'un nouvel affichage de manière rétrocompatible, car les explorations comme le mode application à onglets n'ont pas un emplacement naturel 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 dans l'ordre, et la chaîne le premier mode d'affichage compatible est appliqué. Si aucune n'est prise en charge, le navigateur passe à l'évaluation le champ display.

Dans l'exemple ci-dessous, la chaîne de remplacement pour le mode d'affichage se présenterait comme suit. (Les informations sur "window-controls-overlay" ne sont pas incluses dans cet article.)

  1. "window-controls-overlay" (Examinez 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 chaîne 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 acceptable que comme 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