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 estrategias principales y óptimas. listas de tareas y recomendaciones para guiarte.
Lista de tareas principales de la app web progresiva
La lista de tareas de Progressive Web App describe qué hace que una app se pueda instalar y y que todos los usuarios puedan usar, sin importar su tamaño o 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 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 no deberían preguntarse
si su interacción (por ejemplo, hacer clic en un botón)
está registrado o no. El desplazamiento y la animación deben ser fluidos.
El rendimiento afecta toda tu experiencia, tanto en la forma en que tu app
se comportan y cómo los 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 Progressive Web Apps 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 Diseño web resiliente, identificar las funciones principales y ponerlas a disposición utilizando la tecnología más simple posible y, luego, mejorando la la experiencia del usuario 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
un formulario HTML que envía 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 detección de funciones para brindar una experiencia útil la variedad de usuarios potenciales, incluidos aquellos que utilizan navegadores y dispositivos que todavía no existen.
Cómo
Resilient Web Design de Jeremy Keith es un recurso excelente que describe cómo pensar en el diseño web en esta metodología progresiva entre navegadores.
Lecturas adicionales
- El artículo Understanding Progressive Enhancement de A List Apart es una buena introducción al tema.
- Smashing Magazine Mejora progresiva: ¿qué es y cómo se utiliza? ofrece una introducción práctica y enlaces a temas más avanzados.
- MDN Cómo implementar la detección de funciones en este artículo, se explica cómo detectar una función mediante la consulta directa.
Los usuarios pueden usar tu AWP en cualquier tamaño de pantalla y todo su contenido se disponibles 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 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 todos deberían estar ahí, de una manera o con el otro. 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 en solo los datos y las acciones más importantes en una aplicación. Simplemente, no hay espacio en una pantalla de 320 x 480 píxeles o de terceros. Debes priorizar.
Cómo
Hay muchos recursos sobre el diseño adaptable, incluido el original artículo de Ethan Marcotte, un colección de conceptos importantes relacionados con él, así como libros y charlas innumerables. 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 al final. 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 no tiene conexión, y una AWP nunca debe mostrar la página sin conexión predeterminada del navegador. Proporcionar una experiencia personalizada sin conexión, tanto cuando un usuario navega a un URL que no se almacenó en caché y cuando un usuario intenta utilizar una función que requiere 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 prealmacenar en caché
una página personalizada sin conexión para mostrar cuando un usuario se desconecta; 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 aplicación web progresiva permite que se vea, se sienta y se comporte como todas las demás apps instaladas. Se lanzó desde el mismo lugar donde los usuarios lanzan sus otras aplicaciones. 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, veces más tiempo en su sitio y porcentajes de conversiones más altos de lo habitual visitantes.
Cómo
Sigue nuestra guía instalable. para obtener más información sobre cómo hacer que tu AWP se pueda instalar.
Lista de tareas óptima para apps web progresivas
Para crear una AWP verdaderamente excelente, que se sienta como la mejor aplicación de su clase, se necesita más que solo la lista de verificación central. 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 no se requiere conectividad de forma estricta, tu app funciona de la misma 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 AWP utilizables sin conexión. Por ejemplo, las apps de viajes y aerolíneas deben incluir las categorías de detalles y tarjetas de embarque ya estén disponibles sin conexión. Las apps de música, video y podcasts deben permitir la reproducción sin conexión. Redes sociales las apps 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 brinda una verdadera experiencia para los usuarios.
Cómo
Después de determinar qué funciones esperan los usuarios para trabajar sin conexión, tendrás que hacer que tu contenido esté disponible y se adapte al contenido sin conexión diferentes. Puedes usar IndexedDB, un sistema de almacenamiento NoSQL integrado en el navegador para almacenar y recuperar datos sincronización en segundo plano para permitir que los usuarios realicen acciones sin conexión y aplazar las comunicaciones del servidor hasta que el usuario vuelva a tener una conexión estable. También puedes usar Service 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 a los usuarios autenticados. 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 cubiertos por las WCAG 2.0 los requisitos de accesibilidad. 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
de W3C
Introducción a la accesibilidad web
es un buen punto de partida. 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 recrearlos
por tu cuenta, por ejemplo, a y button
o de terceros. 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 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. Asegurarte de que existen URLs canónicas para el contenido y que los motores de búsqueda pueden indexar es fundamental 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 auditorías de optimización por motores de búsqueda en Lighthouse para depurar y corregir problemas de visibilidad con tu AWP. 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. Al incluir interacciones que se activan cuando se coloca el cursor sobre ellas, asegurarse de que también se pueden activar al hacer clic o presionar.
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 intencionalmente para interrumpir a los usuarios ya que suelen estar relacionadas con funciones potentes que se deben habilitar. 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 esos mensajes solo después proporcionar una justificación en contexto al usuario para explicar por qué lo necesitas 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é
Hay mucho que hacer para compilar una aplicación web moderna. Conservar tu aplicación actualizada y el buen estado de la base de código para ofrecer nuevas funciones que cumplan los demás objetivos establecidos en esta lista de verificación.
Cómo
Existen varias verificaciones de prioridad alta para garantizar un buen estado codebase:
- 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 puede codificar de manera defensiva para asegurarse de que su AWP no falle Analytics u otras bibliotecas 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. Estos para detectar errores antes de que lleguen a producción.