Las apps web progresivas (AWP) se compilan y mejoran con APIs modernas para ofrecer capacidades, confiabilidad y capacidad de instalación mejoradas, a la vez que llegan a cualquier persona, en cualquier lugar y en cualquier 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
La lista de tareas de la aplicación web progresiva describe qué hace que una app sea instalable y usable por 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 las 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 un segundo 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 tu 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 si obtienes una puntuación alta en esas auditorías, es más probable que tus usuarios tengan una experiencia agradable. También puedes usar PageSpeed Insights o el Informe sobre la experiencia del usuario en Chrome para obtener datos de rendimiento reales de tu app web.
Cómo
Sigue nuestra guía sobre tiempos de carga rápidos para aprender a hacer que tu AWP se inicie y se mantenga rápida.
Los usuarios pueden usar cualquier navegador que elijan para acceder a tu app web antes de que se instale.
Por qué
Las apps web progresivas son, en primer lugar, apps web, lo que 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 implementarlo es con 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
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 multinavegador.
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 su contenido está disponible en cualquier tamaño de viewport.
Por qué
Los dispositivos tienen una variedad de tamaños, y los usuarios pueden usar tu aplicación en una variedad de tamaños, incluso en el mismo dispositivo. Por lo tanto, es fundamental asegurarse no solo de que el contenido se ajuste al viewport, sino de 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 afirma 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. Simplemente, no hay espacio en una pantalla de 320 por 480 píxeles para elementos innecesarios. Debes priorizar.
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 con él, 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 que prioriza el contenido y los diseños responsivos centrados en el contenido. 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 no tienen 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 su conexión. Una app específica de la 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 se almacenó en caché como cuando intenta usar una función que requiere una conexión, ayuda a que la experiencia web se sienta como parte del dispositivo en el que se ejecuta.
Cómo
Durante el evento install de un trabajador de servicio, 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 sin conexión básica 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 con las apps específicas para dispositivos, los usuarios que instalan tus apps son tu público más participativo 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, más tiempo en tu sitio y porcentajes de conversiones más altos que los de 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 óptima para apps web progresivas
Para crear una AWP realmente excelente, una que se sienta como la mejor app de su clase, necesitas más que solo la lista de tareas principales. La lista de tareas óptima para la AWP consiste en hacer que esta parezca parte del dispositivo en el que se ejecuta y, al mismo tiempo, aprovechar lo que hace que la Web sea potente.
Cuando la conectividad no es estrictamente necesaria, tu 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 permanecer autenticados cuando no tienen conexión, así que diseña para la autenticación sin conexión. Una AWP sin conexión proporciona una experiencia similar a la de una app para los usuarios.
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 una perspectiva de 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 que cumpla con los requisitos de accesibilidad del 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. Si haces que tu AWP sea accesible, la podrás usar todo el mundo.
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 Accessibility Insights pueden ayudarte a automatizar algunas pruebas de accesibilidad. También es importante usar elementos semánticamente correctos en lugar de volver a crearlos 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 a través de la búsqueda.
Por qué
Una de las mayores ventajas de la Web es la capacidad de descubrir sitios y apps a través de la búsqueda. De hecho, más de la mitad de todo el tráfico de los sitios web proviene de la búsqueda orgánica. Es fundamental asegurarse de que existan URLs canónicas para el contenido y de que los motores de búsqueda puedan indexar tu sitio para que los usuarios potenciales encuentren tu AWP. 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 solucionar problemas de visibilidad de tu PWA. También puedes usar las herramientas para propietarios de sitios de Bing o Yandex y considerar incluir datos estructurados con esquemas de Schema.org en tu AWP.
Tu AWP se puede usar de la misma manera con un mouse, un teclado, una pluma stylus o la pantalla 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 la interacción táctil y el teclado, asegúrate de usar los elementos semánticos correctos (anclas, botones, controles de formulario, etc.) y de 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 puedan activarse 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 un mensaje de permiso, como las notificaciones, la geolocalización y las credenciales, están diseñadas intencionalmente para interrumpir al usuario, ya que suelen estar relacionadas con funciones potentes que requieren aceptación. Activar estas indicaciones sin contexto adicional, como cuando se carga una página, hace que los usuarios sean menos propensos a aceptar esos permisos y más propensos a desconfiar de ellos en el futuro. En su lugar, activa esas indicaciones solo después de proporcionarle al usuario una justificación contextual de por qué necesitas ese permiso.
Cómo
El artículo UX de permisos y Las formas correctas de solicitar permisos a los usuarios de UX Planet son buenos recursos para comprender cómo diseñar mensajes de permisos que, si bien se enfocan en dispositivos móviles, se aplican a todas las AWP.
Mantener tu base de código en buen estado 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 te permite ofrecer funciones nuevas que cumplan con los otros objetivos que se describen en esta lista de tareas.
Cómo
Existen varias verificaciones de alta prioridad para garantizar una base de código saludable:
- 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 forma defensiva para asegurarte de que tu AWP no falle si las estadísticas o alguna otra biblioteca de terceros no se cargan.
- Considera exigir un análisis de código estático, como linting, así como pruebas automáticas en varios navegadores y canales de lanzamiento. Estas técnicas pueden ayudar a detectar errores antes de que lleguen a producción.