Las apps web progresivas (AWP) se compilan y mejoran con APIs modernas para ofrecer capacidades, confiabilidad y capacidad de instalación mejoradas, y llegar 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 principal de la app web progresiva
La lista de verificación de aplicaciones web progresivas describe qué hace que una aplicación sea instalable y utilizable por todos los usuarios, independientemente del tamaño o el tipo de entrada.
Velocidad permanente
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 utilicen tu app. De hecho, a medida que los tiempos de carga de la página aumentan de un segundo a diez segundos, la probabilidad de que un usuario rebote aumenta en un 123%. El rendimiento tampoco se detiene con el evento load. Los usuarios nunca deben preguntarse si se registró su interacción, como hacer clic en un botón. El desplazamiento y la animación deben ser fluidos. El rendimiento afecta toda tu experiencia, tanto en el comportamiento de tu app como en la forma en que los usuarios la perciben.
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 sea 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 funcione con rapidez.
Funciona en cualquier navegador
Los usuarios pueden usar el 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.
Una forma eficaz de hacerlo es, según Jeremy Keith en Resilient Web Design, identificar las funciones principales, hacer que esas funciones estén disponibles con la tecnología más simple posible y, luego, mejorar la experiencia cuando 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 implementar eso es un formulario HTML que envíe una solicitud POST. Después de crearla, 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.
Tus usuarios experimentan tu sitio en un espectro de dispositivos y navegadores. No puedes segmentar solo la parte superior de ese espectro. Usa la detección de funciones para ofrecer una experiencia utilizable a la mayor cantidad posible de usuarios potenciales, incluidos aquellos que usan navegadores y dispositivos que aún no existen.
Cómo
El Diseño web resiliente de Jeremy Keith es un excelente recurso que describe cómo pensar en el diseño web con esta metodología progresiva y compatible con varios navegadores.
Lecturas adicionales
- El artículo Understanding Progressive Enhancement de A List Apart es una buena introducción al tema.
- El artículo de Smashing Magazine Progressive Enhancement: What It Is, And How To Use It? ofrece una introducción práctica y vínculos a temas más avanzados.
- En el artículo de MDN Implementación de la detección de funciones, se explica cómo detectar una función consultándola directamente.
Se adapta a cualquier tamaño de pantalla
Los usuarios pueden usar tu PWA en cualquier tamaño de pantalla, y todo su contenido está disponible en cualquier tamaño de viewport.
Por qué
Los dispositivos vienen en 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 de que el contenido se ajuste al viewport y de que todas las funciones y el contenido del 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 de la ventana gráfica. Puedes reorganizar tu contenido para diferentes tamaños de viewport, y todo debería estar allí, de una forma u otra. De hecho, como afirma Luke Wroblewski en su libro Mobile First, comenzar con un diseño pequeño y ajustarlo 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 x 480 píxeles para elementos innecesarios y ajenos. Tienes que priorizar".
Cómo
Hay muchos recursos sobre el diseño adaptable, incluidos el artículo original de Ethan Marcotte y una colección de conceptos importantes relacionados con él, así como una gran cantidad de libros y charlas.
Para limitar este debate a los aspectos de contenido del diseño responsivo, consulta lo siguiente:
- Diseño centrado en el contenido
- Diseños responsivos centrados en el contenido
- Siete mitos mortales sobre los dispositivos móviles, que es tan relevante para las vistas de tamaño pequeño de los sitios responsivos como para todos los dispositivos móviles.
Proporciona una página sin conexión personalizada
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 la conexión. Una app específica para una plataforma nunca muestra una página en blanco cuando está sin conexión, y una PWA nunca debería 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 tu experiencia web se sienta como 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 quede sin conexión. Lee Crea una página de resguardo sin conexión para aprender a implementarla por tu cuenta. Chrome seguirá mostrando una página sin conexión básica si no se proporciona ninguna.
Se puede instalar
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 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 comprometido 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.
Lista de tareas óptima para apps web progresivas
Para crear una AWP realmente excelente, que se sienta como una app de primer nivel, necesitas algo más que la lista de verificación principal. La lista de tareas óptima para las AWP se trata de hacer que tu AWP se sienta como parte del dispositivo en el que se ejecuta y, al mismo tiempo, aprovechar lo que hace que la Web sea poderosa.
Proporciona una experiencia sin conexión
Cuando la conectividad no es estrictamente necesaria, tu app funciona sin conexión de la misma manera que lo hace 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 disponibles los detalles del viaje y las tarjetas de embarque cuando no haya conexión. Las apps de música, video y podcasts deben permitir la reproducción sin conexión. Las apps de noticias y redes sociales 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 la autenticación sin conexión.
Una AWP sin conexión proporciona a los usuarios una experiencia similar a la de una app.
Cómo
Después de determinar qué funciones esperan tus usuarios que funcionen sin conexión, debes hacer que tu contenido esté disponible y se adapte a los 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 posponer las comunicaciones con el servidor hasta que el usuario vuelva a tener una conexión estable. 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, y para implementar sesiones seguras y duraderas 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 carga, y que luego puedan recurrir al contenido almacenado en caché o a un indicador sin conexión según sea necesario.
Totalmente accesible
Todas las interacciones del usuario cumplen con el estándar internacional de las Pautas de Accesibilidad al Contenido Web (WCAG) más reciente.
Por qué
En algún momento de su vida, la mayoría de los usuarios querrán usar tu PWA de una manera que cumpla con los WCAG. La capacidad de los humanos para interactuar con tu PWA y comprenderla existe en un espectro, y las necesidades pueden ser temporales o permanentes. Si haces que tu PWA sea accesible, todos podrán usarla.
Cómo
La Introducción a la accesibilidad web del W3C es un buen punto de partida. La mayoría de las pruebas de accesibilidad deben realizarse de forma manual. La auditoría 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 recrearlos por tu cuenta, como los elementos <a> y <button>. Esto garantiza que, cuando necesites crear funciones más avanzadas, se cumplan las expectativas de accesibilidad, por ejemplo, cuándo usar flechas en lugar de pestañas.
Las tarjetas de nutrición de A11Y ofrecen excelentes consejos sobre este tema para algunos componentes comunes.
Se puede encontrar en la búsqueda
Tu PWA 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 aplicaciones a través de la búsqueda. De hecho, más de la mitad de todo el tráfico en sitios web proviene de la búsqueda orgánica. Asegurarte de que existan URLs canónicas para el contenido y de que los motores de búsqueda puedan indexar tu sitio es fundamental para que los usuarios potenciales encuentren tu AWP. Esto es especialmente cierto cuando se adopta la renderización del cliente.
Cómo
Comienza por asegurarte 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 los 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 PWA.
Funciona con cualquier tipo de entrada
Tu PWA se puede usar con un mouse, un teclado, una pluma stylus o la 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. Igual de importante es que los métodos de entrada no deben depender del tamaño de la pantalla, lo que significa que las ventanas gráficas grandes deben admitir el tacto y las ventanas gráficas pequeñas deben admitir teclados y mouse. En la medida de tus posibilidades, 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 controles específicos de entrada (como la función de arrastrar para actualizar).
Cómo
La API de Pointer Events proporciona una interfaz unificada para trabajar con varias opciones de entrada y es especialmente útil para agregar compatibilidad con lápices ópticos. Para admitir tanto el tacto como el teclado, asegúrate de usar los elementos semánticos correctos (anclajes, botones, controles de formulario, etcétera) y no los reconstruyas con HTML no semántico. Cuando incluyas interacciones que se activen al colocar el cursor sobre ellas, asegúrate de que también se puedan activar con un clic o una presión.
Proporciona contexto para las solicitudes de permisos
Cuando solicites permiso para usar APIs potentes, proporciona contexto y haz la solicitud solo cuando se necesite la API.
Por qué
Las APIs que activan un mensaje de permiso, como las notificaciones, la ubicación geográfica y las credenciales, se diseñan intencionalmente para interrumpir al usuario, ya que suelen estar relacionadas con funciones potentes que requieren la aceptación. Si se activan estos mensajes sin contexto adicional, como en la carga de la página, es menos probable que los usuarios acepten esos permisos y más probable que desconfíen de ellos en el futuro.
En su lugar, activa esos mensajes solo después de proporcionar al usuario una explicación contextual sobre por qué necesitas ese permiso.
Cómo
El artículo Permisos de UX 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 APW.
Sigue las prácticas recomendadas para un código correcto
Mantener la base de código en buen estado facilita el cumplimiento de tus objetivos y la entrega de nuevas funciones.
Por qué
Se requiere mucho trabajo para crear una aplicación web moderna. Mantener tu aplicación actualizada y tu base de código en buen estado te facilita ofrecer nuevas funciones que cumplan con los demás objetivos establecidos en esta lista de verificación.
Cómo
Existen varias verificaciones de alta prioridad para garantizar un código base 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
document.write()o tener listeners de eventos de desplazamiento no pasivos. - Incluso puedes programar de forma defensiva para asegurarte de que tu PWA no se interrumpa si no se cargan las estadísticas o las bibliotecas de terceros.
- Considera requerir el análisis de código estático, como el linting, así como las pruebas automatizadas en varios navegadores y canales de versiones. Estas técnicas pueden ayudar a detectar errores antes de que lleguen a la producción.