Librerías y herramientas para crear PWA

En el mundo actual, los usuarios demandan aplicaciones rápidas, accesibles y que funcionen en cualquier dispositivo. Aquí es donde entran en juego las Progressive Web Apps (PWA). Para construirlas, es necesario conocer y seleccionar adecuadamente las herramientas, frameworks y librerías que harán más sencillo el desarrollo.

Este post es una introducción breve y práctica que te permitirá dar tus primeros pasos en la identificación de estos recursos fundamentales.

Objetivo de aprendizaje

Al finalizar este tema, el estudiante será capaz de identificar y diferenciar herramientas, frameworks y librerías esenciales para la creación de PWA, comprendiendo su utilidad dentro del desarrollo web moderno.

Actividades de aprendizaje

Ahora que conoces el punto de partida, te invitamos a realizar las siguientes actividades:

1. Lectura del caso de estudio: Descubre la historia de Clara y cómo eligió las librerías correctas para transformar su proyecto en una PWA exitosa. Clic aquí si prefieres escuchar el caso de estudio. Después de leer o escuchar el caso responde las siguientes preguntas de reflexión:
   • ¿Qué riesgos existen al elegir frameworks y librerías sin una estrategia clara?
   • ¿Cómo puede una herramienta de auditoría como Lighthouse cambiar la visión de un proyecto?
   • ¿Qué factores personales (confianza, paciencia, resiliencia) influyen en la adopción de nuevas tecnologías?
   • ¿De qué manera un mal rendimiento puede afectar no solo la parte técnica, sino también la reputación de un proyecto?
   • ¿Cuándo conviene construir desde cero y cuándo es mejor optimizar lo existente?
   • ¿Cómo podemos equilibrar la innovación con la estabilidad en el desarrollo de una PWA?
2. Actividad práctica: Explora en código cómo integrar un framework y una librería en una PWA inicial. El entregable de está actividad debe contener:
   • Repositorio con el código (GitHub/GitLab).
   • PWA local que:
     • Se puede “instalar” desde el navegador (prompt o botón).
     • Funciona offline (contenido básico accesible sin conexión).
     • Pasa pruebas básicas de Lighthouse para la categoría PWA.
   • Capturas: pantalla de la app instalada y un reporte Lighthouse (HTML o screenshot).
3. Actividades de reforzamiento:
   • Sopa de letras: Encuentra los conceptos clave sobre PWA.
   • Crucigrama: Pon a prueba tu comprensión de los frameworks, librerías y herramientas vistas.
4. Actividad Extra: Para finalizar, realiza una busqueda profunda en internet sobre las herramientas que existen actualmente para el desarrollo de PWA y que son Open Sources. Luego completa la siguiente tabla

¡Tu aprendizaje comienza aquí y se fortalece con la práctica!