Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

PWA - Aplicaciones Web Progresivas: De cero a experto - 2020

Name: PWA - Aplicaciones Web Progresivas: De cero a experto - 2020
Rating: 4.7 (3667 reviews)

Notificaciones PUSH, sincronización sin conexión, modos offline, instalaciones, indexedDB, push server, share y más

Highest Rated

Created byFernando Herrera, {d/t} - DevTalles

Last updated 1/2026

Spanish

What you'll learn

Convertir cualquier aplicación web o página web en una PWA
Crear tu propio Push Server
Recibir Push Notifications a tu aplicación web o página web
Manejar diferentes técnicas para que tu aplicación funcione offline
Postear información inclusive si tu webapp o sitio web esta offline
Conocer a profundidad el Fetch API
Uso de recursos nativos del dispositivo
Y mucho más

Course content

13 sections • 157 lectures • 14h 45m total length

Curso Legacy2:16
Introducción1:01
Mensaje de bienvenida y primeros pasos en las PWA
¿Cómo funcionará el curso?1:48
¿Cómo hacer preguntas?2:50
Es algo obvio para muchos, pero por favor observen este video
Instalaciones necesarias para seguir el curso1:56
Instalaciones recomendadas para que puedan seguir el curso igual que yo
Instalar Git y configuración básica1:47
¡Únete a Nuestra Comunidad de DevTalles en Discord!0:18

Introducción a la sección0:54
Una breve introducción a la sección
Temas puntuales de la sección0:12
Un resumen puntual de los temas que veremos en la sección
¿Qué son las aplicaciones web progresivas?3:47
¿De dónde nacieron, por qué, para que sirven, que son?
¿Por qué construir una PWA?5:39
Una pequeña introducción por qué es importante conocer el tema
Conceptos clave de las PWA9:40
Material de la sección0:13
Aquí les dejo el material de la sección por si desean saber un poco más al respecto

Introducción a la sección1:39
Una breve introducción de lo que veremos en la sección
Temas puntuales de la sección0:21
Una lista de los temas puntuales que veremos a continuación
Inicio del proyecto y recomendación7:21
Aquí comenzaremos el reforzamiento
Promesas 101: Problemática9:33
Esta es una de las problemáticas que hicieron que las promesas nacieran
Resolución del problema usando promesas8:19
Aquí resolveremos el ejercicio anterior utilizando promesas
Manejo de errores en las promesas7:39
Aquí aprenderemos formas de manejar el error en las promesas
Promise All9:01
Promise Race4:38
Como el nombre lo dice, es una carrera para comprobar cual termina primero
Material adicional sobre promesas0:13
Siempre es bueno tener un poco más de información sobre las promesas
Origenes del Fetch - XMLHttpRequest7:01
Esta es la demostración de todo lo que teníamos que hacer para realizar una simple petición HTTP originalmente
Fetch API8:22
Es hora de hablar sobre el Fetch API, la nueva forma de hacer peticiones HTTP
Fetch POST / PUT5:10
Aquí aprenderemos a realizar peticiones POST y PUT utilizando el Fetch API
Fetch Blob6:09
Vamos a obtener una imagen, leerla y mostrarla en pantalla usando el fetch
Response.clone()5:00
Esto es importante saberlo para prevenir posibles errores cuando estemos manejando el cache
Manejo de respuestas y errores5:03
Aprenderemos notas importantes sobre las respuestas
Leer archivos HTML4:25
Aquí aprenderemos a leer archivos de texto, entre los cuales esta incluido el HTML
Actualización menor0:24
Tarea: Reforzamiento sobre las promesas y fetch9:31
Aquí les dejo una tarea para practicar lo aprendido hasta el momento
Documentaciones adicionales0:06
Pueden revisar estos enlaces para conocer más al respecto
Código fuente de la sección0:10
Código fuente de la sección

Introducción a la sección2:56
Breve resumen de la sección
Temas puntuales de la sección0:16
Temas puntuales de la sección
Introducción al Service Worker5:56
Una introducción del Service Worker y ¿qué hace?
Inicio del proyecto - Service Worker básico5:49
Inicio del proyecto, pasos y material adjunto
Instalación del Service Worker10:20
Pasos para la instalación de un Service Worker
Service Worker - Fetch Event11:20
Aquí empezaremos a darle poder al Service Worker
Formas válidas para realizar peticiones desde el evento Fetch5:51
Aquí les mostraré formas válidas o sinónimos para realizar peticiones Fetch
Modificando la respuesta de la petición Fetch4:37
Aquí modificaremos la respuesta que es solicitada desde la aplicación web
Tarea - Interceptar y modificar peticiones3:28
Esta es una pequeña tarea para ponerlos a pensar un poco y que se diviertan a la vez.
Manejo de errores en el Fetch Event11:25
Aquí aprenderemos a manejar errores cuando un recurso no este disponible por varias razones
Nota: Manejo de errores en el Fetch0:12
Código fuente de la sección0:14
Código fuente de la sección
Examen sobre Service Workers

Introducción a la sección1:08
Una breve descripción de lo que veremos en la sección
Temas puntuales de la sección0:18
Temas puntuales de la sección
Inicio del proyecto - Ciclo de Vida y Listeners2:02
Aquí iniciaremos el nuevo proyecto para explicar estos temas
Service Worker: Install4:51
Proceso de instalación del Service Worker
Service Worker: Activate4:00
event.waitUntil( );4:51
Esperar hasta que termine de realizar un trabajo
Service Worker: Fetch6:33
Service Worker: Sync8:30
Sincronización offline y recuperación de conexión
Service Worker: Push6:01
Evento para escuchar cuando recibimos notificaciones PUSH
Código fuente de la sección0:11
Les dejo aquí el código fuente por si lo llegan a necesitar
Examen sobre listeners y ciclo de vida de un Service Worker

Introducción a la sección1:35
Un resumen puntual de lo que veremos en esta sección
Temas puntuales de la sección0:28
Inicio del proyecto y respuesta offline básica7:51
Aquí iniciaremos el proyecto y a la vez trabajaremos con la primera petición offline básica
Respuesta offline HTML String7:32
Aquí responderemos con un html String
Introducción al cache storage16:34
Aquí tendremos una gentil introducción al cache storage
Guardar el APP SHELL a la hora de instalar SW9:56
Estrategia: Cache Only6:44
Quiere decir que no existen peticiones a recursos externos, todo es servido desde el cache
Estrategia: Cache with network fallback11:30
Primero el cache, luego intenta la red
Cache dinámico - Optimizaciones10:20
Aquí hablaremos sobre el cache dinámico y un par de optimizaciones
Limitar el cache dinámico14:03
Estrategia: Network with cache fallback10:49
Estrategia: Cache with network update9:16
Donde el rendimiento es crítico, esta es una opción viable
Estrategia: Cache y Network Race11:52
Esta estrategia brinda la máxima velocidad de respuesta posible
Navegación offline con página personalizada de error8:37
Aquí vamos a poner un problema real, y ver cómo lo podemos solucionar
Mostrar la página offline si no existe la petición en cache6:40
Si no existe en el cache la página web, entonces haremos esto
Borrando versiones viejas del cache7:54
Aquí aprenderemos a borrar versiones viejas que ya no ocuparemos del cache, de forma dinámica
Examen sobre el cache
Código fuente de la sección0:09
Aquí tienen el código fuente por si acaso lo quieren usar para comparar
Documentaciones adicionales0:09
Para seguir expandiendo el conocimiento al respecto

Introducción a la sección2:04
Temas puntuales de la sección0:24
Una lista de los temas que aquí veremos
Inicio del proyecto - Twittor8:19
Aquí comenzaremos a trabajar con un nuevo proyecto, el cual deberemos de desplegar en nuestro dispositivo móvil
Repaso: Configurar SW12:10
Comenzaremos la configuración del service worker y la transformación de una aplicación web común en una PWA
Repaso: Cache con Network Fallback12:16
El archivo Manifest.json11:43
Este es otro archivo sumamente importante para nuestra PWA, y le dice a nuestro dispositivo cómo debe de mostrar nuestra aplicación
Depurar y correr en un dispositivo real11:58
Aquí explicare unos pasos para que puedan depurar su aplicación cuando corre en el dispositivo móvil
Desplegar aplicación en GitHub Pages11:15
Aquí vamos a desplegar la aplicación en GitHub pages para poder observar la verdadera forma de nuestra aplicación
Instalando nuestra PWA en el dispositivo móvil - Android6:22
Así se verá nuestra PWA en un dispositivo Android
Mejorando la apariencia en IOS13:14
Removiendo el Notch de los iPhones5:59
Ahora trabajaremos optimizando un poco más nuestra aplicación en IOS
Notas de Android0:36
Importante
Audits - Lighthouse6:28
Aquí podemos recibir información de cómo va nuestra aplicación, para poder optimizarla
Generadores automáticos del Manifes.json0:21
Esto ayuda mucho a generar estos archivos rápidamente, y algunos hasta generan los íconos.
Código fuente de la sección0:11
Pueden descargar el código fuente de mi aplicación para que lo puedan comparar contra el suyo, en caso de ser necesario

Introducción a la sección1:51
Un breve resumen de lo que veremos en esta sección
Temas puntuales de la sección0:25
Temas puntuales que veremos en la sección
Inicios en indexedDB7:33
IndexedDB es una base de datos local, que se almacena en el navegador web
Manejo de errores e inserción de registros8:45
Aquí aprenderemos a manejar los errores de base de datos y realizar las primeras inserciones de los registros
Código fuente del indexedDB0:09
Les dejo el código del indexedDB, no lo volveremos a tocar en el curso, ya que usaremos PouchDB
PouchDB - Empezando8:17
Aprendiendo a usar PouchDB
Leer registros de la base de datos5:38
Aquí aprenderemos a leer registros de la base de datos
Editar y Borrar TODOS6:27
Aquí aprenderemos a editar y borrar todos... terminaremos nuestra lista de tareas
Tarea: Transformar nuestra TODO APP en una PWA5:38
Aquí tenemos una pequeña tarea que consiste en que nuestra aplicación de TODOS hecha con PouchDB funcione offline
Tarea: Entrenamiento sobre PouchDB4:18
Resolución de la tarea - PouchDB9:48
Aquí vamos a resolver la tarea, espero que lograran terminarla o llegar lo más lejos posible.
Código fuente de la sección0:04
Adjunto el código de la sección por si acaso lo necesitan

Introducción a la sección1:16
Un resumen de lo que veremos en esta sección
Temas puntuales de la sección0:12
Un listado y detalles de lo que aprenderemos en esta sección
Inicio del proyecto y backend server8:59
API REST - Get Mensajes4:24
Crearemos un servicio rest, que nos permita obtener los mensajes de nuestro server
Consumir servicio REST - Mostrar mensajes en pantalla8:03
Vamos a leer los mensajes y mostrarlos en pantalla
Network with cache fallback - Para las peticiones a nuestra API9:34
Aquí vamos a cambiar la implementación de la estrategia, para las peticiones que se realicen a nuestros servicios REST
API REST - Post Mensaje4:41
Vamos a crear el servicio rest, que se encarga de realizar el posteo de un nuevo mensaje al servidor
Envío de la petición POST11:27
Aquí aprenderemos muchas cosas importantes en el envío de un mensaje post.
Interceptar un POST y almacenar en indexedDB10:59
Interceptar información del POST y almacenarlo en indexedDB para posterior almacenamiento
Registrar tarea asíncrona y SYNC del SW12:54
Aquí aprenderemos cómo registrar la tarea asíncrona y procesarla del lado del Service Worker
Disparar posteos cuando hay conexión a internet10:54
Aquí leeremos PouchDB, y todos los registros que tenemos en la base de datos los vamos a postear
Front-End: Detectar cambios de conexión a internet9:35
Aquí aprenderemos una estrategia para saber cuando tenemos o no conexión
Código fuente de la sección0:10
Pueden descargar el código fuente de la sección aquí.

Introducción a la sección1:18
Un resumen de lo que lograremos en esta sección
Temas puntuales de la sección0:23
Un resumen puntual de los temas que cubriremos aquí
Introducción al envío de Push Notifications10:07
Una introducción necesaria para empezar la programación de nuestras PUSH
Inicio del proyecto - Push Notifications3:24
Este es el primer paso para poder enviar notificaciones, y consiste en preguntarle al usuario o bien confirmar si previamente ya aceptó recibir notificaciones
Permisos para notificaciones10:25
Solicitar permiso para las notificaciones
Detalle estético - Mostrar y ocultar botón de las notificaciones4:22
Aquí simplemente haremos una pequeña función para mostrar y ocultar el botón de las notificaciones
Definir los servicios REST necesarios - PUSH - SUBSCRIBE - KEY4:31
Vamos a definir los servicios REST de nuestro backend server, que necesitaremos para poder trabajar las notificaciones
Generar la llave pública y privada8:23
Aquí vamos a generar las llaves para nuestro server
Retornando nuestro KEY de forma segura7:06
Un pequeño paso adicional pero es necesario
Generar la suscripción8:36
Aquí aprenderemos a generar la suscripción de nuestro dispositivo
Enviar la suscripción al servidor - POST11:54
Aquí aprenderemos a recibir en nuestro backend las suscripciones y las almacenaremos para no perderlas cada vez que se reinicia el servidor
Guardar suscripciones en el backend para que sean persistentes8:02
Guardaremos nuestras suscripciones en un archivo de texto
Cancelar la suscripción - Front-End4:35
Aquí vamos a crear un botón que nos permita cancelar la suscripción desde el mismo front-end
Configurar web-push14:05
Aquí vamos a configurar nuestro backend para poder manejar el envío de notificaciones push
Opciones de una notificación12:44
Aquí vamos a aprender muchas de las opciones válidas de una notificación
Más opciones de las notificaciones9:41
Aquí aprenderemos aún más opciones que pueden ser usadas de las notificaciones
Redireccionando desde la notificación12:30
Aquí vamos a redireccionar a nuestros usuarios cuando la notificación se toca
Borrar suscripciones que ya no son válidas7:59
Ahora es momento de eliminar las suscripciones que ya no nos sirven
Código fuente de la sección0:21
Código fuente de la sección

Requirements

Conocimiento básico de HTML
Conocimiento básico de JavaScript
No es necesario conocer sobre Frameworks de JavaScript
Poder realizar instalaciones en el equipo como administrador

Description

Nota Legacy:

Después de varios años desde el lanzamiento inicial de este curso, queremos informarte que el mismo ha pasado a ser versión legacy. Esto implica que su contenido no recibirá actualizaciones adicionales y nuestro equipo de Co-instructores no continuará proporcionando soporte a preguntas relacionadas con este curso.

Sin embargo, queremos que sigas aprendiendo con confianza. Por eso, te invitamos a unirte a nuestra comunidad en Discord, donde podrás conectar con otros estudiantes, compartir conocimientos y recibir apoyo de nuestra comunidad.

¡Gracias por tu comprensión y por ser parte de nuestra comunidad de aprendizaje!

Aplicaciones Web Progresivas - PWA

Las PWAs son el siguiente paso en las aplicaciones web tradicionales, nos permiten poder utilizar nuestra aplicación web inclusive si no tenemos conexión con el servidor e inclusive nos permite recibir notificaciones push.

Este curso se enfoca en extender las características de una aplicación web y convertirla en una PWA integrando funcionalidades que nos permitan usarla sin conexión, instalarla en el home screen, usar base de datos offline y mucho más.

Los temas principales que cubriremos en el curso son:

Aplicación web sin conexión a internet
Diferentes estrategias para el manejo del caché
IndexedDB
PouchDB
Service Workers
App Manifest
Splash Screens
Push Notification
Push Server propio
Fetch API
Interceptar peticiones
Despliegues en dispositivos
Sincronización sin conexión
Recursos nativos como la cámara y localización
Share API
Y más

Una aplicación web progresiva bien elaborada, no se puede diferenciar de una aplicación nativa, y aquí aprenderemos a profundidad muchos temas para que podamos aprovechar al máximo lo que el navegador web del cliente nos ofrece, y progresivamente mejorar la experiencia de usuario conforme nuevas funcionalidades sean liberadas.

Lo mejor de todo, es que no es necesario volver a crear nuestra aplicación web o página web, con la ayuda del Service Worker nos permite integrar todo lo mencionado anteriormente para que nuestros usuarios disfruten de una aplicación web eficiente y veloz.

El curso está enfocado en aprender no sólo los fundamentos, sino también convertir aplicaciones hechas en PWAs que será la tarea más común, le integraremos paso a paso funcionalidades que nos permitan decidir qué características queremos incluir en nuestras aplicaciones web empresariales o personales.

Siéntete libre de revisar las clases gratuitas y el temario que se encuentran en el curso para tener una mejor idea de los objetivos del mismo

Who this course is for:

Se requiere un conocimiento básico sobre HTML
Es necesario conocimiento básico sobre JavaScript
No es necesario saber frameworks de JavaScript
Se requiere que la persona tenga derechos de administrador para realizar instalaciones en el equipo

PWA - Aplicaciones Web Progresivas: De cero a experto - 2020

What you'll learn

Explore related topics

Course content

Introducción7 lectures • 12min

Fundamentos de las aplicaciones web progresivas6 lectures • 20min

Reforzamiento Promesas, Fetch API y HttpServer20 lectures • 1hr 40min

Service Worker y Fetch Event12 lectures • 1hr 2min

Ciclo de vida de un Service Worker y los listeners más comunes10 lectures • 38min

Estrategias de Cache y Offline Mode18 lectures • 2hr 22min

Despliegues a dispositivos15 lectures • 1hr 43min

IndexedDB - Reforzamiento de base de datos local12 lectures • 59min

Sincronización sin conexión - Offline Synchronization13 lectures • 1hr 33min

Notifications - Push Notifications - Push Server19 lectures • 2hr 20min

Requirements

Description

Who this course is for: