Las apps web progresivas (AWP) se compilan y mejoran con APIs modernas para ofrecer capacidades, instalaciones y confiabilidad mejoradas, a la vez que llegan a cualquier persona, en cualquier lugar y dispositivo con una sola base de código. Para ayudarte a crear la mejor experiencia posible, usa las listas de tareas y las recomendaciones principales y óptimas como guía.
Lista de tareas principales de la app web progresiva
En la lista de tareas de apps web progresivas, se describe qué hace que una app sea instalable y utilizable para todos los usuarios, independientemente del tamaño o el tipo de entrada.
El rendimiento desempeña un papel importante en el éxito de cualquier experiencia en línea, ya que los sitios con alto rendimiento atraen y retienen más a los usuarios que aquellos con bajo rendimiento. Enfócate en optimizar para métricas de rendimiento centradas en el usuario.
Por qué
La velocidad es fundamental para que los usuarios usen tu app. De hecho, a medida que el tiempo de carga de la página aumenta de uno a diez segundos, la probabilidad de que un usuario abandone la página aumenta un 123%. El rendimiento tampoco se detiene con el evento load. Los usuarios nunca deben preguntarse si su interacción, por ejemplo, hacer clic en un botón, se registró o no. El desplazamiento y la animación deben ser fluidos.
El rendimiento afecta toda la experiencia, tanto en el comportamiento de la app como en la forma en que la perciben los usuarios.
Si bien todas las aplicaciones tienen necesidades diferentes, las auditorías de rendimiento en Lighthouse se basan en las métricas web esenciales, y obtener una puntuación alta en esas auditorías hará que tus usuarios tengan más probabilidades de tener una experiencia agradable. También puedes utilizar PageSpeed Insights o el Informe sobre la experiencia del usuario en Chrome para obtener datos de rendimiento reales sobre tu app web.
Cómo
Sigue nuestra guía sobre tiempos de carga rápidos para obtener información sobre cómo lograr que tu AWP se inicie rápido y se mantenga veloz.
Los usuarios pueden usar cualquier navegador que elijan para acceder a tu app web antes de que la instales.
Por qué
Las apps web progresivas son las que priorizan las apps web, y eso significa que deben funcionar en todos los navegadores.
Según Jeremy Keith en Resilient Web Design, una forma eficaz de hacerlo es identificar las funciones principales, hacer que esas funciones estén disponibles con la tecnología más simple posible y, luego, mejorar la experiencia siempre que sea posible. En muchos casos, esto significa comenzar solo con HTML para crear las funciones principales y mejorar la experiencia del usuario con CSS y JavaScript para crear una experiencia más atractiva.
Tomemos como ejemplo el envío de formularios. La forma más sencilla de hacerlo es mediante un formulario HTML que envíe una solicitud POST. Después de compilarlo, puedes mejorar la experiencia con JavaScript para validar el formulario y enviarlo a través de AJAX, lo que mejora la experiencia de los usuarios que pueden admitirlo.
Los usuarios experimentan tu sitio en una variedad de dispositivos y navegadores. No puedes segmentar solo el extremo superior de ese espectro. Usa la detección de funciones para ofrecer una experiencia de uso para la más amplia variedad posible de usuarios potenciales, incluidos aquellos que usan navegadores y dispositivos que aún no existen.
Cómo
El libro Resilient Web Design de Jeremy Keith es un excelente recurso que describe cómo pensar en el diseño web en esta metodología progresiva y multiplataforma.
Lecturas adicionales
- El artículo Understanding Progressive Enhancement de A List Apart es una buena introducción al tema.
- Mejora progresiva: ¿Qué es y cómo usarla? de Smashing Magazine ofrece una introducción práctica y vínculos a temas más avanzados.
- En el artículo Implementación de la detección de componentes de MDN, se explica cómo detectar un componente mediante una consulta directa.
Los usuarios pueden usar tu AWP en cualquier tamaño de pantalla, y todo el contenido está disponible en cualquier tamaño de viewport.
Por qué
Los dispositivos tienen diferentes tamaños, y los usuarios pueden usar tu aplicación en diferentes tamaños, incluso en el mismo dispositivo. Por lo tanto, es fundamental asegurarte de que no solo el contenido se ajuste al viewport, sino que todas las funciones y el contenido de tu sitio se puedan usar en todos los tamaños de viewport.
Las tareas que los usuarios quieren completar y el contenido al que quieren acceder no cambian con el tamaño del viewport. Puedes reorganizar tu contenido para diferentes tamaños de viewport, y todo debería estar allí, de una forma o de otra. De hecho, como dice Luke Wroblewski en su libro Mobile First, comenzar de a poco y ajustar el diseño para pantallas más grandes puede mejorar el diseño de un sitio:
Los dispositivos móviles requieren que los equipos de desarrollo de software se enfoquen solo en los datos y las acciones más importantes de una aplicación. Sencillamente, no hay espacio en una pantalla de 320 x 480 píxeles para elementos innecesarios e innecesarios. Se deben establecer prioridades.
Cómo
Hay muchos recursos sobre el diseño responsivo, incluido el artículo original de Ethan Marcotte, una colección de conceptos importantes relacionados, así como libros y charlas en abundancia. Para limitar esta discusión a los aspectos de contenido del diseño responsivo, consulta el diseño en el que se prioriza el contenido y los diseños responsivos con contenido fuera del diseño. Por último, si bien se enfoca en los dispositivos móviles, las lecciones de Seven Deadly Mobile Myths de Josh Clark son tan relevantes para las vistas de tamaño pequeño de los sitios responsivos como para los dispositivos móviles en general.
Cuando los usuarios están sin conexión, mantenerlos en tu AWP proporciona una experiencia más fluida que volver a la página sin conexión del navegador predeterminado.
Por qué
Los usuarios esperan que las apps instaladas funcionen independientemente del estado de conexión. Una app específica de una plataforma nunca muestra una página en blanco cuando está sin conexión, y una AWP nunca debe mostrar la página sin conexión predeterminada del navegador. Proporcionar una experiencia sin conexión personalizada, tanto cuando un usuario navega a una URL que no está almacenada en caché como cuando intenta usar una función que requiere una conexión, ayuda a que tu experiencia web se sienta parte del dispositivo en el que se ejecuta.
Cómo
Durante el evento install de un service worker, puedes almacenar en caché previamente una página sin conexión personalizada para mostrarla cuando un usuario se queda sin conexión. Consulta Cómo crear una página de resguardo sin conexión para aprender a implementarla por tu cuenta. Ten en cuenta que Chrome mostrará una página básica sin conexión si no se proporciona ninguna.
Los usuarios que instalan o agregan apps a sus dispositivos suelen interactuar más con ellas.
Por qué
Instalar una app web progresiva permite que se vea, se sienta y se comporte como todas las demás apps instaladas. Se inicia desde el mismo lugar desde el que los usuarios inician sus otras apps. Se ejecuta en su propia ventana de la app, separada del navegador, y aparece en la lista de tareas, al igual que otras apps.
Al igual que ocurre con las apps específicas para dispositivos, los usuarios que instalan tus apps son el público que más participa y, a menudo, tienen métricas de participación similares a las de los usuarios de apps en dispositivos móviles. Estas métricas incluyen más visitas repetidas, períodos más largos en tu sitio y porcentajes de conversiones más altos que los visitantes típicos.
Cómo
Sigue nuestra guía de instalación para aprender a hacer que tu AWP sea instalable.
Lista de tareas para optimizar las apps web progresivas
Para crear una AWP realmente excelente, que se sienta como la mejor app, necesitas más que solo la lista de tareas principal. La lista de tareas óptima para AWP se trata de hacer que la AWP parezca parte del dispositivo en el que se ejecuta, a la vez que aprovechas lo que hace que la Web sea potente.
Cuando la conectividad no es estrictamente necesaria, la app funciona igual sin conexión que en línea.
Por qué
Además de proporcionar una página sin conexión personalizada, los usuarios esperan que las AWP se puedan usar sin conexión. Por ejemplo, las apps de viajes y aerolíneas deben tener los detalles del viaje y las tarjetas de embarque disponibles sin conexión. Las apps de música, video y podcasts deben permitir la reproducción sin conexión. Las apps de redes sociales y de noticias deben almacenar en caché el contenido reciente para que los usuarios puedan leerlo sin conexión. Los usuarios también esperan mantener su autenticación sin conexión, así que diseña para la autenticación sin conexión. Una AWP sin conexión proporciona a los usuarios una verdadera experiencia similar a la de una app.
Cómo
Después de determinar qué funciones esperan que funcionen sin conexión, deberás hacer que tu contenido esté disponible y se adapte a los contextos sin conexión. Puedes usar IndexedDB, un sistema de almacenamiento NoSQL integrado en el navegador, para almacenar y recuperar datos, y la sincronización en segundo plano para permitir que los usuarios realicen acciones sin conexión y aplacen las comunicaciones del servidor hasta que el usuario vuelva a tener una conexión estable. También puedes usar trabajadores de servicio para almacenar otros tipos de contenido, como imágenes, archivos de video y archivos de audio, para usarlos sin conexión y para implementar sesiones seguras y de larga duración para mantener la autenticación de los usuarios. Desde la perspectiva de la experiencia del usuario, puedes usar pantallas de esqueleto que les den a los usuarios una percepción de velocidad y contenido mientras se cargan, y que luego puedan recurrir al contenido almacenado en caché o a un indicador sin conexión según sea necesario.
Todas las interacciones del usuario cumplen con los requisitos de accesibilidad de WCAG 2.0.
Por qué
La mayoría de los usuarios, en algún momento de su vida, quieren usar tu AWP de una manera incluida en los requisitos de accesibilidad de WCAG 2.0. La capacidad de las personas para interactuar con tu AWP y comprenderla existe en un espectro, y las necesidades pueden ser temporales o permanentes. Al hacer que tu AWP sea accesible, la haces fácil de usar para todos.
Cómo
Un buen punto de partida es la Introducción a la accesibilidad web del W3C. La mayoría de las pruebas de accesibilidad deben realizarse de forma manual. Las herramientas como las auditorías de accesibilidad en Lighthouse, axe y las estadísticas de accesibilidad pueden ayudarte a automatizar algunas pruebas de accesibilidad. También es importante usar elementos semánticamente correctos en lugar de recrearlos por tu cuenta, por ejemplo, los elementos a y button. Esto garantiza que, cuando necesites compilar funciones más avanzadas, se cumplan las expectativas de accesibilidad (por ejemplo, cuándo usar flechas en lugar de pestañas).
Tarjetas de información nutricional de accesibilidad tiene excelentes sugerencias sobre este tema para algunos componentes comunes.
Tu AWP se puede descubrir fácilmente mediante la búsqueda.
Por qué
Una de las ventajas más grandes de la Web es la capacidad de descubrir sitios y apps mediante la búsqueda. De hecho, más de la mitad de todo el tráfico del sitio web proviene de la búsqueda orgánica. Para permitir que los usuarios potenciales encuentren tu AWP, es fundamental que te asegures de que existan URL canónicas para el contenido y de que los motores de búsqueda puedan indexar tu sitio. Esto es especialmente cierto cuando se adopta el procesamiento del cliente.
Cómo
Primero, asegúrate de que cada URL tenga un título único y descriptivo, y una metadescripción. Luego, puedes usar Google Search Console y las auditorias de optimización de motores de búsqueda en Lighthouse para depurar y corregir problemas de visibilidad de tu AWP. También puedes usar las herramientas de propietario del sitio de Bing o Yandex y considerar incluir datos estructurados con esquemas de Schema.org en tu AWP.
La AWP se puede usar de la misma manera con un mouse, un teclado, una pluma stylus o una función táctil.
Por qué
Los dispositivos ofrecen una variedad de métodos de entrada, y los usuarios deben poder cambiar entre ellos sin problemas mientras usan tu aplicación. Al igual que es importante que los métodos de entrada no dependan del tamaño de la pantalla, lo que significa que los viewports grandes deben admitir la función táctil y los viewports pequeños deben admitir teclados y mouses. En la medida de lo posible, asegúrate de que tu aplicación y todas sus funciones admitan el uso de cualquier método de entrada que el usuario pueda elegir. Cuando corresponda, mejora las experiencias para permitir también controles específicos de entrada (como el gesto de deslizar para actualizar).
Cómo
La API de eventos del puntero proporciona una interfaz unificada para trabajar con varias opciones de entrada y es especialmente útil para agregar compatibilidad con la pluma stylus. Para admitir tanto la función táctil como el teclado, asegúrate de usar los elementos semánticos correctos (anclas, botones, controles de formulario, etc.) y no volver a compilarlos con HTML no semántico. Cuando incluyas interacciones que se activan con el desplazamiento del mouse, asegúrate de que también se puedan activar con un clic o una presión.
Cuando solicites permiso para usar APIs potentes, proporciona contexto y solicítalo solo cuando sea necesario.
Por qué
Las APIs que activan una solicitud de permiso, como las notificaciones, la ubicación geográfica y las credenciales, están diseñadas de manera intencional con el objetivo de afectar a un usuario, ya que suelen estar relacionadas con funciones potentes que requieren aceptación. Activar estas instrucciones sin contexto adicional, como durante la carga de la página, disminuye las probabilidades de que los usuarios acepten esos permisos y desconfían de ellos en el futuro. En su lugar, activa esos mensajes solo después de proporcionar una justificación en contexto al usuario sobre por qué lo necesitas.
Cómo
El artículo sobre UX de permisos y el libro The Right Ways to Ask Users for Permissions de UX Planet son buenos recursos para comprender cómo diseñar instrucciones de permisos que, si bien se centran en los dispositivos móviles, se aplican a todas las AWP.
Mantener en buen estado tu base de código facilita el cumplimiento de tus objetivos y la entrega de funciones nuevas.
Por qué
Se deben tener en cuenta muchos factores para compilar una aplicación web moderna. Mantener tu aplicación actualizada y tu base de código en buen estado facilita la entrega de funciones nuevas que cumplen con los demás objetivos establecidos en esta lista de tareas.
Cómo
Existen varias verificaciones de prioridad alta para garantizar una base de código en buen estado:
- Evita usar bibliotecas con vulnerabilidades conocidas.
- Asegúrate de no usar APIs obsoletas.
- Quita las prácticas de programación no seguras de tu base de código (como usar
document.write()o tener objetos de escucha de eventos de desplazamiento no pasivos). - Incluso puedes codificar de manera defensiva para asegurarte de que tu AWP no falle si no se cargan las estadísticas o las otras bibliotecas de terceros.
- Procura requerir análisis de código estático, como análisis con lint, además de pruebas automatizadas en varios navegadores y canales de versiones. Estas técnicas pueden ayudar a detectar errores antes de que lleguen a producción.