A día de hoy, una de las variables que puede decidir si nuestro negocio tiene éxito o no es la experiencia de usuario, y para mejorarla, llegan las PWA o Progressive Web Apps. La experiencia de usuario es lo que, en última instancia, se traducirá en visitas y/o popularidad de nuestro sitio web. Debido a ello, es importante procurar hacer la navegación sencilla y lo más usable posible.
Es cierto que las PWA no son nada nuevo, pero con el paso del tiempo, continúa adquiriendo relevancia y popularidad entre los usuarios. En el caso de Windows, se soportan de forma nativa.
Además, las PWA se utilizan mucho en el nuevo ámbito de experiencia, la Experiencia Total. ¿No sabes qué es? ¡Nosotros ya te lo hemos contado en nuestro blog!
¿Qué son las PWA?
Las PWA o Progressive Web Apps son soluciones basadas en la web que incorporan ciertas características para parecerse a app nativas de smartphones o tablets. Cada uno de los proyectos es independiente, y la adaptación web-app se da progresivamente.
Este tipo de aplicaciones utiliza APIs y funciones emergentes de los navegadores, al mismo tiempo que una estrategia de mejora progresiva que facilita la adaptación del usuario.
¿Qué es una app nativa?
Se trata de una aplicación que está diseñada específicamente para el sistema operativo que la va a utilizar. Un claro ejemplo son las aplicaciones de iOS. Estas aplicaciones, además de ser más eficientes, son capaces de respetar el aspecto y funcionamiento del sistema operativo en el que se usan.
Ventajas de las PWA
- No se descargan mediante Google Play o Apple Store. Lo único que requieren es un navegador y conexión a internet.
- Cualquier usuario puede hacer uso de ella desde la pantalla de inicio de su dispositivo. Esto hace que los usuarios puedan continuar navegando por tu web aunque no tenga conexión disponible.
- Reducen significativamente los tiempos de carga y el ancho de banda.
- Las actualizaciones se realizan solo con el contenido añadido, y además, son automáticas.
- Interfaz más integrada con el dispositivo.
- Son mucho más eficientes, ya que ocupan menos espacio de memoria y consumen menos datos.
- Pueden probarse antes de instalarse.
- Su creación y mantenimiento son más económicos y sencillos.
Claves de las PWA
Podemos definir algunos principios básicos por los que se deben regir las aplicaciones para considerarse PWA. Vamos a enumerarlos:
- Detectables: para que los motores de búsqueda puedan encontrar su contenido.
- Instalables: deben estar disponibles en el launcher o el inicio del usuario.
- Enlazables: para que se puedan compartir mediante una URL.
- Independientes de la red: que puedan funcionar offline.
- Mejora progresiva: con el fin de que sea usable en navegadores anticuados.
- Reconectable: que pueda mandar notificaciones cada vez que hay nuevo contenido.
- Diseño responsive: adaptable a cualquier dispositivo.
- Seguras: que la conexión entre el usuario, PWA y servidor se encuentre protegida ante ataques de terceros.
¿Cómo funcionan las PWA?
A la hora de poner una PWA “a punto” encontramos una serie de elementos que las conforman y permiten que funcionen de forma correcta. ¡Hablemos de ellos!
Contexto seguro (HTTPS)
Las PWA deben servirse a través de una red segura. Siendo más específicos, la mayoría de las funciones de las PWA solo se encuentran disponibles si la aplicación se carga mediante HTTPS.
Y tú, ¿te has planteado desarrollar PWA? ¿Has hecho alguna? ¡Cuéntanoslo en los comentarios!
DOM
Las herramientas PWA se componen de dos partes: el App-Shell, que es la estructura de la página, y el contenido. El contenido puede encontrarse en HTML o en JSON, pero si se usa JSON, hay que tener en cuenta que puede causar problemas de indexación.
Service Workers
Los service workers son uno o varios scripts que se mantienen funcionando en segundo plano y generan una experiencia offline. Para ello, descargan los contenidos necesarios para que la app funcione y generan notificaciones push, entre otras funciones. Además, permiten controlar cómo se manejan tus solicitudes de red y el almacenamiento en caché.
La función principal de los service workers es optimizar la retención de usuarios, es decir, procurar que se queden en nuestra página.
¿Te interesa?
Como usuario, puedes comprobar si un sitio utiliza service workers mediante Billings Gazette. Para ello, solo hay que entrar en la página, hacer click con el botón derecho e inspeccionar. Luego nos movemos a la pestaña “Application” y “Service Workers”. Ahí, podremos ver si hay service workers activos, qué archivos descargan…
Manifiesto
En primer lugar, hablaremos del manifiesto de la aplicación, que se encuentra en formato JSON y que permite controlar cómo se ve la PWA en áreas donde generalmente se usan apps nativas.
Este manifiesto contiene:
- Name: nombre de la app.
- Description: descripción de la app.
- Icons: iconos con distintas resoluciones para fomentar la adaptabilidad.
- Start url: URL de inicio al abrir la app.
- Display: varias configuraciones para mejorar la adaptabilidad.
- Orientation: elección de si la app se visualizará en modo retrato o modo paisaje.
- Theme_color: color de la barra superior.
- Background_color: color de la pantalla mientras carga la app.
Related Posts
3 de marzo de 2023
1 de agosto de 2022
