Logo de Código Facilito
  • Inicio
  • Replays
  • Iniciar sesión
  • Crear cuenta
  • Explorar cursos
  • Bootcamps
  • Precios
  • Blog

¡Califica el Curso para desarrollar Aplicaciones Web Progresivas!

Selecciona la calificación de 1 a 5 estrellas

Reporta un error

Curso Curso para desarrollar Aplicaciones Web Progresivas

Video Registrar una ServiceWorker

Tipo de error

Algo salió mal al cargar el vídeo

El vídeo no pudo cargarse, hemos enviado un reporte al equipo de desarrollo, para poder solucionarlo a la brevedad.

Mientras solucionamos el problema, intenta lo siguiente para solucionar el error:

  • Recarga la página
  • Intenta reiniciar tu navegador y luego vuelve a reproducir el vídeo
  • Vacía el caché de tu navegador
  • Intenta reproducir con las extensiones del navegador deshabilitadas
  • Intenta con un navegador distinto
  • Si el problema persiste contáctanos en Discord
home Ir al inicio report_problem Reportar falla star Valorar curso

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.

  • check_circle_outline
    Módulo 1 | 8 clases

    Introducción

    expand_more
  • check_circle_outline
    Módulo 2 | 10 clases

    Autenticación de usuarios

    expand_more
  • check_circle_outline
    Módulo 3 | 11 clases

    Core central de la aplicación

    expand_more
  • check_circle_outline
    Módulo 4 | 13 clases

    Animaciones y Más

    expand_more
  • check_circle_outline
    Mó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_outline
    Módulo 6 | 5 clases

    Deploy y Despedida

    expand_more

Registrar una ServiceWorker

arrow_back Siguiente arrow_forward
Curso para desarrollar Aplicaciones Web Progresivas