Desarrollar experiencias en pantalla completa

Podemos crear fácilmente sitios web inmersivos en pantalla completa y aplicaciones, pero como todo en la web, hay un par de maneras de hacerlo. Esto es especialmente importante ahora que hay más navegadores compatibles con una aplicación app web" que inician la pantalla completa.

Obtener pantalla completa para tu aplicación o sitio

Hay varias maneras en las que un usuario o desarrollador puede obtener el modo de pantalla completa de una aplicación web.

  • Solicita al navegador que se muestre en pantalla completa en respuesta a un gesto del usuario.
  • Instala la app en la pantalla principal.
  • Simulación: esconder automáticamente la barra de direcciones.

Solicita al navegador que se muestre en pantalla completa en respuesta a un gesto del usuario

No todas las plataformas son iguales. Safari de iOS no tiene una API de pantalla completa, pero sí en Chrome para Android, Firefox e IE 11+. La mayoría de las aplicaciones que creas usan una combinación de la API de JS y los selectores CSS que proporciona la especificación de pantalla completa. El principal Las API de JS que debes tener en cuenta al crear una experiencia en pantalla completa son:

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

Cuando tu app esté en pantalla completa, ya no tendrás los controles de la IU del navegador disponibles para ti. Esto cambia la forma en que los usuarios interactúan con tu una experiencia fluida a los desarrolladores. No tienen los controles de navegación estándares, como la opción Adelante y hacia atrás; no tiene la salida que es el botón Actualizar. Es para esta situación. Puedes usar algunos selectores CSS como ayuda cambias el estilo y la presentación de tu sitio cuando el navegador ingresa 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 que el uso de 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 la situación del prefijo del proveedor es compleja más complicada en comparación con la API especificada. Incluso con el código un poco simplificado, a continuación, aún 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 ligeramente diferentes y los prefijos del proveedor en uno coherente.

Sugerencias sobre la API de pantalla completa

Visualización en pantalla completa del documento
Pantalla completa en el elemento del cuerpo
Figura 1: Pantalla completa en el elemento del cuerpo.

Es normal pensar que tomas el elemento de cuerpo en pantalla completa, pero si en un motor de renderizado WebKit o Blink, verás que tiene un efecto extraño: reducir el ancho del cuerpo al menor tamaño posible que contenga todas las contenido. (Mozilla Gecko está bien).

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

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

document.documentElement.requestFullscreen();
Activa el modo de pantalla completa de un elemento de video

La activación de la pantalla completa de un elemento de video es exactamente igual a la activación de cualquier otro pantalla completa de los elementos. Llamas al método requestFullscreen en el 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 definido el atributo de controles, el usuario no puede controlar los videos una vez que están en pantalla completa. El Se recomienda tener un contenedor básico que encapsule el video 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 da mucha más flexibilidad porque puedes combinar el contenedor con el seudoselector 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 estos patrones, puedes detectar cuándo se está ejecutando la pantalla completa y adaptar interfaz de usuario adecuada, por ejemplo:

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

Iniciar el modo de pantalla completa de una página desde la pantalla principal

No es posible iniciar una página web en pantalla completa cuando el usuario navega a ella. Los proveedores de navegadores saben muy bien que una experiencia de pantalla completa en cada carga es una gran molestia, por lo que se requiere un gesto del usuario para ingresar a la pantalla completa. Los proveedores permiten que los usuarios "instalen" y el hecho de instalarla es una una señal al sistema operativo que el usuario desea iniciar como una aplicación en la plataforma.

En las principales plataformas móviles, es bastante fácil implementar metaetiquetas o archivos de manifiesto como se indica a continuación.

iOS

Desde el lanzamiento del iPhone, los usuarios han podido instalar aplicaciones web para de la pantalla de inicio y hacer que se inicien como aplicaciones web en pantalla completa.

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

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

Apple .

Chrome para Android

Recientemente, el equipo de Chrome implementó una función que le indica al navegador lo siguiente: Iniciar la pantalla completa de la página cuando el usuario la haya agregado a la pantalla de inicio Sí similar al modelo Safari de iOS.

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

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

Google Chrome .

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

El manifiesto de apps web (Chrome, Opera, Firefox, Samsung)

El manifiesto para las aplicaciones web es un archivo JSON simple que proporciona la desarrollador, la capacidad de controlar cómo se muestra tu app al usuario en las áreas que esperarían ver las aplicaciones (por ejemplo, la pantalla de inicio de un dispositivo móvil), qué puede lanzar el usuario y, lo que es más importante, cómo puede hacerlo. En la En el futuro, el manifiesto le permitirá tener aún más control sobre su aplicación, pero ahora mismo solo nos enfocaremos en cómo puedes lanzar tu app. En particular, haz lo siguiente:

  1. Cómo informar al navegador sobre el manifiesto
  2. Describir cómo iniciar

Una vez que hayas creado el manifiesto y que esté alojado en tu sitio web, es agregar una etiqueta de vínculo en todas las páginas que contengan tu aplicación, de la siguiente manera:

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

Chrome admite Manifiestos desde la versión 38 para Android (octubre de 2014) y te da el control de cómo se ve tu app web cuando está instalada a la pantalla principal (a través de las propiedades short_name, name y icons) y cómo se debe iniciar cuando el usuario haga clic en el ícono de inicio (a través de start_url, display y orientation).

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

{
  "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 totalmente progresiva y te permite crear mejores experiencias integradas para los usuarios de un navegador compatible con la función.

Cuando un usuario agrega tu sitio o aplicación a la pantalla de inicio, hay una intención del usuario la trate como una aplicación. Esto significa que debes dirigir al usuario a la funcionalidad de la aplicación, en lugar de la página de destino del producto. Por ejemplo: si se requiere que el usuario acceda a tu app, es una buena página para el lanzamiento.

Apps de utilidad

La mayoría de las apps de utilidad se beneficiarán de esto de inmediato. Para aquellos Es probable que quieras que se lancen de forma independiente, igual que cualquier otra app. en una plataforma móvil. Para indicarle a una app que se inicie de forma independiente, agrégalo Manifiesto de la app:

    "display": "standalone"
Videojuegos

La mayoría de los juegos aprovecharán un manifiesto de inmediato. La vasta la mayoría de los juegos se lanzará en pantalla completa y se forzará un orientación.

Si estás desarrollando un juego con desplazamiento vertical o como Flappy Birds lo más probable es que tu juego esté siempre en modo Retrato.

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

Por otro lado, si estás creando un acertijo o un juego como X-Com, entonces debes es probable que el juego quiera que 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. La mayoría de los desarrolladores no pensaría en agregar un manifiesto a un sitio de noticias. El manifiesto te permitirá definir qué lanzar (la portada de tu sitio de noticias) y cómo iniciarlo (en pantalla completa o como una pestaña del navegador normal).

La elección depende de ti y de cómo crees que les gustará a los usuarios acceder a tu una experiencia fluida a los desarrolladores. Si quieres que tu sitio tenga todas las funciones de Chrome que necesitas esperar que tenga un sitio, puedes configurar la visualización en browser.

    "display": "browser"

Si quieres que tu sitio de noticias parezca que la mayoría de las apps centradas en noticias tratan sus experiencias como apps y eliminar de la IU todo Chrome, similar a la web, puedes para hacerlo, configura la pantalla en standalone.

    "display": "standalone"

Simulación: Oculta automáticamente la barra de direcciones.

Puedes usar "pantalla completa falsa" 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 para que no estorbe. Por desgracia, no es estandarizado ni está bien. no es compatible. También debes resolver varias peculiaridades.

Por ejemplo, los navegadores suelen restablecer la posición en la página cuando el usuario navega hasta él. Usar window.scrollTo anula esto, lo que resulta molesto del usuario. Para solucionar esto, debes almacenar la última posición en localStorage y lidiar con casos extremos (por ejemplo, si el usuario tiene el abrir la página en varias ventanas).

Lineamientos de UX

Cuando creas un sitio que aprovecha la pantalla completa, hay una la cantidad de cambios potenciales en la experiencia del usuario que debes tener en cuenta para y compilarás un servicio que tus usuarios amarán.

No utilizar 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 garantizar que los usuarios puedan navegar por la aplicación sin bloquearse.

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

iOS

En iOS, puedes usar el valor booleano navigator.standalone para ver si el usuario si se iniciara desde la pantalla de inicio o no.

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

El manifiesto de apps web (Chrome, Opera, Samsung)

Cuando se inicia Chrome como una app instalada, no se ejecuta en verdadera pantalla completa experiencia, 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, la ventana las APIs en pantalla completa están disponibles, incluido el pseudoselector CSS que te permite Adapta tu IU para reaccionar al 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 el usuario inicia tu sitio desde la pantalla principal, el elemento multimedia display-mode esta consulta se establecerá según lo definido en el manifiesto de apps web. En el caso de pantalla completa pura será:

@media (display-mode: fullscreen) {
}

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

@media (display-mode: standalone) {
}

Firefox

Cuando el usuario solicita el modo de pantalla completa a través de tu sitio o inicia la app en modo de pantalla completa; todas las APIs de pantalla completa estándar están disponibles, incluida la Seudoselector de CSS, que te permite adaptar tu IU para reaccionar al 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 seudoclase CSS carece de un guion, pero funciona de forma similar al 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 en pantalla completa puede ser un poco complicada. Los proveedores de navegadores no quieren para bloquear a los usuarios en una página de pantalla completa, de modo que hayan desarrollado mecanismos para romper para salir de la pantalla completa tan pronto como sea posible. Esto significa que no puedes crear un sitio web en pantalla completa que abarca varias páginas porque:

  • Si cambias la URL de manera programática usando window.location = "http://example.com", se sale de la pantalla completa.
  • Un usuario que hace clic en un vínculo externo dentro de tu página saldrá de la pantalla completa.
  • Si cambias la URL a través de la API de navigator.pushState, también se saldrá del experiencia en pantalla completa.

Tienes dos opciones si deseas mantener al usuario en una experiencia de pantalla completa:

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

Usando la #sintaxis para actualizar la URL (window.location = "#somestate") y cuando escuchas el evento window.onhashchange, puedes usar la app de tu navegador una pila de historial para administrar cambios en el estado de la aplicación, permitir que el usuario utilice los botones Atrás del hardware, o bien ofrecer un botón Atrás programático simple con la API de History de la siguiente manera:

window.history.go(-1);

Cómo permitir que el usuario elija cuándo 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 su sitio, no intente engañarlo para que pantalla completa.

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

  1. Es molesto.
  2. Es posible que los navegadores decidieran enviar mensajes al usuario en algún momento del futuro sobre lo que permite que la app ocupe la pantalla completa.

Si quieres iniciar la pantalla completa de las apps, usa la opción experiencias para cada plataforma.

No le envíes spam 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 ser considerado con el usuario.

  • Sé discreto. Usa un banner o un pie de página para informarles que puedes instalar el .
  • Si descartan el mensaje, no lo vuelvas a mostrar.
  • En una primera visita, es poco probable que los usuarios quieran instalar la aplicación, a menos estén satisfechos con el servicio que prestan. Considera pedirles que instalen la app después de una interacción positiva en tu sitio.
  • Si un usuario visita tu sitio con frecuencia y no instala la aplicación, es posible es poco probable que instales tu app en el futuro. No les sigas enviando spam.

Conclusión

Si bien no tenemos una API completamente estandarizada e implementada, usar algunas de las orientación presentada en este artículo, puedes crear fácilmente experiencias que lleven las ventajas de la pantalla completa del usuario, independientemente del cliente.

Comentarios