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.81 (2554 reviews)
Students
14.5 hours
ContentApr 2020
Last Update
Unlimited access to 30 000 Premium SkillShare courses
What you will 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
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
Screenshots
Content
Introducción
Introducción
¿Cómo funcionará el curso?
¿Cómo hacer preguntas?
Instalaciones necesarias para seguir el curso
Instalar Git y configuración básica
Fundamentos de las aplicaciones web progresivas
Introducción a la sección
Temas puntuales de la sección
¿Qué son las aplicaciones web progresivas?
¿Por qué construir una PWA?
Conceptos clave de las PWA
Material de la sección
Reforzamiento Promesas, Fetch API y HttpServer
Introducción a la sección
Temas puntuales de la sección
Inicio del proyecto y recomendación
Promesas 101: Problemática
Resolución del problema usando promesas
Manejo de errores en las promesas
Promise All
Promise Race
Material adicional sobre promesas
Origenes del Fetch - XMLHttpRequest
Fetch API
Fetch POST / PUT
Fetch Blob
Response.clone()
Manejo de respuestas y errores
Leer archivos HTML
Tarea: Reforzamiento sobre las promesas y fetch
Documentaciones adicionales
Código fuente de la sección
Service Worker y Fetch Event
Introducción a la sección
Temas puntuales de la sección
Introducción al Service Worker
Inicio del proyecto - Service Worker básico
Instalación del Service Worker
Service Worker - Fetch Event
Formas válidas para realizar peticiones desde el evento Fetch
Modificando la respuesta de la petición Fetch
Tarea - Interceptar y modificar peticiones
Manejo de errores en el Fetch Event
Nota: Manejo de errores en el Fetch
Código fuente de la sección
Examen sobre Service Workers
Ciclo de vida de un Service Worker y los listeners más comunes
Introducción a la sección
Temas puntuales de la sección
Inicio del proyecto - Ciclo de Vida y Listeners
Service Worker: Install
Service Worker: Activate
event.waitUntil( );
Service Worker: Fetch
Service Worker: Sync
Service Worker: Push
Código fuente de la sección
Examen sobre listeners y ciclo de vida de un Service Worker
Estrategias de Cache y Offline Mode
Introducción a la sección
Temas puntuales de la sección
Inicio del proyecto y respuesta offline básica
Respuesta offline HTML String
Introducción al cache storage
Guardar el APP SHELL a la hora de instalar SW
Estrategia: Cache Only
Estrategia: Cache with network fallback
Cache dinámico - Optimizaciones
Limitar el cache dinámico
Estrategia: Network with cache fallback
Estrategia: Cache with network update
Estrategia: Cache y Network Race
Navegación offline con página personalizada de error
Mostrar la página offline si no existe la petición en cache
Borrando versiones viejas del cache
Examen sobre el cache
Código fuente de la sección
Documentaciones adicionales
Despliegues a dispositivos
Introducción a la sección
Temas puntuales de la sección
Inicio del proyecto - Twittor
Repaso: Configurar SW
Repaso: Cache con Network Fallback
El archivo Manifest.json
Depurar y correr en un dispositivo real
Desplegar aplicación en GitHub Pages
Instalando nuestra PWA en el dispositivo móvil - Android
Mejorando la apariencia en IOS
Removiendo el Notch de los iPhones
Notas de Android
Audits - Lighthouse
Generadores automáticos del Manifes.json
Código fuente de la sección
IndexedDB - Reforzamiento de base de datos local
Introducción a la sección
Temas puntuales de la sección
Inicios en indexedDB
Manejo de errores e inserción de registros
Código fuente del indexedDB
PouchDB - Empezando
Leer registros de la base de datos
Editar y Borrar TODOS
Tarea: Transformar nuestra TODO APP en una PWA
Tarea: Entrenamiento sobre PouchDB
Resolución de la tarea - PouchDB
Código fuente de la sección
Sincronización sin conexión - Offline Synchronization
Introducción a la sección
Temas puntuales de la sección
Inicio del proyecto y backend server
API REST - Get Mensajes
Consumir servicio REST - Mostrar mensajes en pantalla
Network with cache fallback - Para las peticiones a nuestra API
API REST - Post Mensaje
Envío de la petición POST
Interceptar un POST y almacenar en indexedDB
Registrar tarea asíncrona y SYNC del SW
Disparar posteos cuando hay conexión a internet
Front-End: Detectar cambios de conexión a internet
Código fuente de la sección
Notifications - Push Notifications - Push Server
Introducción a la sección
Temas puntuales de la sección
Introducción al envío de Push Notifications
Inicio del proyecto - Push Notifications
Permisos para notificaciones
Detalle estético - Mostrar y ocultar botón de las notificaciones
Definir los servicios REST necesarios - PUSH - SUBSCRIBE - KEY
Generar la llave pública y privada
Retornando nuestro KEY de forma segura
Generar la suscripción
Enviar la suscripción al servidor - POST
Guardar suscripciones en el backend para que sean persistentes
Cancelar la suscripción - Front-End
Configurar web-push
Opciones de una notificación
Más opciones de las notificaciones
Redireccionando desde la notificación
Borrar suscripciones que ya no son válidas
Código fuente de la sección
Recursos Nativos
Introducción a la sección
Temas puntuales de la sección
Inicio del proyecto - Recursos Nativos
Uso de la Geolocalización
POST con las coordenadas y el mapa
Mostrar video de la cámara
Nota: Camara posterior
Tomar Foto y apagar cámara
Mostrar la fotografía como un mensaje
Share API
Código fuente de la sección
Bonus: @angular/pwa
Introducción a la sección
Temas puntuales de la sección
Inicio de proyecto - Angular PWA
Rutas de nuestra aplicación
Servicio y manejo de información - Agregar interfaz y URL
Página del país
Documentación de @angular/pwa
ng add @angular/pwa
Configuraciones en el archivo ngsw-config.json
Código fuente de la sección
Cierre del curso
Promociones especiales para alumnos
Despedida
Reviews
Excelente curso !!! ya este es como el cuarto curso que tomo con Fernando y como siempre siento que aprendí un montón !! Muchas felicitaciones por que la calidad y el contenido están muy bien explicados... y lo mejor es que los cursos cada cierto tiempo se van actualizando. Muchas gracias .
Me está ayudando muchísimo en una característica que tengo que implementar en un proyecto del trabajo. Ya es el tercer curso que tomo con Fernando Herrera, excelente profesor me ha salvado de muchas.
Evidentemente, por encima de mis expectativas, Fernando tiene una excelente magia para explicar, poner ejemplos, analogías, detallar cada concepto, y responder cualquier duda. Es épico éste curso.
Excelente curso. Siempre se aprende más de lo que se dice. Gracias, me ha ayudado un montón en mis proyectos. Saludos PV!!!!
Muy buen curso sobre PWA, tiene lo necesario para expandir tus aplicaciones nuevas o ya realizadas. Me gustaría un bonus con React más adelante, aún así vale por completo la pena tomar este curso, aprendí muchas cosas nuevas para manejar los service workers a mi manera.
excelente curso, la explicación es muy facil de enteder lo que si seria bueno el ver como montarlo en distintos servidores de distintas tecnologías
La explicación que brinda el instructor es de muy buena calidad y estoy bastante conforme con el material del curso
Con los Cursos de Fernando siempre se obtiene lo que se quiere y más, es un gran Maestro. Excelente Curso. posdata: Yo me salté la seccón de Angular, yo desarrollo con Vue.js ;)
Va explicando los conceptos muy claramente a un ritmo ni demasiado rápido ni demasiado lento, lo cual se agradece mucho
Un curso muy completo, conciso y concreto que te lleva desde las bases hasta un dominio amplio del tema.
Ya he realizado varios cursos con Fernando y siempre acabo con una gran sensación de haber aprendido nuevos conceptos y herramientas. Las PWAs con Fernando parecen muy fáciles de realizar, una pena el tema de que no se puedan realizar notificaciones push en ios, aunque esto no es problema del curso. Ya estoy pensando en el siguiente paso que serán las aplicaicones híbridas, no sé si decantarme por ionic o flutter. Muchas gracias Fernando!
El curso está muy bien. Da un repaso importante a las diferentes estrategias de caché, aspecto muy importante en el desarrollo de una PWA. Por otro lado, a mí personalmente lo que más me ha gustado ha sido el apartado de notificaciones push. Encuentro que es muy completo y contiene vídeos en los que se aprenden cosas muy interesantes y divertidas.
Un curso muy bueno, te enseña conocimientos básicos a un gran nivel, empece sin saber nada y sali con muchísimo conocimiento, lo recomiendo enormemente.
Es el primer curso de paga que tomo de Fernando y la verdad que me parece excelente la calidad del curso.
Hola Fernando, primero que nada, enhorabuena por el curso, hasta ahora es muy ameno y util. Mi pretension es actualizar como PWA, algunas de las aplicaciones web que desarrollado hasta ahora.Tengo mucho interes en las notificaciones push, y tambien en como acceder a los recursos del dispositivo, geolocalizacion, camara, etc. Enhorabuena otra vez, gracias y saludos.
Coupons
| Date | Discount | Status | ||
|---|---|---|---|---|
| 7/11/2020 | 95% OFF | Expired | ||
| 10/6/2020 | 95% OFF | Expired | ||
| 2/23/2021 | 95% OFF | Expired | ||
| 3/30/2021 | 94% OFF | Expired | ||
| 4/23/2021 | 94% OFF | Expired | ||
| 4/27/2021 | 92% OFF | Expired | ||
| 5/19/2021 | 92% OFF | Expired | ||
| 5/29/2021 | 94% OFF | Expired | ||
| 6/1/2021 | 94% OFF | Expired | ||
1894936
Udemy ID9/4/2018
Course created date11/1/2019
Course Indexed date
