Desarrollar experiencias en pantalla completa

Tenemos la capacidad de crear fácilmente sitios web y aplicaciones con modo pantalla completa de inmersiva, pero como cualquier otra cosa en la Web, hay algunas maneras de hacerlo. Esto es especialmente importante ahora que más navegadores admiten una experiencia de "app web instalada" que inicia la pantalla completa.

Cómo obtener pantalla completa para tu app o sitio

Hay varias formas de que un usuario o desarrollador pueda obtener pantalla completa para una app web.

  • Solicítale al navegador el modo de pantalla completa en respuesta al gesto de un usuario.
  • Instala la app en la pantalla principal.
  • Simulación: esconder automáticamente la barra de direcciones.

Solicita al navegador el modo de pantalla completa en respuesta al gesto de un usuario

No todas las plataformas son iguales. Safari de iOS no tiene una API con el modo de pantalla completa, pero Chrome en Android, Firefox y IE 11 y versiones posteriores sí la tienen. La mayoría de las aplicaciones que compilas usarán una combinación de la API de JS y los selectores CSS que proporciona la especificación del modo de pantalla completa. Las principales APIs de JS que debes tener en cuenta cuando compilas una experiencia en pantalla completa son las siguientes:

  • element.requestFullscreen() (actualmente con prefijo en Chrome, Firefox y en IE) muestra el elemento en el modo de pantalla completa.
  • document.exitFullscreen() (actualmente con prefijo en Chrome, Firefox y en IE. En cambio, Firefox usa cancelFullScreen()) cancela el modo de pantalla completa.
  • document.fullscreenElement (actualmente con prefijo en Chrome, Firefox y en IE) muestra verdadero si alguno de los elementos está en modo de pantalla completa.

Cuando tu app tiene el modo de pantalla completa, ya no tienes disponibles los controles de IU del navegador. Esto cambia la forma en que los usuarios interactúan con tu experiencia. No tienen los controles de navegación estándar como Forwards y Backwards; no tienen su ruta de escape que es el botón Refresh. Es importante cubrir esta situación. Puedes usar algunos selectores CSS que te ayuden a cambiar el estilo y la presentación de tu sitio cuando el navegador acceda al modo de pantalla completa.

<button id="goFS">Go fullscreen</button>
<script>
 
var goFS = document.getElementById('goFS');
  goFS
.addEventListener(
   
'click',
   
function () {
      document
.body.requestFullscreen();
   
},
   
false,
 
);
</script>

El ejemplo anterior es un poco forzado; he ocultado toda la complejidad alrededor del uso de los prefijos de proveedores.

El código real es mucho más complejo. Mozilla creó una secuencia de comandos muy útil que puedes usar para activar o desactivar la pantalla completa. Como puedes ver, la situación del prefijo de proveedores es compleja y engorrosa en comparación con la API especificada. Incluso con el siguiente código que es un poco más simple, es complejo.

function toggleFullScreen() {
 
var doc = window.document;
 
var docEl = doc.documentElement;

 
var requestFullScreen =
    docEl
.requestFullscreen ||
    docEl
.mozRequestFullScreen ||
    docEl
.webkitRequestFullScreen ||
    docEl
.msRequestFullscreen;
 
var cancelFullScreen =
    doc
.exitFullscreen ||
    doc
.mozCancelFullScreen ||
    doc
.webkitExitFullscreen ||
    doc
.msExitFullscreen;

 
if (
   
!doc.fullscreenElement &&
   
!doc.mozFullScreenElement &&
   
!doc.webkitFullscreenElement &&
   
!doc.msFullscreenElement
 
) {
    requestFullScreen
.call(docEl);
 
} else {
    cancelFullScreen
.call(doc);
 
}
}

Nosotros, los desarrolladores web, odiamos la complejidad. Una buena API abstracta de alto nivel que puedes usar es el módulo Screenfull.js de Sindre Sorhus, que unifica las dos APIs de JS y los prefijos de proveedores ligeramente diferentes en una API coherente.

Sugerencias para la API de Fullscreen

Cómo activar el modo de pantalla completa del documento
Pantalla completa en el elemento de cuerpo
Figura 1: Pantalla completa en el elemento de cuerpo.

Es natural pensar que tomas el modo de pantalla completa del elemento de cuerpo, pero si estás en un motor de renderizado basado en WebKit o Blink, verás que tiene un efecto raro de reducir el ancho del cuerpo hasta el tamaño más pequeño posible que contendrá todo el contenido. (Mozilla Gecko está bien).

Pantalla completa en el elemento del documento
Figura 2: Pantalla completa en el elemento del documento.

Para solucionar esto, usa el elemento de documento en lugar del elemento de cuerpo:

document.documentElement.requestFullscreen();
Cómo activar el modo de pantalla completa de un elemento de video

La activación del modo de pantalla completa de un elemento de video es exactamente igual a la activación de cualquier otro elemento. Llamas al método requestFullscreen en el elemento de video.

<video id="videoElement"></video>
<button id="goFS">Go Fullscreen</button>
<script>
 
var goFS = document.getElementById('goFS');
  goFS
.addEventListener(
   
'click',
   
function () {
     
var videoElement = document.getElementById('videoElement');
      videoElement
.requestFullscreen();
   
},
   
false,
 
);
</script>

Si tu elemento <video> no tiene el atributo de controles definido, no hay modo de que el usuario controle el video una vez que estén en pantalla completa. La forma recomendada de hacerlo es tener un contenedor básico que encapsule el video y los controles que quieres que vea el usuario.

<div id="container">
 
<video></video>
 
<div>
   
<button>Play</button>
   
<button>Stop</button>
   
<button id="goFS">Go fullscreen</button>
 
</div>
</div>
<script>
 
var goFS = document.getElementById('goFS');
  goFS
.addEventListener(
   
'click',
   
function () {
     
var container = document.getElementById('container');
      container
.requestFullscreen();
   
},
   
false,
 
);
</script>

Esto te otorga más flexibilidad porque puedes combinar el objeto contenedor con el pseudo selector CSS (por ejemplo, para ocultar el botón “goFS”).

<style>
 
#goFS:-webkit-full-screen #goFS {
   
display: none;
 
}
 
#goFS:-moz-full-screen #goFS {
   
display: none;
 
}
 
#goFS:-ms-fullscreen #goFS {
   
display: none;
 
}
 
#goFS:fullscreen #goFS {
   
display: none;
 
}
</style>

Con el uso de estos patrones, puedes detectar cuando se ejecuta la pantalla completa y puedes adaptar tu interfaz de usuario de un modo apropiado, por ejemplo:

  • Proporciona un vínculo de regreso a la página de inicio
  • Proporciona un mecanismo para cerrar diálogos o ir hacia atrás

Cómo iniciar el modo de pantalla completa de una página desde la pantalla principal

No es posible iniciar una página web de pantalla completa cuando el usuario navega a ella. Los proveedores de navegadores saben muy bien que una experiencia de pantalla completa en cada carga de página es un gran inconveniente, por lo que se requiere un gesto del usuario para ingresar al modo de pantalla completa. Sin embargo, los proveedores permiten que los usuarios "instalen" apps, y el acto de instalar es una señal para el sistema operativo de que el usuario quiere iniciar una app en la plataforma.

En las principales plataformas móviles, es bastante sencillo implementar el uso de metaetiquetas o archivos manifiesto de la siguiente manera.

iOS

Desde el lanzamiento del iPhone, los usuarios han podido instalar las apps web en la pantalla principal y las han lanzado como apps web de pantalla completa.

<meta name="apple-mobile-web-app-capable" content="yes" />

Si el contenido está configurado en sí, la app web se ejecuta en el modo de pantalla completa; de lo contrario, no lo hace. El comportamiento predeterminado es usar Safari para mostrar contenido web. Puedes determinar si una página web se muestra en el modo de pantalla completa con la propiedad booleana de solo lectura de JavaScript window.navigator.standalone.

Apple

Chrome para Android

El equipo de Chrome implementó recientemente una función que le indica al navegador que inicie la página en pantalla completa cuando el usuario la haya agregado a la pantalla principal. Es similar al modelo de Safari para iOS.

<meta name="mobile-web-app-capable" content="yes" />

Puedes configurar tu app web para que agregue un ícono de acceso directo a una app en la pantalla principal de un dispositivo y para que inicie la app en el "modo app" en pantalla completa usando el elemento del menú "Agregar a la pantalla principal" de Chrome para Android.

Google Chrome

Una mejor opción es usar el manifiesto de apps web.

Manifiesto de apps web (Chrome, Opera, Firefox, Samsung)

El manifiesto de aplicaciones web es un archivo JSON simple que te permite, como desarrollador, controlar cómo se muestra tu app al usuario en las áreas en las que esperaría ver apps (por ejemplo, la pantalla principal de un dispositivo móvil), dirigir lo que el usuario puede iniciar y, lo que es más importante, cómo puede hacerlo. En el futuro, el manifiesto te permitirá tener incluso más control sobre tu app, pero ahora solo nos centramos en cómo se puede iniciar tu app. En particular, haz lo siguiente:

  1. Cómo informar al navegador sobre tu manifiesto
  2. Cómo describir el lanzamiento

Una vez que hayas creado el manifiesto y que esté alojado en tu sitio, deberás agregar una etiqueta de vínculo en todas las páginas en las que se muestra tu app, tal como se explica a continuación:

<link rel="manifest" href="/manifest.json" />

Chrome admite manifiestos desde la versión 38 para Android (octubre de 2014) y te permite controlar cómo aparece tu app web cuando se instala en la pantalla principal (a través de las propiedades short_name, name y icons) y cómo se debe iniciar cuando el usuario hace clic en el ícono de inicio (a través de start_url, display y orientation).

A continuación, se muestra un ejemplo de manifiesto. No muestra todo lo que puede haber en un manifiesto.

{
 
"short_name": "Kinlan's Amaze App",
 
"name": "Kinlan's Amazing Application ++",
 
"icons": [
   
{
     
"src": "launcher-icon-4x.png",
     
"sizes": "192x192",
     
"type": "image/png"
   
}
 
],
 
"start_url": "/index.html",
 
"display": "standalone",
 
"orientation": "landscape"
}

Esta función es completamente progresiva y te permite generar mejores experiencias y más integradas para usuarios de un navegador que admite la función.

Cuando un usuario agrega tu sitio o app a la pantalla principal, hay una intención por parte del usuario de tratarlo como una app. Esto significa que debes dirigir al usuario a la funcionalidad de tu app en lugar de a una página de destino del producto. Por ejemplo, si se le solicita al usuario que acceda a la app, esa es una buena página para iniciar.

Apps de utilidad

La mayoría de las apps de utilidad aprovecharán esto de inmediato. Para esas apps, querrás que se inicien de modo independiente como el resto de las apps en una plataforma para dispositivos móviles. Para indicarle a una app que se inicie de forma independiente, agrega esto al manifiesto de la app web:

    "display": "standalone"
Videojuegos

La mayoría de los juegos aprovecharán un manifiesto de inmediato. Se querrá iniciar la vasta mayoría de los juegos en pantalla completa y se forzará una orientación específica.

Si estás desarrollando un juego con desplazamiento vertical o como Flappy Birds entonces seguramente querrás que esté siempre en modo de retrato.

    "display": "fullscreen",
   
"orientation": "portrait"

Si, por otro lado, estás creando juegos de rompecabezas o un juego como X-Com, entonces probablemente querrás que el juego siempre use la orientación horizontal.

    "display": "fullscreen",
   
"orientation": "landscape"
Sitios de noticias

En la mayoría de los casos, los sitios de noticias son experiencias basadas en contenido puro. Naturalmente, la mayoría de los desarrolladores no piensan en agregar un manifiesto a un sitio de noticias. El manifiesto te permitirá definir qué iniciar (la portada de tu sitio de noticias) y cómo iniciarlo (pantalla completa o como una pestaña de navegador normal).

La elección depende de ti y de cómo crees que les gustaría a tus usuarios acceder a tu experiencia. Si quieres que tu sitio tenga todas las posibilidades del navegador chrome que pretendes para un sitio, puedes configurar la pantalla en browser.

    "display": "browser"

Si quieres que tu sitio de noticias se sienta como la mayoría de las apps centradas en noticias tratan sus experiencias como apps y quite todos los navegadores chrome similares a la web desde la IU, puedes hacer esto configurando la pantalla en standalone.

    "display": "standalone"

Simulación: esconder automáticamente la barra de direcciones

Puedes "simular la pantalla completa" ocultando automáticamente la barra de direcciones de la siguiente manera:

window.scrollTo(0, 1);

Este es un método bastante simple, la página se carga y se le indica a la barra del navegador que se quite del camino. Lamentablemente, no es estandarizado y no es muy compatible. También tienes que trabajar en varias interpretaciones.

Por ejemplo, los navegadores a menudo restauran la posición en la página cuando el usuario vuelve a ella. El uso de window.scrollTo anula esto, lo que le resulta fastidioso al usuario. Para solucionar esto, tienes que almacenar la última posición en localStorage y abordar los casos extremos (por ejemplo, si el usuario tiene la página abierta en varias ventanas).

Lineamientos de UX

Cuando estás creando un sitio que saca provecho de la pantalla completa, hay un número de cambios de experiencia del usuario potenciales que tienes que tener en cuenta para crear un servicio que tus usuarios amarán.

No dependas de los controles de navegación

iOS no tiene un botón atrás de hardware ni un gesto de actualización. Por lo tanto, debes asegurarte de que los usuarios puedan navegar en toda la app sin bloquearse.

Puedes detectar fácilmente si estás ejecutando en un modo de pantalla completa o en un modo instalado en todas las principales plataformas.

iOS

En iOS, puedes usar el valor booleano navigator.standalone para ver si el usuario inició la app desde la pantalla principal o no.

if (navigator.standalone == true) {
 
// My app is installed and therefore fullscreen
}

Manifiesto de apps web (Chrome, Opera, Samsung)

Cuando se inicia como una app instalada, Chrome no se ejecuta en una experiencia verdadera de pantalla completa, por lo que document.fullscreenElement muestra un valor nulo y los selectores CSS no funcionan.

Cuando el usuario solicita pantalla completa a través de un gesto en tu sitio, las APIs de pantalla completa estándar están disponibles, incluido el pseudo selector CSS que te permite adaptar tu IU para reaccionar ante el estado de pantalla completa de la siguiente manera

selector:-webkit-full-screen {
 
display: block; // displays the element only when in fullscreen
}

selector
{
 
display: none; // hides the element when not in fullscreen mode
}

Si los usuarios inician tu sitio desde la pantalla principal, la consulta de medios display-mode se establecerá en lo que se definió en el manifiesto de la app web. En el caso de la pantalla completa pura, será:

@media (display-mode: fullscreen) {
}

Si el usuario inicia la aplicación en modo independiente, la consulta de medios display-mode será standalone:

@media (display-mode: standalone) {
}

Firefox

Cuando el usuario solicita pantalla completa a través de tu sitio o el usuario inicia la app en el modo de pantalla completa, todas las APIs estándar de pantalla completa están disponibles, incluido el pseudo selector CSS, que te permite adaptar tu IU para reaccionar ante el estado de pantalla completa de la siguiente manera:

selector:-moz-full-screen {
 
display: block; // hides the element when not in fullscreen mode
}

selector
{
 
display: none; // hides the element when not in fullscreen mode
}

Internet Explorer

En IE, la pseudo clase CSS carece de un guión. Sin embargo, por otra parte, funciona de modo similar en Chrome y Firefox.

selector:-ms-fullscreen {
 
display: block;
}

selector
{
 
display: none; // hides the element when not in fullscreen mode
}

Especificación

La ortografía en la especificación coincide con la sintaxis que usa IE.

selector:fullscreen {
 
display: block;
}

selector
{
 
display: none; // hides the element when not in fullscreen mode
}

Mantén al usuario en la experiencia de pantalla completa

A veces, la API de pantalla completa puede ser un poco exhaustiva. Los proveedores del navegador no quieren confinar a los usuarios en una página de pantalla completa de modo que han desarrollado mecanismos para salir de la pantalla completa tan pronto como puedan. Esto significa que no puedes crear un sitio web de pantalla completa que abarque varias páginas porque:

  • Con el cambio de la URL programáticamente usando window.location = "http://example.com" se sale de la pantalla completa.
  • Un usuario que haga clic en un vínculo externo dentro de tu página saldrá de la pantalla completa.
  • Con el cambio de la URL a través de la API de navigator.pushState también se sale de la experiencia de pantalla completa.

Si quieres mantener al usuario en una experiencia de pantalla completa, tienes dos opciones:

  1. Usa los mecanismos de la app web instalable para que activen la pantalla completa.
  2. Administra tu IU y el estado de la app con el fragmento #.

Si usas la sintaxis # para actualizar la URL (window.location = "#somestate") y escuchas el evento window.onhashchange, puedes usar la propia pila de historial del navegador para administrar los cambios en el estado de la aplicación, permitir que el usuario use sus botones de atrás de hardware o ofrecer una experiencia de botón atrás programática simple con la API de History de la siguiente manera:

window.history.go(-1);

Permite que el usuario elija cuando activar la pantalla completa

No hay nada más molesto para el usuario que un sitio web que hace algo inesperado. Cuando un usuario navega hacia tu sitio, no intentes engañarlos para que accedan a la pantalla completa.

No interceptes el primer evento táctil y llama a requestFullscreen().

  1. Es molesto.
  2. Es posible que los navegadores le soliciten al usuario en algún momento en el futuro que permita que la app ocupe la pantalla completa.

Si quieres iniciar la pantalla completa de las apps, piensa en el uso de las experiencias de instalación para cada plataforma.

No le envíes correo no deseado al usuario para que instale tu app en una pantalla principal

Si planeas ofrecer una experiencia de pantalla completa a través de los mecanismos de la app instalada, ten en cuenta al usuario.

  • Sé discreto. Usa un banner o un pie de página para informarles que pueden instalar la app.
  • Si descartan la solicitud, no la muestres nuevamente.
  • En una primera visita de los usuarios, es poco probable que instalen la app a menos que estén conformes con tu servicio. Considera sugerirles la instalación después de una interacción positiva en tu sitio.
  • Si un usuario visita tu sitio de forma periódica y no instala la app, es muy poco probable que la instale en el futuro. No les sigas enviando correo no deseado.

Conclusión

Si bien no tenemos una API completamente estandarizada e implementada, con el uso de cierta orientación que se presenta en este artículo, puedes compilar de forma sencilla experiencias que aprovechen toda la pantalla del usuario, independientemente del cliente.

Comentarios