Preparándose para los modos de visualización de mañana

Las AWP pueden usar el parámetro "display_override" para manejar modos de visualización especiales.

El manifiesto de apps web es un archivo JSON que informa al navegador sobre tu App web y cómo debería comportarse cuando se instale en la computadora o el dispositivo móvil del usuario. Mediante la propiedad display, puedes personalizar la IU del navegador que se muestra cuando se inicia la app. Por ejemplo, puedes ocultar el la barra de direcciones y el navegador Chrome. Incluso se pueden crear juegos para que se abran en pantalla completa. Como resumen rápido, a continuación, se muestran los modos de visualización que se especificaron al momento de la redacción de este artículo.

Propiedad Uso
fullscreen Abre la aplicación web sin ninguna IU del navegador y toma para abarcar toda el área de visualización disponible.
standalone Abre la aplicación web para que se vea y se sienta independiente. . La app se ejecuta en su propia ventana, separada del navegador. oculta los elementos estándares de la IU del navegador, como la barra de URL.
minimal-ui Este modo es similar a standalone, pero proporciona la al usuario un conjunto mínimo de elementos de la IU para controlar la navegación (como como volver y volver a cargar).
browser Una experiencia de navegador estándar

Estos modos de visualización siguen una cadena de resguardo bien definida ("fullscreen""standalone""minimal-ui""browser"). Si un navegador no admite un determinado recurre al siguiente modo de visualización de la cadena.

Deficiencias de la propiedad display

El problema con este enfoque de cadena de resguardo por cable es triple:

  • Un desarrollador no puede solicitar "minimal-ui" sin que se lo obligue a volver al modo de visualización "browser", en caso de que "minimal-ui" no sea compatible con un navegador determinado.
  • Los desarrolladores no tienen forma de manejar las diferencias entre navegadores, por ejemplo, si el navegador incluye o excluye un botón Atrás en la ventana para el modo "standalone".
  • El comportamiento actual imposibilita la presentación de nuevos anuncios gráficos. de forma retrocompatible, ya que las exploraciones como el modo de aplicación con pestañas no tienen un en su lugar natural en la cadena de resguardo.

La propiedad display_override

Estos problemas se resuelven con la propiedad display_override, que el navegador considera antes. la propiedad display. Su valor es una secuencia de cadenas que se consideran en orden, y la se aplicará el primer modo de visualización admitido. Si no se admite ninguno, el navegador vuelve a evaluar el campo display

En el siguiente ejemplo, la cadena de resguardo del modo de visualización sería la siguiente. (Los detalles de "window-controls-overlay" están fuera del alcance de este artículo).

  1. "window-controls-overlay" (Primero, mira display_override).
  2. "minimal-ui"
  3. "standalone" (Cuando se agote display_override, evalúa display).
  4. "minimal-ui" (Por último, usa la cadena de resguardo display).
  5. "browser"
{
  "display_override": ["window-controls-overlay", "minimal-ui"],
  "display": "standalone",
}

Para mantener la retrocompatibilidad, cualquier modo de visualización futuro solo se aceptará como un valor de display_override, pero no display. Los navegadores que no admiten display_override recurren a la propiedad display y la ignoran display_override como una propiedad desconocida del manifiesto de la app web.

Agradecimientos

La propiedad display_override se formalizó Daniel Murphy.