Progressive Web App Star Wars Heroes

Introducción

Esta web app permite buscar información sobre los personajes de Star Wars.

Es una Progressive Web App (PWA) que cuenta con soporte 100% offline. Es decir, todos los usuarios reciben la misma experiencia, aún cuando sus condiciones de conexión a internet son limitadas o nulas.

Adicionalmente puede ser instalada en cualquier dispositivo y simula las funcionalidades de una app nativa para los usuarios.

Rol y tareas

-Front-End Developer

Tecnologías usadas

El principal foco de este proyecto estuvo puesto en la implementación de las funcionalidades de PWA y el uso de buenas prácticas de React.

• 1.

  Vite --> Para iniciar el proyecto y generar los builds (Bundling)

• 2.

  React + TypeScript --> Como herramientas principales (framework + lenguaje)

• 3.

  React-Router-Dom --> Para el routing

• 4.

  Emotion + Styled Components --> Para los estilos

• 5.

  VitePWA --> Plugin que encapsula las herramientas necesarias para trabajar con PWAs en el entorno de Vite. De fondo utiliza Workbox como principal dependencia para el trabajo con Service Workers.

• 6.

  Figma --> Para los diseños de referencia

• 7.

  SWAPI API --> Para la obtención de la data de Star Wars

Destacado

Este desafío me permitió explorar funcionalidades de la web que no conocía. Poder transformar una app para que funcione offline, trabajar con Service Workers para interceptar y redirigir las peticiones HTTPS según distintas estrategias y gestionar el almacenamiento de assets en el caché, fueron aprendizajes clave de este desarrollo.

Implementar las funcionalidades de Workbox y coordinarlas con el plugin de VitePWA también me dio los conocimientos necesarios para transformar cualquier app de React en una Progressive Web App.

Aprendizajes

Para desarrollar este proyecto tuve que ahondar en la documentación de varias tecnologías que no había utilizado hasta el momento. Sin embargo, en el lapso de 1 semana el proyecto estaba funcionando e implementado como PWA.

Para mi fue un gran logro poder trasladar todo lo aprendido sobre Progressive Web Apps a un proyecto concreto en tiempo record. Además de animarme a usar herramientas no tan habituales para solucionar el problema propuesto.

Adicionalmente me gustaría destacar dos recursos que me parecieron clave para poder llegar al objetivo: primero, el curso de PWA realizado por Google que se encuentra en web.dev, y segundo, el curso de aplicaciones offline ofrecido por Udacity. Ambos materiales fueron de consulta y apoyo a lo largo de esta prueba técnica, y de más está decir que me dejaron aprendizajes para aplicar a proyectos futuros.