Este capítulo se centra en algunos aspectos críticos de la renderización de contenido fuera de la pestaña del navegador.
La ventana
Los diferentes sistemas operativos tienen diferentes ideas sobre lo que es una ventana de aplicación. Por ejemplo, en los iPhones, una aplicación siempre ocupa el 100% de la pantalla. En Android y iPad, por lo general, las aplicaciones se ejecutan en pantalla completa, pero es posible compartir la pantalla entre dos aplicaciones. Sin embargo, solo hay una instancia de aplicación abierta a la vez. En cambio, en un dispositivo de escritorio, una aplicación puede tener más de una instancia abierta a la vez. Comparte el espacio de la pantalla disponible con todas las demás aplicaciones abiertas. Se puede cambiar el tamaño de cada instancia de aplicación y posicionarse en cualquier lugar de la pantalla, incluso superponiendo otras aplicaciones.
El ícono
Reconocemos las apps por su ícono. Ese ícono aparece cuando buscas apps, en la configuración, donde sea que inicies apps y donde veas apps en ejecución.
Estos incluyen los siguientes:
- Pantalla principal (iOS, iPadOS, Android)
- Selector de aplicaciones (macOS, Android)
- Menú Inicio o Menú de la app (Windows, ChromeOS y Linux)
- Paneles Dock, Barra de tareas o Multitarea (todos los sistemas operativos).
Cuando crees el ícono para tu app web progresiva asegúrate de que su ícono sea independiente de la plataforma, ya que cada sistema operativo puede renderizar íconos y aplicarles distintas máscaras de forma, como las que se muestran en la siguiente imagen.
Temas de tu app
Existen varias formas de personalizar el estilo de la app en la AWP, incluidas las siguientes:
- Theme color: Define el color de la barra de título de la ventana en el escritorio y el color de la barra de estado en los dispositivos móviles. Si usas una metaetiqueta, puedes tener opciones de distintos esquemas, como el modo oscuro o claro, que se usarán según la preferencia del usuario.
- Color de fondo: Define el color de la ventana antes de que se carguen la app y su CSS.
- Color de los elementos destacados: Define el color de los componentes integrados del navegador, como los controles de formularios.
Modos de visualización
Puedes definir el tipo de experiencia de ventana que deseas para tu Progressive Web App. Existen tres opciones para elegir:
- Pantalla completa
- Independiente
- Interfaz de usuario mínima
Experiencia de pantalla completa
Una experiencia de pantalla completa es adecuada para experiencias envolventes, como experiencias de juegos, RV o RA. Actualmente, solo está disponible en dispositivos Android y oculta la barra de estado y la de navegación, lo que le da a la AWP el 100% de la pantalla para tu contenido.
En computadoras y iPadOS, no se admiten AWP en pantalla completa. Sin embargo, puedes usar la API de pantalla completa desde tu AWP para mostrar la pantalla completa de la app si el usuario lo solicita.
Experiencia independiente
El modo independiente, la opción más común para una app web progresiva, muestra tu AWP en una ventana estándar del SO sin ninguna IU de navegación del navegador. La ventana también puede incluir un menú controlado por el navegador en el que el usuario puede hacer lo siguiente:
- Copia la URL actual.
- Ver, aplicar o inhabilitar extensiones del navegador
- Ver y cambiar permisos
- Verifica el origen actual y el certificado SSL.
Es posible que la barra de título también muestre permisos y uso de hardware, y que reemplacen el cuadro multifunción o la barra de URL cuando la AWP se renderiza en la pestaña.
En los dispositivos móviles, una experiencia de AWP independiente creará una pantalla estándar que mantiene la barra de estado visible, de modo que el usuario pueda seguir viendo las notificaciones, la hora y el nivel de batería. A menudo, no tiene ningún menú controlado por el navegador como las experiencias independientes de escritorio que pueden incluir.
Algunos navegadores en Android crean una notificación fija y silenciosa mientras la AWP está en primer plano y le permite al usuario copiar la URL actual o cualquier otra opción.
Interfaz de usuario mínima
Este modo está disponible para las apps web progresivas en los sistemas operativos Android y de escritorio. Cuando la uses, el navegador que renderice tu AWP mostrará una interfaz de usuario mínima para ayudar al usuario a navegar dentro de la aplicación.
En Android, verás una barra de título que renderiza el elemento <title>
actual y el origen con un pequeño menú desplegable disponible. En el escritorio, hay un conjunto de botones en la barra de título que te ayudarán con la navegación, incluido un botón Atrás y un control que alterna entre una acción de detener y volver a cargar, según el estado de carga actual.
Cómo optimizar el diseño para computadoras de escritorio
Al diseñar una aplicación web progresiva para que funcione en una computadora, debes pensar en las infinitas posibilidades del tamaño de la ventana en comparación con estar en una pestaña del navegador o como una aplicación en un sistema operativo móvil.
En el capítulo 3, mencionamos el modo mini: una app de escritorio puede tener un tamaño mínimo de 200 por 100 píxeles. Esta ventana usará el contenido del elemento <title>
en tu código HTML como título. Ese contenido también se renderiza cuando presionas la tecla de tabulación alternativa entre apps y en otros lugares.
Presta atención al elemento <title>
de tu HTML y vuelve a pensar en cómo usarlo. El <title>
no es solo para SEO o para renderizar solo los primeros caracteres en una pestaña del navegador. será parte de la experiencia del usuario de su ventana independiente de escritorio.
Prácticas recomendadas para CSS
Toda tu experiencia con el diseño, el diseño y la animación de CSS es válida cuando el contenido se renderiza en su experiencia independiente. Sin embargo, hay un par de sugerencias y trucos para mejorar la experiencia de una ventana independiente.
Consultas de medios
La primera consulta de medios que puedes aprovechar en tu AWP es la propiedad display-mode
que acepta los valores browser
, standalone
, minimal-ui
o fullscreen
.
Esta consulta de medios aplica diferentes estilos a cada modo. Por ejemplo, puedes procesar una invitación de instalación solo en el modo de navegador o un segmento específico de información solo cuando el usuario use tu app desde el ícono del sistema. Esto podría incluir agregar un botón Atrás para usar cuando la app se inicie en modo independiente.
/* It targets only the app used within the browser */
@media (display-mode: browser) {
}
/* It targets only the app used with a system icon in standalone mode */
@media (display-mode: standalone) {
}
/* It targets only the app used with a system icon in all mode */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
}
La experiencia de la app
Cuando los usuarios utilizan una AWP instalada, esperan que se comporte la app. Si bien no es fácil definir lo que significa, el comportamiento web predeterminado no brinda la mejor experiencia en algunas situaciones.
Selección de usuarios
Por lo general, el contenido se puede seleccionar con un mouse o un puntero, o un gesto táctil de mantener presionado. Si bien es útil para el contenido, no proporciona la mejor experiencia para los elementos de navegación, los menús y los botones de tu AWP.
Por lo tanto, es una buena idea inhabilitar la selección del usuario en estos elementos mediante user-select: none
y su versión del prefijo -webkit-
:
.unselectable {
user-select: none;
}
Accent color
En tu AWP, puedes definir un color que coincida con tu marca en los controles del formulario HTML mediante la propiedad accent-color
.
Fuentes del sistema
Si deseas que un elemento, como diálogos o mensajes, coincida con la fuente predeterminada de la plataforma del usuario, puedes usar la siguiente familia de fuentes:
selector {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", system-ui, Roboto, Oxygen-Sans, Ubuntu, Cantarell,
"Helvetica Neue", sans-serif;
}
Desliza para actualizar
Los navegadores para dispositivos móviles modernos, como Google Chrome y Safari, tienen una función que actualiza la página cuando se abre. En algunos navegadores, como Chrome en Android, ese comportamiento también está habilitado en AWP independientes.
Te recomendamos que inhabilites esta acción. Por ejemplo, cuando proporcionas tu propia acción de actualización o administración de gestos, o si existe la posibilidad de que tu usuario active la acción de manera no intencional.
Es posible inhabilitar este comportamiento con overscroll-behavior-y: contain
:
body {
overscroll-behavior-y: contain;
}
Áreas seguras
Algunos dispositivos no tienen pantallas rectangulares sin obstrucciones. en cambio, su pantalla puede tener una forma diferente, como un círculo, o tener partes de la pantalla que no se pueden usar, como la muesca del iPhone 13. En estos casos, algunos navegadores exponen variables de entorno con áreas seguras que pueden mostrar contenido.
Si quieres tener acceso completo a la pantalla, incluso al área invisible, para renderizar tu color o imagen, incluye viewport-fit=cover
en el contenido de tu etiqueta <meta name="viewport">
. Luego, usa las variables de entorno safe-area-inset-*
para extender tu contenido de forma segura a esas áreas.
Recursos
- Consulta de medios en modo de visualización de CSS
- Controla tu desplazamiento: personaliza los efectos de "deslizar hacia abajo para actualizar" y de desbordamiento
- prefers-color-scheme: Hola oscuridad, mi viejo amigo
- prefers-reduced-motion: A veces, menos movimiento es más
- Función de CSS env()
- Color de los elementos destacados de CSS