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

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

Tomás Steiner

Un manifiesto de aplicación 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 escritorio o dispositivo móvil del usuario. Con la propiedad display, puedes personalizar la IU del navegador que se muestra cuando se inicia tu app. Por ejemplo, puedes ocultar la barra de direcciones y el navegador Chrome. Incluso se pueden crear juegos para que se inicien en pantalla completa. A modo de resumen, a continuación se indican los modos de visualización que se especifican en el momento en que se redactó este artículo.

Propiedad Uso
fullscreen Abre la aplicación web sin ninguna IU del navegador y ocupa toda el área de visualización disponible.
standalone Abre la app web de modo que se vea como una app independiente. La app se ejecuta en su propia ventana, separada del navegador, y oculta los elementos estándar de la IU 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 ir 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.

Deficiencias de la propiedad display

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

  • Un desarrollador no puede solicitar "minimal-ui" sin volver a forzar el modo de visualización "browser" en caso de que un navegador determinado no admita "minimal-ui".
  • Los desarrolladores no tienen forma de manejar las diferencias entre navegadores, como si el navegador incluye o excluye un botón Atrás en la ventana para el modo "standalone".
  • El comportamiento actual hace que sea imposible ingresar nuevos modos de visualización de una 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

Estos problemas se resuelven con la propiedad display_override, que el navegador considera antes de la propiedad display. Su valor es una secuencia de strings que se consideran en orden y se aplica 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, 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 compatibilidad con versiones anteriores, cualquier modo de visualización futuro solo será aceptable como un valor de display_override, pero no de display. Los navegadores que no admiten display_override recurren a la propiedad display e ignoran display_override como una propiedad desconocida del manifiesto de la aplicación web.

Reconocimientos

Daniel Murphy formalizó la propiedad display_override.