Guía de buenas prácticas y optimización PWA

Las aplicaciones web progresivas (PWA) pueden instalarse en dispositivos y utilizarse como sitios web tradicionales en navegadores web. Esto significa que las PWA tienen que ser capaces de adaptarse a distintos entornos y a distintas expectativas de los usuarios.

A continuación una lista de las mejores prácticas para ayudar a asegurarnos de que nuestra PWA es tan buena como debe.

Adaptación a todos los navegadores

PWA se basa en tecnologías web. Esto significa que, además de poder instalarse en dispositivos, las PWA también pueden ejecutarse en navegadores web. Para garantizar la compatibilidad, es esencial probar la aplicación en distintos navegadores y sistemas operativos.

Tengamos en cuenta la diversidad de navegadores que pueden utilizar los usuarios y atendamos a un amplio espectro de usuarios potenciales. La detección de funciones nos permite ofrecer una experiencia útil al mayor número posible de usuarios.

La detección de funciones también ayuda a la Mejora Progresiva, una filosofía de diseño que permite ofrecer una gran experiencia al mayor número posible de usuarios.

Con la mejora progresiva, nos centramos en hacer que las funcionalidades básicas de la aplicación funcionen de forma universal utilizando primero la tecnología más sencilla y, a continuación, mejorando la experiencia para los dispositivos compatibles.

Por ejemplo, gestionar el envío de formularios con el elemento HTML <form> significa que el formulario funcionará en todos los navegadores, incluidos los que no admiten JavaScript. A continuación, podemos mejorar progresivamente el formulario añadiendo validación en el lado del cliente y gestión de envíos basada en JavaScript para mejorar la experiencia en dispositivos compatibles.

Se adapta a todos los dispositivos

Al igual que es importante probar la aplicación en distintos navegadores, las pruebas en distintos dispositivos garantizan que la aplicación sea accesible para el mayor número posible de usuarios.

El diseño responsivo es crucial para las PWA, ya que garantiza que el contenido sea accesible en cualquier tamaño de pantalla. Los usuarios deben poder acceder a todas las funciones y contenidos independientemente del tamaño de la pantalla de su dispositivo. Al reorganizar el contenido en diferentes tamaños de pantalla, podemos dar prioridad a los datos y acciones importantes.

Nos aseguraremos de que los usuarios puedan interactuar con la aplicación independientemente de cómo accedan al contenido. Aceptemos teclado y ratón, así como métodos de entrada táctiles o con lápiz óptico y que se puede acceder a todas las funciones de la aplicación a través de cualquier método de entrada.

Por último, utilicemos elementos HTML semánticos en lugar de recrear botones propios o elementos de formulario, ya que los elementos HTML semánticos admiten todos los métodos de entrada del usuario desde el primer momento.

Ofrecer función offline

Los usuarios de aplicaciones instaladas esperan que funcionen siempre, incluso cuando están conectados a una red lenta o poco fiable o cuando su dispositivo está completamente desconectado.

Página offline personalizada

Como mínimo, la PWA debería proporcionar una página offline personalizada que informe al usuario de que está offline en lugar de mostrar la página genérica de error del navegador. Una página offline personalizada proporciona una experiencia más consistente en todos los navegadores y dispositivos y mantiene al usuario comprometido con la aplicación.

Podemos proporcionar una página offline personalizada utilizando un service worker que intercepte las peticiones de red y responda con la página offline personalizada cuando el usuario esté desconectado.

Funcionamiento offline

Para ir más allá y ofrecer una experiencia similar a la de una aplicación, la PWA debe funcionar cuando el usuario no esté conectado. Esto significa que el usuario puede seguir utilizando algunas, y preferiblemente todas, las funcionalidades de la app incluso cuando no está conectado.

Imaginemos lo siguiente: el usuario redacta un correo electrónico largo y pulsa “Enviar”, sin darse cuenta de que ha perdido la conectividad. Como la aplicación funciona sin conexión, el correo se guardará localmente y se enviará automáticamente cuando el dispositivo vuelva a estar online.

Enlaces profundos

Los enlaces profundos son hipervínculos que apuntan a páginas específicas dentro del dominio de la aplicación. Por ejemplo, la página de inicio de puede estar disponible en https://example.com/, pero también puede enlazar a la página de un producto específico en https://example.com/products/123.

La posibilidad de referirse a cualquier recurso mediante una URL única es una de las características más potentes de la web. Al estar construidas sobre tecnologías web, las PWA pueden, y deben, aprovechar esta característica.

Hacer que las diferentes secciones de la aplicación estén disponibles a través de URL’s únicas permite a los usuarios marcar, navegar directamente y compartir contenido específico dentro de la aplicación. También permite a los motores de búsqueda indexar el contenido de la aplicación y facilitar su localización a través de búsquedas web.

Que sea rápida

Los usuarios no esperan lo mismo de las aplicaciones instaladas que de los sitios web. Esperan que los sitios web tarden en cargarse y navegar, sobre todo si la conexión a la red es deficiente. En cambio, esperan que las aplicaciones instaladas sean siempre rápidas y receptivas.

La velocidad a la que la aplicación se carga y ejecuta sus funciones principales desempeña un papel clave en la participación y retención de usuarios. Cuanto más tarde la aplicación en responder, más usuarios la abandonarán.

Existen herramientas, API’s y buenas prácticas que ayudan a medir y mejorar el rendimiento web.

Accesibilidad

La accesibilidad es crucial para garantizar que todo el mundo pueda utilizar aplicaciones, independientemente de sus capacidades o del dispositivo que utilicemos para acceder a ellas. La accesibilidad garantiza que el mayor número posible de personas pueda utilizar las aplicaciones. La ley también exige accesibilidad. Además, la accesibilidad suele mejorar la experiencia de usuario de todo el mundo.

Ofrecer una experiencia similar a la de una aplicación nativa

Integración con el sistema operativo

Los usuarios esperan que las PWA instaladas se comporten como cualquier aplicación instalada específica de una plataforma. Para ofrecer la experiencia similar a la de una aplicación que esperan los usuarios, integremos la aplicación con el sistema operativo de alguna manera. Por ejemplo:

• • Utilizando la API de notificaciones para enviar notificaciones al dispositivo del usuario.
  • Gestionando los archivos con el miembro del manifiesto de la aplicación web file_handlers.
  • Mostrar insignias en el icono de la aplicación.
  • Permitir compartir datos entre aplicaciones.

Muchos de los miembros del manifiesto de la aplicación web pueden utilizarse para personalizar la forma en que se muestra la aplicación en el dispositivo del usuario e integrarse más profundamente en el sistema operativo.

Aspecto de la aplicación

Los usuarios instalan aplicaciones para obtener una experiencia más centrada que la que obtienen de los sitios web y realizar tareas de forma más eficiente. Esperan que las aplicaciones sean más ágiles, menos recargadas y que se centren en las tareas más importantes.

Debemos asegurar que la PWA ofrece una experiencia similar a la de una aplicación teniendo en cuenta las siguientes directrices:

• Utilizar un modo de visualización independiente para dotar a su aplicación de su propia ventana dedicada.
• Definir el icono de la aplicación.
• Detectar el tema preferido del usuario con la función prefers-color-scheme media y adaptemos el tema de la aplicación en consecuencia.
• Personalizar el tema y los colores de fondo de la aplicación para ofrecer una experiencia más pulida que se parezca más a una aplicación nativa.
• Despejar el contenido y centrarnos en las tareas más importantes que la aplicación permite realizar a los usuarios. Esto puede significar eliminar los grandes encabezados y pies de página que se encuentran tradicionalmente en los sitios web y sustituirlos por un menú.
• Utilizar la fuente system-ui font-family para que el contenido parezca más nativo y se cargue más rápido sin necesidad de que los usuarios descarguen una fuente personalizada.