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

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

Thomas Steiner

Un manifiesto de la app web es un archivo JSON que le indica al navegador sobre tu app web progresiva y cómo debe comportarse cuando se instala en la computadora o el dispositivo móvil del usuario. A través de 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 diseño de Chrome. Incluso se pueden crear juegos para que se inicien en pantalla completa. A modo de resumen, a continuación, se incluyen los modos de visualización que se especificaron 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 toda 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 estándar de la IU del navegador, como la barra de URL.
minimal-ui Este modo es similar a standalone, pero proporciona al usuario un conjunto mínimo de elementos de 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.

Deficiencias de la propiedad display

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

  • Un desarrollador no puede solicitar "minimal-ui" sin verse obligado 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 controlar 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 introducción de nuevos modos de visualización de forma 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 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 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 agota 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 se aceptará como 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 desconocida del manifiesto de la app web.

Reconocimientos

La propiedad display_override fue formalizada por Daniel Murphy.