PWA - Aplicaciones Web Progresivas: De cero a experto
4.7 (1,771 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
6,693 students enrolled

PWA - Aplicaciones Web Progresivas: De cero a experto

Notificaciones PUSH, sincronización sin conexión, modos offline, instalaciones, indexedDB, push server, share y más
4.7 (1,771 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
6,693 students enrolled
Created by Fernando Herrera
Last updated 4/2020
Spanish
Spanish [Auto-generated]
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 14.5 hours on-demand video
  • 33 articles
  • 42 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
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
Expand all 153 lectures 14:43:14
+ Introducción
5 lectures 09:22

Mensaje de bienvenida y primeros pasos en las PWA

Preview 01:01
¿Cómo funcionará el curso?
01:48

Es algo obvio para muchos, pero por favor observen este video

¿Cómo hacer preguntas?
02:50

Instalaciones recomendadas para que puedan seguir el curso igual que yo

Instalaciones necesarias para seguir el curso
01:56
Instalar Git y configuración básica
01:47
+ Fundamentos de las aplicaciones web progresivas
6 lectures 20:25

Una breve introducción a la sección

Introducción a la sección
00:54

Un resumen puntual de los temas que veremos en la sección

Temas puntuales de la sección
00:12

¿De dónde nacieron, por qué, para que sirven, que son?

Preview 03:47

Una pequeña introducción por qué es importante conocer el tema

¿Por qué construir una PWA?
05:39

Aquí les dejo el material de la sección por si desean saber un poco más al respecto

Material de la sección
00:13
+ Reforzamiento Promesas, Fetch API y HttpServer
20 lectures 01:40:06

Una breve introducción de lo que veremos en la sección

Introducción a la sección
01:39

Una lista de los temas puntuales que veremos a continuación

Temas puntuales de la sección
00:21

Aquí comenzaremos el reforzamiento

Inicio del proyecto y recomendación
07:21

Esta es una de las problemáticas que hicieron que las promesas nacieran

Promesas 101: Problemática
09:33

Aquí resolveremos el ejercicio anterior utilizando promesas

Resolución del problema usando promesas
08:19

Aquí aprenderemos formas de manejar el error en las promesas

Manejo de errores en las promesas
07:39
Promise All
09:01

Como el nombre lo dice, es una carrera para comprobar cual termina primero

Promise Race
04:38

Siempre es bueno tener un poco más de información sobre las promesas

Material adicional sobre promesas
00:13

Esta es la demostración de todo lo que teníamos que hacer para realizar una simple petición HTTP originalmente

Origenes del Fetch - XMLHttpRequest
07:01

Es hora de hablar sobre el Fetch API, la nueva forma de hacer peticiones HTTP

Fetch API
08:22

Aquí aprenderemos a realizar peticiones POST y PUT utilizando el Fetch API

Fetch POST / PUT
05:10

Vamos a obtener una imagen, leerla y mostrarla en pantalla usando el fetch

Fetch Blob
06:09

Esto es importante saberlo para prevenir posibles errores cuando estemos manejando el cache

Response.clone()
05:00

Aprenderemos notas importantes sobre las respuestas

Manejo de respuestas y errores
05:03

Aquí aprenderemos a leer archivos de texto, entre los cuales esta incluido el HTML

Leer archivos HTML
04:25
Actualización menor
00:24

Aquí les dejo una tarea para practicar lo aprendido hasta el momento

Tarea: Reforzamiento sobre las promesas y fetch
09:31

Pueden revisar estos enlaces para conocer más al respecto

Documentaciones adicionales
00:06

Código fuente de la sección

Código fuente de la sección
00:10
+ Service Worker y Fetch Event
12 lectures 01:02:25

Breve resumen de la sección

Introducción a la sección
02:56

Temas puntuales de la sección

Temas puntuales de la sección
00:16

Una introducción del Service Worker y ¿qué hace?

Introducción al Service Worker
05:56

Inicio del proyecto, pasos y material adjunto

Inicio del proyecto - Service Worker básico
05:49

Pasos para la instalación de un Service Worker

Instalación del Service Worker
10:20

Aquí empezaremos a darle poder al Service Worker

Preview 11:20

Aquí les mostraré formas válidas o sinónimos para realizar peticiones Fetch

Formas válidas para realizar peticiones desde el evento Fetch
05:51

Aquí modificaremos la respuesta que es solicitada desde la aplicación web

Modificando la respuesta de la petición Fetch
04:37

Esta es una pequeña tarea para ponerlos a pensar un poco y que se diviertan a la vez.

Tarea - Interceptar y modificar peticiones
03:28

Aquí aprenderemos a manejar errores cuando un recurso no este disponible por varias razones

Manejo de errores en el Fetch Event
11:25
Nota: Manejo de errores en el Fetch
00:12

Código fuente de la sección

Código fuente de la sección
00:14

Un pequeño examen para afianzar los conocimientos teóricos hasta el momento

Examen sobre Service Workers
10 questions
+ Ciclo de vida de un Service Worker y los listeners más comunes
10 lectures 38:25

Una breve descripción de lo que veremos en la sección

Introducción a la sección
01:08

Temas puntuales de la sección

Temas puntuales de la sección
00:18

Aquí iniciaremos el nuevo proyecto para explicar estos temas

Inicio del proyecto - Ciclo de Vida y Listeners
02:02

Proceso de instalación del Service Worker

Service Worker: Install
04:51
Service Worker: Activate
04:00

Esperar hasta que termine de realizar un trabajo

event.waitUntil( );
04:51
Service Worker: Fetch
06:33

Sincronización offline y recuperación de conexión

Service Worker: Sync
08:30

Evento para escuchar cuando recibimos notificaciones PUSH

Service Worker: Push
06:01

Les dejo aquí el código fuente por si lo llegan a necesitar

Código fuente de la sección
00:11

Es momento de reforzar los conocimientos aprendidos hasta el momento en esta sección

Examen sobre listeners y ciclo de vida de un Service Worker
5 questions
+ Estrategias de Cache y Offline Mode
18 lectures 02:22:01

Un resumen puntual de lo que veremos en esta sección

Introducción a la sección
01:35
Temas puntuales de la sección
00:28

Aquí iniciaremos el proyecto y a la vez trabajaremos con la primera petición offline básica

Inicio del proyecto y respuesta offline básica
07:51

Aquí responderemos con un html String

Respuesta offline HTML String
07:32

Aquí tendremos una gentil introducción al cache storage

Introducción al cache storage
16:34
Guardar el APP SHELL a la hora de instalar SW
09:56

Quiere decir que no existen peticiones a recursos externos, todo es servido desde el cache

Estrategia: Cache Only
06:44

Primero el cache, luego intenta la red

Preview 11:30

Aquí hablaremos sobre el cache dinámico y un par de optimizaciones

Cache dinámico - Optimizaciones
10:20
Limitar el cache dinámico
14:03
Estrategia: Network with cache fallback
10:49

Donde el rendimiento es crítico, esta es una opción viable

Estrategia: Cache with network update
09:16

Esta estrategia brinda la máxima velocidad de respuesta posible

Estrategia: Cache y Network Race
11:52

Aquí vamos a poner un problema real, y ver cómo lo podemos solucionar

Navegación offline con página personalizada de error
08:37

Si no existe en el cache la página web, entonces haremos esto

Mostrar la página offline si no existe la petición en cache
06:40

Aquí aprenderemos a borrar versiones viejas que ya no ocuparemos del cache, de forma dinámica

Borrando versiones viejas del cache
07:54

Aquí vamos a tener un pequeño examen para reforzar lo aprendido

Examen sobre el cache
10 questions

Aquí tienen el código fuente por si acaso lo quieren usar para comparar

Código fuente de la sección
00:09

Para seguir expandiendo el conocimiento al respecto

Documentaciones adicionales
00:09
+ Despliegues a dispositivos
15 lectures 01:43:21
Introducción a la sección
02:04

Una lista de los temas que aquí veremos

Temas puntuales de la sección
00:24

Aquí comenzaremos a trabajar con un nuevo proyecto, el cual deberemos de desplegar en nuestro dispositivo móvil

Inicio del proyecto - Twittor
08:19

Comenzaremos la configuración del service worker y la transformación de una aplicación web común en una PWA

Repaso: Configurar SW
12:10
Repaso: Cache con Network Fallback
12:16

Este es otro archivo sumamente importante para nuestra PWA, y le dice a nuestro dispositivo cómo debe de mostrar nuestra aplicación

El archivo Manifest.json
11:43

Aquí explicare unos pasos para que puedan depurar su aplicación cuando corre en el dispositivo móvil

Preview 11:58

Aquí vamos a desplegar la aplicación en GitHub pages para poder observar la verdadera forma de nuestra aplicación

Desplegar aplicación en GitHub Pages
11:15

Así se verá nuestra PWA en un dispositivo Android

Instalando nuestra PWA en el dispositivo móvil - Android
06:22
Mejorando la apariencia en IOS
13:14

Ahora trabajaremos optimizando un poco más nuestra aplicación en IOS

Preview 05:59

Importante

Notas de Android
00:36

Aquí podemos recibir información de cómo va nuestra aplicación, para poder optimizarla

Preview 06:28

Esto ayuda mucho a generar estos archivos rápidamente, y algunos hasta generan los íconos.

Generadores automáticos del Manifes.json
00:21

Pueden descargar el código fuente de mi aplicación para que lo puedan comparar contra el suyo, en caso de ser necesario

Código fuente de la sección
00:11
+ IndexedDB - Reforzamiento de base de datos local
12 lectures 58:53

Un breve resumen de lo que veremos en esta sección

Introducción a la sección
01:51

Temas puntuales que veremos en la sección

Temas puntuales de la sección
00:25

IndexedDB es una base de datos local, que se almacena en el navegador web

Inicios en indexedDB
07:33

Aquí aprenderemos a manejar los errores de base de datos y realizar las primeras inserciones de los registros

Manejo de errores e inserción de registros
08:45

Les dejo el código del indexedDB, no lo volveremos a tocar en el curso, ya que usaremos PouchDB

Código fuente del indexedDB
00:09

Aprendiendo a usar PouchDB

PouchDB - Empezando
08:17

Aquí aprenderemos a leer registros de la base de datos

Leer registros de la base de datos
05:38

Aquí aprenderemos a editar y borrar todos... terminaremos nuestra lista de tareas

Editar y Borrar TODOS
06:27

Aquí tenemos una pequeña tarea que consiste en que nuestra aplicación de TODOS hecha con PouchDB funcione offline

Tarea: Transformar nuestra TODO APP en una PWA
05:38
Tarea: Entrenamiento sobre PouchDB
04:18

Aquí vamos a resolver la tarea, espero que lograran terminarla o llegar lo más lejos posible.

Resolución de la tarea - PouchDB
09:48

Adjunto el código de la sección por si acaso lo necesitan

Código fuente de la sección
00:04
+ Sincronización sin conexión - Offline Synchronization
13 lectures 01:33:09

Un resumen de lo que veremos en esta sección

Introducción a la sección
01:16

Un listado y detalles de lo que aprenderemos en esta sección

Temas puntuales de la sección
00:12
Inicio del proyecto y backend server
08:59

Crearemos un servicio rest, que nos permita obtener los mensajes de nuestro server

API REST - Get Mensajes
04:24

Vamos a leer los mensajes y mostrarlos en pantalla

Consumir servicio REST - Mostrar mensajes en pantalla
08:03

Aquí vamos a cambiar la implementación de la estrategia, para las peticiones que se realicen a nuestros servicios REST

Network with cache fallback - Para las peticiones a nuestra API
09:34

Vamos a crear el servicio rest, que se encarga de realizar el posteo de un nuevo mensaje al servidor

API REST - Post Mensaje
04:41

Aquí aprenderemos muchas cosas importantes en el envío de un mensaje post.

Envío de la petición POST
11:27

Interceptar información del POST y almacenarlo en indexedDB para posterior almacenamiento

Interceptar un POST y almacenar en indexedDB
10:59

Aquí aprenderemos cómo registrar la tarea asíncrona y procesarla del lado del Service Worker

Registrar tarea asíncrona y SYNC del SW
12:54

Aquí leeremos PouchDB, y todos los registros que tenemos en la base de datos los vamos a postear

Disparar posteos cuando hay conexión a internet
10:54

Aquí aprenderemos una estrategia para saber cuando tenemos o no conexión

Front-End: Detectar cambios de conexión a internet
09:35

Pueden descargar el código fuente de la sección aquí.

Código fuente de la sección
00:10
+ Notifications - Push Notifications - Push Server
19 lectures 02:20:26

Un resumen de lo que lograremos en esta sección

Introducción a la sección
01:18

Un resumen puntual de los temas que cubriremos aquí

Temas puntuales de la sección
00:23

Una introducción necesaria para empezar la programación de nuestras PUSH

Introducción al envío de Push Notifications
10:07

Este es el primer paso para poder enviar notificaciones, y consiste en preguntarle al usuario o bien confirmar si previamente ya aceptó recibir notificaciones

Inicio del proyecto - Push Notifications
03:24

Solicitar permiso para las notificaciones

Permisos para notificaciones
10:25

Aquí simplemente haremos una pequeña función para mostrar y ocultar el botón de las notificaciones

Detalle estético - Mostrar y ocultar botón de las notificaciones
04:22

Vamos a definir los servicios REST de nuestro backend server, que necesitaremos para poder trabajar las notificaciones

Definir los servicios REST necesarios - PUSH - SUBSCRIBE - KEY
04:31

Aquí vamos a generar las llaves para nuestro server

Generar la llave pública y privada
08:23

Un pequeño paso adicional pero es necesario

Retornando nuestro KEY de forma segura
07:06

Aquí aprenderemos a generar la suscripción de nuestro dispositivo

Generar la suscripción
08:36

Aquí aprenderemos a recibir en nuestro backend las suscripciones y las almacenaremos para no perderlas cada vez que se reinicia el servidor

Enviar la suscripción al servidor - POST
11:54

Guardaremos nuestras suscripciones en un archivo de texto

Guardar suscripciones en el backend para que sean persistentes
08:02

Aquí vamos a crear un botón que nos permita cancelar la suscripción desde el mismo front-end

Cancelar la suscripción - Front-End
04:35

Aquí vamos a configurar nuestro backend para poder manejar el envío de notificaciones push

Configurar web-push
14:05

Aquí vamos a aprender muchas de las opciones válidas de una notificación

Preview 12:44

Aquí aprenderemos aún más opciones que pueden ser usadas de las notificaciones

Más opciones de las notificaciones
09:41

Aquí vamos a redireccionar a nuestros usuarios cuando la notificación se toca

Redireccionando desde la notificación
12:30

Ahora es momento de eliminar las suscripciones que ya no nos sirven

Preview 07:59

Código fuente de la sección

Código fuente de la sección
00:21
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

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