Les PWA peuvent utiliser la commande "display_override" pour gérer les modes d'affichage spéciaux.
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.)
"window-controls-overlay"
(Examinez d'aborddisplay_override
.)"minimal-ui"
"standalone"
(Lorsque la valeur dedisplay_override
est épuisée, évaluezdisplay
.)"minimal-ui"
(Enfin, utilisez la chaîne de remplacementdisplay
.)"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.
Liens utiles
- Vidéo explicative
- Fil de discussion sur l'intention d'expédition
- Bug Chromium
- Informations sur l'état de Chrome
- Dépôt Manifest Incubations
Remerciements
La propriété display_override
a été formalisée par
Daniel Murphy