4.75 de 5
4.75
1625 valoraciones en Udemy

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
Profesor:
Fernando Herrera
6.179 Estudiantes apuntados
Spanish [Auto-generated]
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

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

Introducción

1
Introducción

Mensaje de bienvenida y primeros pasos en las PWA

2
¿Cómo funcionará el curso?
3
¿Cómo hacer preguntas?

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

4
Instalaciones necesarias para seguir el curso

Instalaciones recomendadas para que puedan seguir el curso igual que yo

5
Instalar Git y configuración básica

Fundamentos de las aplicaciones web progresivas

1
Introducción a la sección

Una breve introducción a la sección

2
Temas puntuales de la sección

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

3
¿Qué son las aplicaciones web progresivas?

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

4
¿Por qué construir una PWA?

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

5
Conceptos clave de las PWA
6
Material de la sección

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

Reforzamiento Promesas, Fetch API y HttpServer

1
Introducción a la sección

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

2
Temas puntuales de la sección

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

3
Inicio del proyecto y recomendación

Aquí comenzaremos el reforzamiento

4
Promesas 101: Problemática

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

5
Resolución del problema usando promesas

Aquí resolveremos el ejercicio anterior utilizando promesas

6
Manejo de errores en las promesas

Aquí aprenderemos formas de manejar el error en las promesas

7
Promise All
8
Promise Race

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

9
Material adicional sobre promesas

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

10
Origenes del Fetch - XMLHttpRequest

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

11
Fetch API

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

12
Fetch POST / PUT

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

13
Fetch Blob

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

14
Response.clone()

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

15
Manejo de respuestas y errores

Aprenderemos notas importantes sobre las respuestas

16
Leer archivos HTML

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

17
Actualización menor
18
Tarea: Reforzamiento sobre las promesas y fetch

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

19
Documentaciones adicionales

Pueden revisar estos enlaces para conocer más al respecto

20
Código fuente de la sección

Código fuente de la sección

Service Worker y Fetch Event

1
Introducción a la sección

Breve resumen de la sección

2
Temas puntuales de la sección

Temas puntuales de la sección

3
Introducción al Service Worker

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

4
Inicio del proyecto - Service Worker básico

Inicio del proyecto, pasos y material adjunto

5
Instalación del Service Worker

Pasos para la instalación de un Service Worker

6
Service Worker - Fetch Event

Aquí empezaremos a darle poder al Service Worker

7
Formas válidas para realizar peticiones desde el evento Fetch

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

8
Modificando la respuesta de la petición Fetch

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

9
Tarea - Interceptar y modificar peticiones

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

10
Manejo de errores en el Fetch Event

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

11
Nota: Manejo de errores en el Fetch
12
Código fuente de la sección

Código fuente de la sección

13
Examen sobre Service Workers

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

Ciclo de vida de un Service Worker y los listeners más comunes

1
Introducción a la sección

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

2
Temas puntuales de la sección

Temas puntuales de la sección

3
Inicio del proyecto - Ciclo de Vida y Listeners

Aquí iniciaremos el nuevo proyecto para explicar estos temas

4
Service Worker: Install

Proceso de instalación del Service Worker

5
Service Worker: Activate
6
event.waitUntil( );

Esperar hasta que termine de realizar un trabajo

7
Service Worker: Fetch
8
Service Worker: Sync

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

9
Service Worker: Push

Evento para escuchar cuando recibimos notificaciones PUSH

10
Código fuente de la sección

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

11
Examen sobre listeners y ciclo de vida de un Service Worker

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

Estrategias de Cache y Offline Mode

1
Introducción a la sección

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

2
Temas puntuales de la sección
3
Inicio del proyecto y respuesta offline básica

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

4
Respuesta offline HTML String

Aquí responderemos con un html String

5
Introducción al cache storage

Aquí tendremos una gentil introducción al cache storage

6
Guardar el APP SHELL a la hora de instalar SW
7
Estrategia: Cache Only

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

8
Estrategia: Cache with network fallback

Primero el cache, luego intenta la red

9
Cache dinámico - Optimizaciones

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

10
Limitar el cache dinámico
11
Estrategia: Network with cache fallback
12
Estrategia: Cache with network update

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

13
Estrategia: Cache y Network Race

Esta estrategia brinda la máxima velocidad de respuesta posible

14
Navegación offline con página personalizada de error

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

15
Mostrar la página offline si no existe la petición en cache

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

16
Borrando versiones viejas del cache

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

17
Examen sobre el cache

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

18
Código fuente de la sección

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

19
Documentaciones adicionales

Para seguir expandiendo el conocimiento al respecto

Despliegues a dispositivos

1
Introducción a la sección
2
Temas puntuales de la sección

Una lista de los temas que aquí veremos

3
Inicio del proyecto - Twittor

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

4
Repaso: Configurar SW

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

5
Repaso: Cache con Network Fallback
6
El archivo Manifest.json

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

7
Depurar y correr en un dispositivo real

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

8
Desplegar aplicación en GitHub Pages

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

9
Instalando nuestra PWA en el dispositivo móvil - Android

Así se verá nuestra PWA en un dispositivo Android

10
Mejorando la apariencia en IOS
11
Removiendo el Notch de los iPhones

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

12
Notas de Android

Importante

13
Audits - Lighthouse

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

14
Generadores automáticos del Manifes.json

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

15
Código fuente de la sección

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

IndexedDB - Reforzamiento de base de datos local

1
Introducción a la sección

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

2
Temas puntuales de la sección

Temas puntuales que veremos en la sección

3
Inicios en indexedDB

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

You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.8
4.8 de 5
Calificaciones 1625

Calificación Detallada

5 estrellas
1164
4 estrellas
378
3 estrellas
76
2 estrellas
6
1 estrellas
2
PWA
DEBES ESTAR REGISTRADO PARA ACCEDER AL CURSO

Contenido

15 horas de video online
33 Articulos
Acceso sin limites
Acceso desde Móvil y Smart TV
Certificado de finalización

Newsletter

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos. Al hacer clic en el botón Aceptar, aceptas el uso de estas tecnologías y el procesamiento de sus datos para estos propósitos. Ver
Privacidad