El registro de una ServiceWorker se realiza en el algún punto de tu código de JavaScript, puede ser tan sencillo como abrir una etiqueta script en tu documento HTML y colocar el código de registro.
<script>
navigator.serviceWorker.register('/sw.js')
</script>
El objeto navigator del scope global del navegdor tiene una propiedad serviceWorker que a su vez contiene un método register.
Este método registra la nueva ServiceWorker, sólo necesitamos enviar la ruta en la que encontrará el archivo JavaScript que define la ServiceWorker que queremos registrar.
Aquí hay algo muy importante, dónde coloques tu ServiceWorker impacta el alcance de la misma, ya que una ServiceWorker sólo procesará las peticiones que se ejecuten en el mismo alcance en que se registró.
Esto quiere decir que si colocas tu ServiceWorker en una carpeta scripts y la registras así:
<script>
navigator.serviceWorker.register('/scripts/sw.js')
</script>
Únicamente las peticiones que inicien con /script/ pasarán por la ServiceWorker y el resto no. Por lo que para el 99% de los casos, vas a querer colocar tu ServiceWorker en el root de tu proyecto, es decir, no la debes colocar dentro de subcarpetas, de modo que todas las peticiones puedan ser procesadas por la misma.
Un nombre muy común de hecho, es sw.js, recuerda que usar convenciones es una buena idea, aprovéchala y coloca tu ServiceWorker en el root de tu proyecto, con dicho nombre.
También debes recordar que si quieres actualizar tu ServiceWorker, no debes de cambiarle el nombre, simplemente debes de modificar el mismo archivo que ya usaste, si no, la ServiceWorker vieja quedará activa y tendrás que usar tu ServiceWorker para actualizar o eliminar la otra de manera manual, simplemente procura nunca hacerlo.
El resultado de registrar una ServiceWorker es una promesa, que cuando se resuelve nos otorga información relevante de la ServiceWorker como el estado en el que se encuentra, durante el curso estaremos trabajando con esta información así que no olvides tenerla en cuenta.
Ahora que sabes cómo registrar una ServiceWorker, pasemos a aprender a definirla.
-
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_circle_outline
Clase 2
El ciclo de vida de una SW
-
play_arrow
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
-