Una ServiceWorker pasa por distintos estados luego de que la agregas a tu sitio web, el proceso es bastante interesante y se ve de la siguiente manera.
El primer paso es registrar la ServiceWorker en alguna parte de tu código de JavaScript, más adelante hablaremos de la sintaxis para registrar la ServiceWorker, por ahora enfoquémonos en qué pasa después del registro.
Bien, una vez que la ejecución del código llega al punto en que se registra la ServiceWorker, se descarga el archivo, este es un archivo JavaScript del que también hablaremos más adelante. Una vez que se termina de descargar el archivo se ejecuta el proceso de instalación.
Qué se hace durante la instalación depende de ti, pero usualmente, este punto se utiliza para almacenar archivos importantes en el cache local, ya sea para que la página funcione sin internet o simplemente cargue más rápido.
Lo interesante de la instalación y del almacenamiento de archivos, es que si en algún punto falla el almacenamiento, la ServiceWorker no se instalará, de modo que si se instaló, puedes tener la certeza de que todos los archivos que agregaste estarán ahí.
Luego de que la instalación sucede, pueden pasar dos cosas, si es la primera vez que la SW se instaló, inmediatamente pasa al estado activo, si por el contrario es una actualización, pasa al estado de espera.
El navegador es bastante inteligente sobre cuándo debe actualizar o no una ServiceWorker, naturalmente si no existe ninguna instalada, directamente la pasa activo, pero, si ya antes habías instalado la SW, el navegador analizará el archivo cada que recargas tu página para identificar el mínimo byte de diferencia entre la SW que descargó y la que está activa, para saber si debe actualizar o no la ServiceWorker misma.
Esto significa que tú no te debes preocupar de la actualización, el mismo código de registro actualizará la ServiceWorker cuando la modifiques.
Lo que sucede cuando se detecta una actualización, como comentaba, es que la ServiceWorker pasa al estado de espera, una vez ahí, esperará a que todas las pestañas del sitio se cierren, para reemplazar a la vieja ServiceWorker.
Aquí también se enviará un mensaje a la ServiceWorker para que los desarrolladores coloquen instrucciones de código que se realizarán luego de que la ServiceWorker pase al estado de activo, que de nuevo, si es la primera vez será inmediatamente después de la instalación, y si es una actualización, será luego de que pase de espera a activo.
En este punto, los desarrolladores suelen actualizar el caché, para eliminar archivos que ya no necesiten, actualizar otros, agregar nuevos, invalidar viejos, etc. Es importante que la invalidación de archivos se de en el proceso de activación y no el de la instalación, esto ya que si invalidamos los archivos al instalar, puede que la ServiceWorker vieja que aún está activa, falle por no encontrar un archivo que antes existía.
Una vez que sabes qué pasa cuando registras una ServiceWorker puedes identificar los estados en lo que puede estar.
Parsing - Aquí es donde el navegador interpreta el código de la ServiceWorker y valida que todo esté bien, además, en este punto nuestra ServiceWorker podría fallar si no estamos sirviendo la página vía https, porque sí, esta tecnología solo funciona con conexión segura.
Installing - En proceso de instalación, este proceso puede retrasarse si dentro de la ServiceWorker usamos el método waitUntil del evento de instalación, hablaremos de eso más adelante.
Installed - Cuando la ServiceWorker se terminó de instalar pasa al estado de instalado o en espera como también se le conoce, tal como hablamos con anterioridad.
Activated - Si no existía una ServiceWorker o si deliberadamente nos saltamos la espera en el código, o si el usuario abandonó la página invalidando la ServiceWorker anterior, felicidades, tu nueva ServiceWorker pasa el estado de activada y comienza a controlar el documento y la red.
Redundant - Cuando se invalida una ServiceWorker o el proceso de instalación falla, pasa a este estado, en el que podemos asumir, ya no es válida.
¿Interesante no? Todavía tenemos algunos puntos que cubrir sobre fundamentos de ServiceWorkers, continuemos.
-
Módulo 1 | 8 clases
Introducción
expand_more-
play_circle_outline
Clase 1
Presentación del curso PWA
-
play_circle_outline
Clase 2
Qué es una aplicación web progresiva.
-
play_circle_outline
Clase 3
Por qué desarrollar aplicaciones web progresivas
-
play_circle_outline
Clase 4
Qué cubriremos en este curso
-
play_circle_outline
Clase 5
Requisitos para tomar este curso
-
play_circle_outline
Clase 6
Stack del proyecto
-
play_circle_outline
Clase 7
Angular Universal
-
play_circle_outline
Clase 8
Configurar Angular con Firebase
-
-
Módulo 2 | 10 clases
Autenticación de usuarios
expand_more-
play_circle_outline
Clase 1
Configurar el router de Angular
-
play_circle_outline
Clase 2
Insertar nuevo componente
-
play_circle_outline
Clase 3
Autenticación con Firebase y Google
-
play_circle_outline
Clase 4
Obtener usuario autenticado
-
play_circle_outline
Clase 5
Guards de rutas
-
play_circle_outline
Clase 6
Navegación y estilos
-
play_circle_outline
Clase 7
Integrar FontAwesome
-
play_circle_outline
Clase 8
Cerrar sesión
-
play_circle_outline
Clase 9
Async Pipe
-
play_circle_outline
Clase 10
Guardar usuarios en la base de datos
-
-
Módulo 3 | 11 clases
Core central de la aplicación
expand_more-
play_circle_outline
Clase 1
Formulario para listas
-
play_circle_outline
Clase 2
NgModel doble data binding
-
play_circle_outline
Clase 3
Guardar listas en Firestore
-
play_circle_outline
Clase 4
Consultar y mostrar listas
-
play_circle_outline
Clase 5
Diseño de listas
-
play_circle_outline
Clase 6
Vista principal de una lista
-
play_circle_outline
Clase 7
Formulario de pendientes
-
play_circle_outline
Clase 8
Enums y NgModel
-
play_circle_outline
Clase 9
Guardar pendientes por lista
-
play_circle_outline
Clase 10
Mostrar los pendientes de una lista
-
play_circle_outline
Clase 11
Diseño de la tarjeta de pendientes
-
-
Módulo 4 | 13 clases
Animaciones y Más
expand_more-
play_circle_outline
Clase 1
Configuar @angular/animations
-
play_circle_outline
Clase 2
Mostrar/ocultar formulario usando animaciones
-
play_circle_outline
Clase 3
Animaciones de entrada y salida de componentes
-
play_circle_outline
Clase 4
Animaciones en coreografía
-
play_circle_outline
Clase 5
Eventos touch con HammerJS
-
play_circle_outline
Clase 6
Animar elementos al presionarlos
-
play_circle_outline
Clase 7
Evento swipe y animaciones
-
play_circle_outline
Clase 8
Actualizar pendiente en Firestore
-
play_circle_outline
Clase 9
Where en las consultas a Firestore
-
play_circle_outline
Clase 10
TrackBy para identificar elementos en ngFor
-
play_circle_outline
Clase 11
Compartir suscripciones con share
-
play_circle_outline
Clase 12
DateTime Picker
-
play_circle_outline
Clase 13
MomentJS
-
-
Módulo 5 | 19 clases
Tecnologías de aplicaciones web progresivas
expand_more-
play_circle_outline
Clase 1
Qué es una ServiceWorker
-
play_arrow
Clase 2
El ciclo de vida de una SW
-
play_circle_outline
Clase 3
Registrar una ServiceWorker
-
play_circle_outline
Clase 4
Eventos de una ServiceWorker
-
play_circle_outline
Clase 5
Programar una ServiceWorker
-
play_circle_outline
Clase 6
Angular ServiceWorkers
-
play_circle_outline
Clase 7
WebManifest
-
play_circle_outline
Clase 8
Fundamentos de notificaciones push con Firebase Cloud Messaging
-
play_circle_outline
Clase 9
Directiva ngIf y Else
-
play_circle_outline
Clase 10
Solicitar permisos para recibir notificaciones push
-
play_circle_outline
Clase 11
Registrar ServiceWorker para Firebase Messaging
-
play_circle_outline
Clase 12
Obtener suscripción de notificaciones de la ServiceWorker
-
play_circle_outline
Clase 13
Cancelar suscripción de notificaciones push
-
play_circle_outline
Clase 14
Detalles de UI para notificaciones
-
play_circle_outline
Clase 15
Enviar notificaciones push
-
play_circle_outline
Clase 16
Recibir notificaciones push con la app activa
-
play_circle_outline
Clase 17
Guardar tokens en Firestore
-
play_circle_outline
Clase 18
Actualizar el token
-
play_circle_outline
Clase 19
Almacenamiento de datos offline
-
-
Módulo 6 | 5 clases
Deploy y Despedida
expand_more-
play_circle_outline
Clase 1
Generando build de producción
-
play_circle_outline
Clase 2
Deploy dela aplicación
-
play_circle_outline
Clase 3
Probar proyecto en dispositivos móviles
-
play_circle_outline
Clase 4
Qué cursos tomar luego del desarrollo de Aplicaciones Web Progresivas
-
play_circle_outline
Clase 5
Despedida del curso
-