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 principales y óptimas, y recomendaciones como guía.
Lista de tareas principales para apps web progresivas
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 para el éxito de cualquier experiencia en línea, ya que los sitios con alto rendimiento atraen y retienen más a los usuarios que los que tienen un rendimiento deficiente. Enfócate en optimizar para métricas de rendimiento centradas en el usuario.
Por qué
La velocidad es fundamental para lograr que los usuarios usen tu app. De hecho, cuando los tiempos de carga de la página aumentan de un segundo a diez segundos, la probabilidad de que un usuario rebote aumenta un 123%. El rendimiento tampoco se detiene con el evento load. Los usuarios nunca deberían preguntarse si su interacción (por ejemplo, hacer clic en un botón) se registró o no. El desplazamiento y la animación deben sentirse fluidos.
El rendimiento afecta toda la experiencia, tanto en el comportamiento de la app como en la percepción que tienen 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 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 se instale.
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 Diseño web resiliente, una manera efectiva de hacerlo es identificar las funciones principales, ponerlas a disposición mediante 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. Luego de compilar eso, puedes mejorar la experiencia con JavaScript para realizar la validación de formularios y enviarlo a través de AJAX, lo que mejorará la experiencia de los usuarios que pueden brindar asistencia.
Los usuarios experimentan tu sitio en una variedad de dispositivos y navegadores. No puede simplemente orientarse al extremo superior de ese espectro. Usa la detección de funciones a fin de brindar una experiencia útil para la mayor cantidad posible de usuarios potenciales, incluidos los 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 Comprender la mejora progresiva de 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 enlaces a temas más avanzados.
- En el artículo Cómo implementar la detección de funciones de MDN, se explica cómo detectar una función 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 el contenido se ajuste al viewport y 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 desean completar y el contenido al que quieren acceder no cambian con el tamaño del viewport. Puedes reorganizar el contenido para diferentes tamaños de viewport, y todo debería estar allí, de una manera u 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 este debate a los aspectos de contenido del diseño responsivo, consulta Diseño centrado en el contenido y diseños responsivos sin contenido. Por último, aunque se enfoca en los dispositivos móviles, las lecciones de Siete Deadly Mobile Myths de Josh Clark son tan relevantes para las vistas pequeñas de 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é por adelantado una página personalizada sin conexión para usarla más adelante. Si un usuario se desconecta, puedes responder con la página personalizada sin conexión que se prealmacenó en la caché. Puedes seguir nuestra muestra de página sin conexión personalizada para ver un ejemplo de esto en acción y aprender a implementarlo por tu cuenta.
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 en el que los usuarios lanzan 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 instalable para obtener más información sobre cómo hacer que la AWP se pueda instalar.
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 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, por lo que debes diseñar 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 los usuarios para trabajar sin conexión, deberás hacer que tu contenido esté disponible y se adapte a contextos sin conexión. Puedes usar IndexedDB, un sistema de almacenamiento NoSQL en el navegador, para almacenar y recuperar datos, y sincronización en segundo plano para permitir que los usuarios realicen acciones sin conexión y aplazar las comunicaciones con el servidor hasta que el usuario vuelva a tener una conexión estable. También puedes usar service workers para almacenar otros tipos de contenido, como imágenes, archivos de video y archivos de audio, para usarlos sin conexión. También puedes implementar sesiones seguras y de larga duración para mantener a los usuarios autenticados. Desde la perspectiva de la experiencia del usuario, puedes usar pantallas básicas que les brinden a los usuarios una percepción de la velocidad y el contenido durante la carga, de modo que luego puedan recurrir al contenido almacenado en caché o a un indicador de conexión, según sea necesario.
Todas las interacciones del usuario aprueban 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 los seres humanos para comprender y interactuar con tu AWP 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
La
Introducción a la accesibilidad web de W3C es un buen punto de partida. La mayoría de las pruebas de accesibilidad se deben realizar 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).
A11Y Nutrition Cards tiene excelentes consejos sobre algunos componentes comunes.
Tu AWP se puede descubrir fácilmente a través de 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 la renderización del cliente.
Cómo
Primero, asegúrate de que cada URL tenga un título y una metadescripción únicos y descriptivos. Luego, puedes usar Google Search Console y las auditorías de optimización para motores de búsqueda en Lighthouse para depurar y corregir problemas de visibilidad con 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 deberían poder alternar entre ellos sin problemas mientras usan tu aplicación. Igualmente, los métodos de entrada no deben depender del tamaño de la pantalla, lo que significa que las ventanas gráficas grandes deben ser compatibles con las funciones táctiles y las pequeñas deben admitir teclados y mouse. Asegúrate de que tu aplicación y todas sus funciones admitan el uso de cualquier método de entrada que elija el usuario. Cuando corresponda, mejora las experiencias para permitir también controles específicos de entradas (como deslizar hacia abajo para actualizar).
Cómo
La API de Pointer Events proporciona una interfaz unificada para trabajar con varias opciones de entrada y es muy buena 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 activen cuando se coloca el cursor sobre un elemento, asegúrate de que también puedan activarse cuando se hace clic o se presiona.
Cuando solicites permiso para usar APIs potentes, proporciona contexto y haz preguntas solo cuando se necesite la API.
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é
Hay mucho que hacer 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 codificació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.