No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
3 Hrs
34 Min
59 Seg

Contenido Bonus: PWA

22/22
Recursos

¿Qué es una aplicación web progresiva (PWA)?

Una aplicación web progresiva, o PWA por sus siglas en inglés, no es una tecnología nueva ni un nuevo framework que debes aprender desde cero. Siguiendo una serie de buenas prácticas, puedes transformar tu página web convencional en una PWA. Esto significa mejorar significativamente la experiencia del usuario, ofreciendo páginas más rápidas y con capacidades avanzadas de interacción.

¿Cómo funciona una PWA sin conexión a internet?

Uno de los aspectos más fascinantes de las PWA es su capacidad para funcionar sin conexión a internet mediante estrategias de pre-caché. Así es como funciona:

  • Caché de contenido: Identifica el tipo de contenido que los usuarios podrán necesitar sin conexión y almacénalo por adelantado. Cuando el usuario pierde la conexión, la aplicación puede acceder a este contenido desde la caché.
  • Sistema de Service Workers: Los Service Workers actúan en segundo plano, gestionando las peticiones de red y almacenando recursos localmente.
  • Feedback al usuario: Es importante mostrar al usuario que está sin conexión y que algunas características pueden no estar disponibles, aunque lo esencial esté accesible.

¿Por qué es crucial la velocidad de las PWA?

La rapidez es esencial en las PWA, no solo para mejorar la experiencia del usuario, sino también para asegurar un rendimiento óptimo del sitio. Las PWA deben cargar y ser interactivas en menos de dos segundos. Aquí hay algunas consideraciones fundamentales:

  • Interactividad rápida: Si una página tarda más de dos segundos en ser interactiva, puede dar la impresión de mal funcionamiento o retraso de red.
  • Velocidad y rendimiento: Monitoriza constantemente el tamaño y el tiempo de carga de los recursos de tu sitio. Un tiempo prolongado de carga o interacción puede desmotivar a los usuarios.
  • Pruebas periódicas: Emplea herramientas de auditoría para evaluar el rendimiento y detectar oportunidades de mejora.

¿Qué facilidades adicionales ofrecen las PWA?

Además de la capacidad offline y velocidad, las PWA ofrecen funcionalidades que mejoran aún más la experiencia del usuario:

  • Instalación como aplicación nativa: Las PWA permiten a los usuarios descargar un logo tipo de tu página en su dispositivo móvil, facilitando el acceso directo desde la pantalla principal sin necesidad de ingresar al navegador.
  • Personalización de la interfaz de usuario: Permite adaptar la vista del navegador para que parezca una aplicación nativa, mejorando la inmersión del usuario en tu producto.
  • Notificaciones push: Puedes enviar notificaciones a los usuarios alertándolos de contenido nuevo o importantes actualizaciones aún cuando no estén navegando activamente en tu sitio.

Estas características colectivas hacen que una PWA pase de ser una simple página web a convertirse en una herramienta poderosa y dinámica que promete una mejor interacción y satisfacción del usuario. Si estás interesado en transformar tus páginas en PWA, consulta la documentación y recursos que te permitirán seguir estos estándares y aprovechar al máximo estas opciones.

Aportes 19

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Para usar recursos como la precaché o las notificaciones push suelen ser muy usados los Service Workers, hay una clase sobre esto en el curso profesional de JavaScript (Chulada de curso), donde el profesor explica como hacer un Service Worker para páginas offline:D

2 segundo para cargar, 4 segundos donde el usuario “debería” interactuar y 7 segundos donde el usuario “nota o persive” que el sitió se está retrasando.

Progressive Web Apps -> Le da a los usuarios una mejor experiencia de usabilidad

Nunca pensé que en éste curso me explicarían lo esencial que es una “PWA”. Ahora, ya considero más éste tema. Gracias. Gran curso.

Una pregunta. Alguien más está teniendo problemas con el examen?

Me gusto mucho el curso, gracias Diego por el Bonus. No conocía las PWA.

encontré esta PWA https://demo.retornoescalonado.app/full un ejemplo muy claro a este tema, gracias.

recomiendo el curso profesional de Javascript, es muy bueno y entretenido con nuevas cosas para aprender 😃

felicitaciones por este buen curso, siempre tenemos en frente devtools, pero no sabemos cómo sacarle el mayor provecho, este curso nos abre las puertas a esto !!

Fantástico curso!

La verdad no conocia sobre este tipo de aplicaciones donde aplica las mejores practicas para hacer una pagina mas usable e interactiva con el usuario

1er intento y fallido. 🤔Pero vamos a revisar las dos preguntas fallidas y continuar se ha dicho. 👍

Es increible el concepto de “Progressive Web App”, no sabia de esto pero ahora si me quedo claro como deben ser estas paginas al momento de programarlas sin ningun problema. Gracias Diego.

Un curso muy interesante.

La verdad no tenia claro el concepto de las PWA, gracias Diego. Ahora entiendo con mayor claridad el uso que se le da a los services workers que no me quedo muy claro en el Curso Profesional de Js (solo esa parte, pero muy excelente curso)

No sabia que las PWA, son buena practicas para optimizar los sitios web

Buenísima clase

<h3>22. Contenido Bonus: PWA</h3>

0:47 Pre-caché. Estrategia por medio del manifiesto.

1:55 Una PWA tiene que correr rápido. Una página debe poder generar interacción con el usuario en 2 segundos. Es una buena práctica.

3:19 Creación de un acceso directo al escritorio del dispositivo. Allí podemos customizar toda la vista del navegador para que el usuario no detecte que está en un navegador.

3:55 Generar push notifications.

Enlaces de la clase:
Tu primera Progressive Web App | Web Fundamentals | Google Developers

Igual que existen las aplicaciones para Windows, Mac, Android o iOS, también existen otro tipo de aplicaciones que no dependen de ningún sistema operativo, sino que toman lugar en una página web en un navegador.

Las páginas web de Twitter y Facebook son dos buenos ejemplos de aplicaciones web. En ellas puedes hacer prácticamente lo mismo que en las aplicaciones nativas para Android o iOS, pero sin necesidad de instalar nada: solo necesitas un navegador con conexión a Internet.

La definición es suficientemente ambigua para incluir otros ejemplos que no tienen por qué ser tan complejos como las webs de Twitter o Facebook. Por ejemplo, podrían considerarse aplicaciones web un sitio para convertir divisas y otro para consultar el tiempo, aunque habrá quien difiera y opine que son simplemente páginas web sin más.