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

Las AWP pueden usar la propiedad "display_override" para controlar los modos de visualización especiales.

Thomas Steiner

Un manifiesto de app web es un archivo JSON que le informa al navegador sobre tu app web progresiva y cómo debe comportarse cuando se instala en el dispositivo de escritorio o móvil del usuario. A través de la propiedad display, puedes personalizar la IU del navegador que se muestra cuando se inicia la app. Por ejemplo, puedes ocultar la barra de direcciones y el borde del navegador. Incluso se pueden configurar los juegos para que se inicien en pantalla completa. A modo de resumen, a continuación, se muestran los modos de visualización que se especifican en el momento en que se escribió este artículo.

Propiedad Uso
fullscreen Abre la aplicación web sin ninguna IU del navegador y ocupa todo el área de visualización disponible.
standalone Abre la app web para que se vea y se sienta como una app independiente. La app se ejecuta en su propia ventana, separada del navegador, y oculta los elementos de la IU estándar del navegador, como la barra de URL.
minimal-ui Este modo es similar a standalone, pero le proporciona al usuario un conjunto mínimo de elementos de la IU para controlar la navegación (como Atrás 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 modo determinado, recurre al siguiente modo de visualización de la cadena.

Desventajas de la propiedad display

El problema con este enfoque de cadena de resguardo con cable fijo 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 un navegador determinado no admita "minimal-ui".
  • Los desarrolladores no tienen forma de controlar las diferencias entre navegadores, como si el navegador incluye o excluye un botón Atrás en la ventana del modo "standalone".
  • El comportamiento actual hace imposible presentar nuevos modos de visualización de manera retrocompatible, ya que las exploraciones como el modo de aplicación con pestañas no tienen un lugar natural en la cadena de resguardo.

La propiedad display_override

La propiedad display_override resuelve estos problemas, que el navegador considera antes que la propiedad display. Su valor es una secuencia de cadenas que se consideran en orden, y se aplica el primer modo de visualización compatible. 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, consulta 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 de display. Los navegadores que no admiten display_override recurren a la propiedad display y omiten display_override como una propiedad de manifiesto de app web desconocida.

Agradecimientos

Daniel Murphy formalizó la propiedad display_override.