En el centro tecnológico del desarrollo de aplicaciones web progresivas tenemos las ServiceWorkers, una nueva API de JavaScript que nos permite instalar un script de código que hace las funciones de un proxy entre el cliente, es decir nuestro navegador y el servidor, donde se encuentra nuestra página.
Una ServiceWorker es capaz de alterar las respuestas del servidor, interceptar las peticiones del cliente, mandar información específica a ciertas direcciones, recibir notificaciones push, hacer actualizaciones aunque la página no esté abierta, y eventualmente se irán añadiendo otras capacidades a esta sección del navegador.
Lo que hace interesante es que a través de esta tecnología y la capacidad de actualizar y almacenar archivos en el caché del navegador, podemos ofrecer respuesta a peticiones aún sin internet.
Para entender cómo funciona una ServiceWorker a un nivel muy alto, veamos un ejemplo de cómo haría para que nuestra página se vea sin internet.
Tradicionalmente, un navegador solicita información al servidor a través de la red, es decir del internet. Por ejemplo, digamos que el navegador, representado por este cocodrilo, envía una solicitud por index.html, este Groot es la ServiceWorker, que por ahora no hace nada y la petición pasa, va al internet, toma su tiempo y regresa. La ServiceWorker, tiene la capacidad de interceptar estas peticiones, por ejemplo, imagina que ahora nuestro script guarda archivos estáticos del servidor en el caché, tomamos la solicitud de index.html, la SW nota que ya tiene ese archivo localmente, y evita que se haga la petición al internet, enviando el archivo, ahora puedes ver por qué en una aplicación web progresiva el internet es opcional.
A eso nos referimos cuando decimos que la ServiceWorker es un proxy, porque funge como intermediario entre el cliente y el servidor. Pasemos a los siguientes temas para adentrarnos más en el funcionamiento de esta tecnología.
-
check_circle_outlineMódulo 1 | 8 clases
Introducción
expand_more -
check_circle_outlineMódulo 2 | 10 clases
Autenticación de usuarios
expand_more -
check_circle_outlineMódulo 3 | 11 clases
Core central de la aplicación
expand_more -
check_circle_outlineMódulo 4 | 13 clases
Animaciones y Más
expand_more -
check_circle_outlineMódulo 5 | 19 clases
Tecnologías de aplicaciones web progresivas
expand_more-
done_all
Clase 1
Qué es una ServiceWorker
-
done_all
Clase 2
El ciclo de vida de una SW
-
done_all
Clase 3
Registrar una ServiceWorker
-
done_all
Clase 4
Eventos de una ServiceWorker
-
done_all
Clase 5
Programar una ServiceWorker
-
done_all
Clase 6
Angular ServiceWorkers
-
done_all
Clase 7
WebManifest
-
done_all
Clase 8
Fundamentos de notificaciones push con Firebase Cloud Messaging
-
done_all
Clase 9
Directiva ngIf y Else
-
done_all
Clase 10
Solicitar permisos para recibir notificaciones push
-
done_all
Clase 11
Registrar ServiceWorker para Firebase Messaging
-
done_all
Clase 12
Obtener suscripción de notificaciones de la ServiceWorker
-
done_all
Clase 13
Cancelar suscripción de notificaciones push
-
done_all
Clase 14
Detalles de UI para notificaciones
-
done_all
Clase 15
Enviar notificaciones push
-
done_all
Clase 16
Recibir notificaciones push con la app activa
-
done_all
Clase 17
Guardar tokens en Firestore
-
done_all
Clase 18
Actualizar el token
-
done_all
Clase 19
Almacenamiento de datos offline
-
-
check_circle_outlineMódulo 6 | 5 clases
Deploy y Despedida
expand_more