- Las aplicaciones web progresivas (PWA) son una herramienta poderosa para hacer que las aplicaciones web se sientan como apps nativas, y permiten optimizar la experiencia de usuario mediante distintos modos de visualización
- El modo de visualización configurado en el archivo
manifest de una PWA ajusta la visibilidad de la UI del navegador y, según cada modo, permite adaptar la interfaz de usuario para reducir la diferencia entre la experiencia web y la de una app
- Con media queries de CSS y JavaScript, es posible ajustar contenido y funciones según el modo de visualización para ofrecer una experiencia personalizada que responda a las necesidades del usuario
- Los usuarios de PWA y los visitantes de un sitio web común tienen expectativas distintas, por lo que conviene optimizar la navegación, los prompts de instalación y el contenido según el modo de visualización
- La optimización por modo de visualización hace que una PWA se sienta más pulida y más parecida a una app, y es una técnica importante para mejorar la experiencia de app en la web
Modos de visualización de PWA y por qué hace falta optimizarlos
- Las PWA son una tecnología para implementar aplicaciones web como si fueran apps nativas y, al salir del entorno del navegador, pueden aparecer problemas de usabilidad
- Existe la posibilidad de perder funciones que ofrece el navegador, como volver atrás, recargar o copiar la URL
- Elementos adecuados para un sitio web pueden sentirse poco naturales en un entorno de app
- Los modos de visualización que se pueden configurar en el archivo
manifest son los siguientes
fullscreen: oculta toda la UI del navegador y usa pantalla completastandalone: oculta los controles del navegador y se ve como una app nativaminimal-ui: muestra un conjunto mínimo de elementos de UI del navegadorbrowser: ofrece la interfaz estándar del navegador
- Cuando la UI del navegador está oculta, la experiencia de usuario puede verse afectada, por lo que la optimización por modo de visualización es indispensable
Uso de media queries para modos de visualización
- Se pueden usar media queries para ajustar estilos y funciones según el modo de visualización
- Ejemplo:
@media (display-mode: standalone) se aplica solo en modo standalone
- También hay soporte para consultas correspondientes a los modos
fullscreen, minimal-ui y browser
- Los modos experimentales
window-controls-overlay y tabbed pueden configurarse en un orden personalizado mediante display_override
window-controls-overlay: muestra los botones de control de ventana como overlay en escritoriotabbed: permite varios entornos de aplicación dentro de una sola ventana
- Con JavaScript se puede comprobar el modo de visualización y hacer ajustes dinámicos
- Ejemplo:
window.matchMedia("(display-mode: standalone)").matches permite verificar el modo actual
- También se pueden detectar eventos de cambio de modo para ajustar la UI dinámicamente
Casos prácticos de aplicación
- Contenido personalizado para usuarios de PWA: quienes usan una PWA instalada ya son usuarios convertidos, por lo que conviene reducir el contenido de marketing y centrarse en la experiencia de usuario
- Se pueden ocultar elementos innecesarios, como prompts de instalación
- Ofrecer opciones adicionales: si no hay UI del navegador, hacen falta alternativas dentro de la app, como ajustar el tamaño de fuente, cambiar entre modo claro y oscuro o compartir
- Funciones adecuadas para la plataforma: una barra de navegación inferior, común en apps nativas móviles, puede encajar bien en una PWA, pero resultar poco natural en un sitio web
- Funciones como un botón de impresión conviene ocultarlas en modo PWA
- Gestión de prompts de instalación: para evitar que el prompt de instalación aparezca en una PWA ya instalada, se puede controlar con media queries o JavaScript
- Ejemplo: usar la clase utilitaria
.hide-in-pwa para ocultar elementos en modo PWA
- Estrategia de
scope y start_url: scope y start_url permiten diferenciar contenido entre el entorno PWA y el entorno web
scope: define la ruta de nivel superior de la PWA; al salir de ese rango, vuelve a mostrarse la UI del navegadorstart_url: especifica la página que se mostrará al iniciar la app; por ejemplo, ir directo al dashboard
- Mejorar las transiciones de vista: aplicar en exclusiva a la PWA efectos de transición entre vistas, comunes en apps nativas
- Ejemplo: configurar el CSS de transición de vistas dentro de
@media (display-mode: standalone)
Soporte de navegadores y pruebas
- Las media queries de modo de visualización cuentan con amplio soporte en la mayoría de los navegadores
- Firefox no soporta PWA y Firefox para Android solo muestra el modo
browser
- Mediante progressive enhancement se puede asegurar una degradación elegante en navegadores no compatibles
- Como las pruebas se comportan distinto según el dispositivo y el navegador, deben realizarse en múltiples entornos
- Los navegadores no ofrecen simulación del modo de visualización, así que es necesario probar con combinaciones reales de dispositivos y sistemas operativos
Resumen e implicaciones
- Usando media queries de
display-mode, las PWA pueden ofrecer una experiencia adaptativa según el contexto de instalación y visualización
- Es posible ocultar prompts de instalación, apoyar la navegación, personalizar contenido, reforzar la sensación nativa y aplicar mejoras progresivas
- Los usuarios de PWA tienen necesidades y expectativas distintas a las de los visitantes web comunes, así que hace falta un ajuste cuidadoso según el modo de visualización
- A medida que madura el ecosistema PWA, la implementación detallada y la optimización se vuelven claves para crear una experiencia de app atractiva
- Para más información, se recomienda consultar “Extensive Guide To Progressive Web Applications” de Smashing Magazine
2 comentarios
Firefox también volvió a empezar a dar soporte a las PWA en nightly. Pronto también se agregará a stable.
Como hay que usarlo a través del canal que es el navegador... siempre prefiero lo nativo, pero cuando veo temas de PWA siempre me parecen muy interesantes.
Buscan la misma optimización, pero con una dirección distinta...