¿Qué es una Aplicación Web Progresiva (PWA) y cómo hacer una?

En este artículo te voy a contar qué es una PWA (Progressive Web Application) y qué ventajas tiene con respecto a una app común y corriente. Por el momento, quédate con esta idea: una PWA es un sitio web que se ve y se comporta como una aplicación móvil.

En el Fintualist nos gusta más la práctica que la teoría, así que te lo vamos a mostrar con un ejemplo: la app del Fintualist. En principio, te vamos a pedir que la instales (te dejamos dos videos, uno para android y otro para iOS), pero si prefieres leer el post primero, no hay problema.

¿Cómo instalar la PWA del Fintualist?

Android:

1. Entra a la web del Fintualist desde el navegador de tu teléfono: www.fintualist.com.
2. Te debiera ofrecer “Agrega Fintualist a la pantalla principal”, “Instalar app” o algo similar. Si no te ofrece, anda a los tres puntitos del navegador para ver más opciones, y estará la opción de instalar la aplicación o agregar a tu pantalla principal (varía según cada dispositivo).
3. Clickea en instalar.
4. ¡Listo!

iOS

1. Entra a la web del Fintualist desde el navegador de tu teléfono: www.fintualist.com.
2. Apreta el botón de caja con las opciones para compartir (el cuadrado con la flechita para arriba).
3. Clickea en “Agregar a Inicio”.
4. ¡Listo!
   

Ahora que está instalada, puedes irte a la app y, por ejemplo, buscar este artículo. Quizás te estás preguntando ¿de qué sirve todo esto?

Nosotros en el Fintualist también partimos por una pregunta: ¿qué porcentaje de las personas leen el Fintualist desde su celular? El 78% de las lecturas de nuestro sitio son desde el celular. No te voy a mentir: el número me sorprendió. Sabía que era alto pero nunca tanto. Con esa información a la mano, la conclusión más evidente es que la experiencia desde el celular tiene que ser bacán, la lectura tiene que ser fácil, que no existan elementos que te desvíen del artículo, que la letra se deje leer, que la navegación sea simple, etc.

Lo primero que pensamos fue “hagamos una app”. Pero la respuesta no era directamente “ok”, porque el Fintualist es un equipo chico y no tenemos un desarrollador propiamente tal para hacer este tipo de proyectos. Intenté averiguar cómo hacer una app rápido y fácil. Pensé por un tiempo que  la respuesta iba a provocarme una decepción: por algo las empresas invierten millones de dólares en diseñar y desarrollar aplicaciones, debía ser algo bastante complejo. Por suerte, vi la luz: una Progressive Web Application (PWA)

¿Qué es una PWA o Progressive Web Application?

Las PWA, como su nombre lo indica, son una aplicación de software que se entrega progresivamente desde la web. Mediante herramientas de HTML, CSS y JavaScript te permiten agregar funcionalidades comunes de una aplicación móvil nativa, como la posibilidad de instalar la web en tu dispositivo móvil, navegar sin conexión y recibir notificaciones push. Una vez publicadas, las PWA son compatibles con los navegadores y sistemas operativos más comunes, e incluso se pueden empaquetar y publicar para su descarga desde la AppStore de iOS o la PlayStore de Android.

Como te decía al principio, una PWA es un sitio web que se comporta como una aplicación móvil. Un sitio disfrazado de app.

¿Cuáles son los beneficios de una PWA?

• Bajo costo de desarrollo.
• Rápida implementación.
• Mejor rendimiento de tu página web, carga más rápido y funciona sin conexión gracias al contenido en caché.
• Permite relacionarse directamente con el usuario gracias a las notificaciones push.
• Distribución ágil: sólo necesitas un navegador para poder instalarla en tu dispositivo.
• Menos uso de espacio de almacenamiento que una aplicación nativa.

¿Qué se necesita para hacer una PWA?

• HTTPS: que tu web tenga este protocolo de seguridad para encriptar la comunicación entre el servidor y el cliente. Actualmente la mayoría de los proveedores de hosting para páginas web cuentan con este protocolo, pero si no, existen formas fáciles y gratis de implementarlo. Puedes ver más información acá.
• Service Worker: es un archivo JavaScript que ejecuta el navegador en segundo plano y permite guardar, modificar y responder a todas las peticiones que hace el cliente, con o sin conexión, a la web que pertenece. El service worker vive en la raíz del código de tu web,y debe estar registrado por defecto en las plantillas de HTML. Son archivos más o menos estándar pero te recomiendo que veas bien qué vas a cachear, porque de otra forma, puedes mostrarle al cliente contenido desde caché, que no está actualizado. La idea es que encuentres el balance entre la carga rápida y sin conexión, pero acceso a toda la información que tiene la web. Puedes ver más información acá.
• Manifiesto: es un documento en formato JSON que contiene toda la información para que tu PWA sea instalable. Este archivo vive en la raíz del código de tu web, y debe estar registrado por defecto en las plantillas de HTML. Contiene todos los detalles de cómo se va a ver y comportar la app, su nombre, íconos, descripción, etc. Puedes ver más información acá.
  

Dos herramientas que te recomiendo para que verifiques cómo va tu web y qué le falta para ser una PWA son Lighthouse de Google Chrome y PWAbuilder, ya que ambas te permiten ver el estado de tu página y cómo cumple con los requisitos para ser una app instalable, o no.

PWAbuilder incluso te da ejemplos de documentos para tu manifiesto o service worker

Con lo anterior, y un poco de CSS para definir los estilos de la versión móvil de tu web ya tienes todo para publicar tu PWA y que los navegantes de internet la puedan instalar. Existen muchos tutoriales para todos los proveedores de hosting de páginas web sobre cómo implementar esto en el código, ya sea wordpress, ghost o simplemente tu propia implementación, así que si te interesa solo debes googlear un poco.

Por último, las PWA se pueden empaquetar y descargar para publicar en la AppStore y Play Store, y que se puedan descargar como una aplicación nativa. ¡Yo lo hice para probar y se puede!

Como puedes ver, desarrollar una PWA es una forma fácil y rápida de hacer una aplicación móvil instalable. Solo ha pasado un mes desde que hice la pregunta y ya tenemos una aplicación, con el feeling de una app y en donde podrás leer nuestros artículos cuando pierdas la conexión o sin tener que entrar desde tu navegador.