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 base de código única. Si deseas crear la mejor experiencia posible, usa las listas de tareas y las recomendaciones principales y óptimas.
Lista de tareas principales de las apps web progresivas
En la lista de tareas de apps web progresivas, se describe qué hace que una app sea instalable y fácil de usar para todos los usuarios, independientemente de su tamaño o 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 buen rendimiento atraen y retienen a los usuarios mejor que los que tienen bajo rendimiento. Los sitios deben enfocarse en aplicar optimizaciones en función de las métricas de rendimiento centradas en el usuario.
Por qué
La velocidad es fundamental para que los usuarios usen tu app. De hecho, como los tiempos de carga de la página van de un segundo a diez segundos, la probabilidad de que un usuario rebote aumenta un 123%. El rendimiento no se detiene con el evento load. Los usuarios nunca deberían preguntarse si se registró o no su interacción (por ejemplo, hacer clic en un botón). El desplazamiento y la animación deben sentirse fluidos.
El rendimiento afecta toda la experiencia, desde cómo los usuarios perciben tu aplicación hasta cómo su rendimiento real.
Si bien todas las aplicaciones tienen necesidades diferentes, las auditorías de rendimiento de Lighthouse se basan en las Métricas web esenciales. Si obtienes una puntuación alta en esas auditorías, será más probable que los 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 obtener información sobre cómo lograr que tu AWP se inicie y se mantenga ágil.
Funciona en cualquier navegador
Los usuarios pueden usar cualquier navegador que elijan para acceder a la app web antes de que se instale.
Por qué
Las apps web progresivas priorizan las apps web, lo que significa que deben funcionar en varios navegadores, no solo en uno de ellos.
Una forma eficaz de hacerlo es, como dijo Jeremy Keith en Diseño web resiliente, identificar la funcionalidad principal, hacer que esa funcionalidad esté disponible 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 la funcionalidad principal 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 implementarla es mediante un formulario HTML que envíe una solicitud POST. Después de compilar eso, puedes mejorar la experiencia con JavaScript para validar formularios y enviar el formulario con AJAX, lo que mejora la experiencia de los usuarios que pueden admitirlo.
Ten en cuenta que tus usuarios experimentarán tu sitio en un espectro de dispositivos y navegadores. No se puede orientar al extremo superior del espectro. Con la detección de funciones, podrás ofrecer una experiencia utilizable para la mayor cantidad de usuarios potenciales, incluidos aquellos que usan navegadores y dispositivos que podrían no existir en la actualidad.
Cómo
Resilient Web Design de Jeremy Keith es un excelente recurso en el que se describe cómo abordar el diseño web en esta metodología progresiva entre navegadores.
Lecturas adicionales
- Cómo comprender las mejoras progresivas de List Apart es una buena introducción al tema.
- La guía 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.
- MDN tiene un artículo titulado Implementa la detección de funciones que habla sobre cómo detectar una función con consultas directas.
Se adapta a cualquier tamaño de pantalla
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 están disponibles en una variedad de tamaños, y los usuarios pueden usar tu app en una variedad de tamaños, incluso en el mismo dispositivo. Por lo tanto, es fundamental que te asegures de que el contenido no solo se ajuste al viewport, sino que también se puedan usar todas las funciones y el contenido del sitio 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. El contenido se puede reorganizar en diferentes tamaños de viewport y debe estar allí, de una forma u otra. De hecho, como Luke Wroblewski afirma en su libro Mobile First, comenzar de a poco y aumentarlo al revés, en lugar de viceversa, 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. En una pantalla de 320 x 480 píxeles, no hay espacio para elementos innecesarios y superfluos. Tienes que priorizar.
Cómo
Hay muchos recursos sobre diseño responsivo, incluido el artículo original de Ethan Marcotte, una colección de conceptos importantes relacionados con este, así como libros y charlas en gran cantidad. Para limitar este análisis a los aspectos de contenido del diseño responsivo, puedes profundizar en el diseño que prioriza el contenido y en los diseños responsivos centrados en el contenido. Por último, aunque se centra en los dispositivos móviles, las lecciones de Seven Deadly Mobile Myths de Josh Clark son tan relevantes para las vistas pequeñas de sitios responsivos como para los dispositivos móviles.
Proporciona una página sin conexión personalizada
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 predeterminada del navegador.
Por qué
Los usuarios esperan que las apps instaladas funcionen independientemente del estado de conexión. Una app específica de la plataforma nunca muestra una página en blanco cuando está sin conexión, y una app web progresiva 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 haya almacenado 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 previamente en caché una página personalizada sin conexión para usarla más adelante. Si un usuario se desconecta, puedes responder con la página sin conexión personalizada que se prealmacena en caché. Puedes seguir nuestra muestra de página sin conexión personalizada para ver un ejemplo en acción y aprender a implementarla por tu cuenta.
Se puede instalar
Los usuarios que instalan o agregan apps a sus dispositivos suelen interactuar más con ellas.
Por qué
La instalación de una app web progresiva permite tener el aspecto y el comportamiento de todas las demás apps instaladas. Se inicia desde el mismo lugar en que los usuarios inician sus otras apps. Se ejecuta en su propia ventana de app, independiente del navegador, y aparece en la lista de tareas, al igual que otras apps.
¿Por qué querrías que un usuario instale tu AWP? La misma razón por la que querrías que un usuario instale tu app desde una tienda de aplicaciones. Los usuarios que instalan tus apps son el público más participativo y tienen mejores métricas de participación que los visitantes típicos, a menudo al mismo nivel que los usuarios de la app en dispositivos móviles. Estas métricas incluyen más visitas repetidas, tiempos más largos en tu sitio y porcentajes de conversiones más altos.
Cómo
Puedes seguir nuestra guía instalable para obtener información sobre cómo hacer que tu AWP se pueda instalar, cómo probar que se pueda instalar y también intentar hacerlo por tu cuenta.
Lista de tareas para una app web progresiva óptima
Para crear una app web progresiva verdaderamente excelente, que parezca la mejor de su clase, necesitas más que solo la lista de tareas principal. La lista de tareas óptima para la app web progresiva consiste en 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 potente.
Proporciona una experiencia sin conexión.
Si no se requiere conectividad de forma estricta, la app funciona de la misma manera sin conexión que en línea.
Por qué
Además de proporcionar una página personalizada sin conexión, los usuarios esperan que las apps web progresivas se puedan usar sin conexión. Por ejemplo, las apps de viajes y aerolíneas deben tener los detalles de los viajes 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 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 están sin 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 que los usuarios trabajen sin conexión, deberás hacer que el contenido esté disponible y se adapte a los contextos sin conexión. Además, puedes usar IndexedDB, un sistema de almacenamiento NoSQL 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 con el servidor hasta que vuelvan a tener una conexión estable. También puedes utilizar service workers para almacenar otros tipos de contenido, como imágenes, archivos de video y archivos de audio, para usarlos sin conexión. Desde una perspectiva de la experiencia del usuario, puedes usar pantallas de esqueleto que les brinden a los usuarios una percepción de velocidad y contenido durante la carga, que luego pueden recurrir al contenido almacenado en caché o un indicador de sin conexión, según sea necesario.
Es totalmente accesible.
Todas las interacciones del usuario cumplen con los requisitos de accesibilidad de WCAG 2.0.
Por qué
En algún momento de su vida, la mayoría de las personas querrán aprovechar tu AWP de una manera que está cubierta por los requisitos de accesibilidad de WCAG 2.0. La capacidad de las personas para interactuar con tu AWP y comprenderla existe en un amplio espectro, y sus necesidades pueden ser temporales o permanentes. Cuando haces que tu AWP sea accesible, te aseguras de que sea accesible 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
deben hacerse manualmente. 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 recrearlos por tu cuenta, por ejemplo, elementos a y button. Esto garantiza que, cuando necesites compilar una funcionalidad más avanzada, se cumplan las expectativas accesibles (como cuándo usar flechas en lugar de pestañas).
A11Y Nutrition Cards ofrece excelentes consejos sobre algunos componentes comunes.
Se pueden descubrir a través de la búsqueda.
Tu AWP se puede descubrir mediante 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 del sitio web proviene de la búsqueda orgánica. Para que los usuarios encuentren tu AWP, es fundamental que te asegures de que existan URLs canónicas para el contenido y que los motores de búsqueda puedan indexar tu sitio. Esto es especialmente cierto cuando se adopta la renderización del cliente.
Cómo
Para comenzar, 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 del motor de búsqueda en Lighthouse para depurar y corregir los problemas de visibilidad de tu AWP. También puedes usar las herramientas para webmasters de Bing o Yandex, y considera incluir datos estructurados con esquemas de Schema.org en tu AWP.
Funciona con cualquier tipo de entrada
Tu AWP se puede usar de igual manera con un mouse, un teclado, una pluma stylus o un toque.
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. Igual de importante, los métodos de entrada no deben depender del tamaño de la pantalla, lo que significa que las viewports grandes deben ser compatibles con pantallas táctiles, y las pequeñas, ser compatibles con teclados y mouses. Asegúrate de que tu aplicación y todas sus funciones admitan el uso de cualquier método de entrada que el usuario elija utilizar. Cuando corresponda, también debes mejorar las experiencias para permitir controles específicos de entrada (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 la función táctil y 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 (que es bueno para la accesibilidad). Si incluyes interacciones que se activan cuando se coloca el cursor sobre un elemento, asegúrate de que también se puedan activar cuando se hace clic o se presiona.
Proporciona contexto para las solicitudes de permiso
Cuando solicites permiso para usar APIs potentes, proporciona contexto y pregunta 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 para interrumpir a los usuarios porque suelen estar relacionadas con funciones potentes que requieren su aceptación. Si activas estos mensajes sin contexto adicional, como cuando se carga una página, es menos probable que los usuarios acepten esos permisos y desconfíen de ellos en el futuro. En cambio, solo activa esos mensajes después de proporcionar al usuario una justificación en contexto del motivo por el que necesitas ese permiso.
Cómo
El artículo Permission UX y el artículo The right Ways to Ask User for Permissions (Las formas correctas de solicitar permisos a los usuarios) de UX Planet son buenos recursos para comprender cómo diseñar instrucciones de permisos que, si bien se enfocan en los dispositivos móviles, se aplican a todas las AWP.
Sigue las prácticas recomendadas para un código en buen estado
Mantener tu base de código en buen estado hace que sea más fácil cumplir tus objetivos y entregar 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 hace que sea más fácil entregar nuevas funciones que cumplen con los otros objetivos establecidos en esta lista de tareas.
Cómo
Hay varias verificaciones de prioridad alta para garantizar una base de código en buen estado: evitar el uso de bibliotecas con vulnerabilidades conocidas, asegurarte de no usar APIs obsoletas, quitar los antipatrones web de tu base de código (como usar document.write() o tener objetos de escucha de eventos de desplazamiento no pasivos) e incluso programar de manera defensiva para garantizar que tu AWP no se dañe si no se cargan las estadísticas u otras bibliotecas de terceros. Considera solicitar un análisis de código estático, como el análisis con lint, y realizar pruebas automatizadas en varios navegadores y canales de versiones. Estas técnicas ayudan a detectar errores
antes de que lleguen a producción.