Udemy

Platform

Español

Language

Mobile Apps

Category

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

Content

Apr 2020

Last Update
Regular Price

EXCLUSIVE SKILLSHARE OFFER
Exclusive  SkillShare  Offer
Unlimited access to 30 000 Premium SkillShare courses
30-DAY FREE TRIAL

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

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

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

J
Javier5 October 2020

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 .

G
Genicrea1 October 2020

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.

J
John25 September 2020

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.

J
Jorge24 September 2020

Excelente curso. Siempre se aprende más de lo que se dice. Gracias, me ha ayudado un montón en mis proyectos. Saludos PV!!!!

D
Daniel17 September 2020

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.

m
marcelino26 February 2020

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

A
Alexis6 February 2020

La explicación que brinda el instructor es de muy buena calidad y estoy bastante conforme con el material del curso

M
Marino3 February 2020

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 ;)

G
Gabriel2 February 2020

Va explicando los conceptos muy claramente a un ritmo ni demasiado rápido ni demasiado lento, lo cual se agradece mucho

E
Erik30 January 2020

Un curso muy completo, conciso y concreto que te lleva desde las bases hasta un dominio amplio del tema.

R
Ricardo29 January 2020

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!

D
David23 January 2020

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.

V
Victor21 January 2020

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.

F
Franco20 January 2020

Es el primer curso de paga que tomo de Fernando y la verdad que me parece excelente la calidad del curso.

J
Juan19 January 2020

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

DateDiscountStatus
7/11/202095% OFFExpired
10/6/202095% OFFExpired
2/23/202195% OFFExpired
3/30/202194% OFFExpired
4/23/202194% OFFExpired
4/27/202192% OFFExpired
5/19/202192% OFFExpired
5/29/202194% OFFExpired
6/1/202194% OFFExpired

1894936

Udemy ID

9/4/2018

Course created date

11/1/2019

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram