Cómo depurar servicios en segundo plano

Kayce Basques

Sofia Emelianova

La sección Servicios en segundo plano de las Herramientas para desarrolladores de Chrome es una colección de herramientas para las APIs de JavaScript que permite que tu sitio web envíe y reciba actualizaciones, incluso cuando un usuario no lo tiene abierto. Un servicio en segundo plano es funcionalmente similar a un proceso en segundo plano.

La sección Servicios en segundo plano te permite depurar los siguientes servicios en segundo plano:

• Recuperación en segundo plano
• Sincronización en segundo plano
• Notificaciones
• Cargas especulativas
• Mensajes push

Las herramientas para desarrolladores de Chrome pueden registrar eventos de recuperación, sincronización y notificación durante tres días, incluso cuando las herramientas para desarrolladores no están abiertas. Esto puede ayudarte a asegurarte de que los eventos se envíen y reciban como se espera.

Además de los eventos de servicios en segundo plano, DevTools puede hacer lo siguiente:

• Mostrar los informes que Chrome ya envió o está a punto de enviar con la API de informes
• Te permite depurar y probar la memoria caché atrás/adelante con un clic.

Recuperación en segundo plano

La API de Background Fetch permite que un service worker descargue recursos grandes de forma confiable, como películas o podcasts, como un servicio en segundo plano. Para registrar eventos de recuperación en segundo plano durante tres días, incluso cuando DevTools no está abierta, haz lo siguiente:

1. Abre DevTools, por ejemplo, en esta página de demostración.

2. Navega a Application > Background services > Background fetch y haz clic en Record.

   

3. En la página de demostración, haz clic en Almacenar recursos de forma local. Esto activa algunas actividades de recuperación en segundo plano. Las Herramientas para desarrolladores registran los eventos en la tabla.

   

4. Haz clic en un evento para ver sus detalles en el espacio debajo de la tabla.

5. Puedes cerrar las Herramientas para desarrolladores y dejar que la grabación se ejecute durante hasta tres días. Para detener la grabación, haz clic en Detener.

Sincronización en segundo plano

La API de Background Sync permite que un trabajador en segundo plano sin conexión envíe datos a un servidor una vez que se restablezca una conexión a Internet confiable. Para registrar eventos de sincronización en segundo plano durante tres días, incluso cuando las Herramientas para desarrolladores no están abiertas, haz lo siguiente:

1. Abre DevTools, por ejemplo, en esta página de demostración.

2. Navega a Application > Background services > Background sync y haz clic en Record.

   

3. En la página de demostración, haz clic en Registrar sincronización en segundo plano para registrar el respectivo trabajador de servicio y, luego, en Permitir cuando se te solicite.

   Nota: Para obtener información sobre cómo depurar trabajadores del servicio en DevTools, consulta Trabajadores del servicio.

   El registro del service worker es una actividad de sincronización en segundo plano. Las Herramientas para desarrolladores registran los eventos en la tabla.

   

4. Haz clic en un evento para ver sus detalles en el espacio debajo de la tabla.

5. Puedes cerrar las Herramientas para desarrolladores y dejar que la grabación se ejecute durante hasta tres días. Para detener la grabación, haz clic en Detener.

Mitigaciones de seguimiento por rebote (experimentales)

Nota: Esta es una función experimental disponible a partir de la versión 115 de Chrome.

El experimento Mitigations of bounce tracking en Chrome te permite identificar y borrar el estado de los sitios que parecen realizar un seguimiento entre sitios con la técnica de seguimiento por rebote. Puedes forzar manualmente las mitigaciones de seguimiento y ver una lista de los sitios cuyos estados se borraron.

Para forzar las mitigaciones de seguimiento, haz lo siguiente:

1. Bloquear cookies de terceros en Chrome Navega a > Configuración > Privacidad y seguridad > Cookies y otros datos de sitios > Bloquear cookies de terceros y habilita la opción.
2. En chrome://flags, establece el experimento Mitigación del seguimiento por rebote en Habilitado con eliminación.
3. Abre DevTools, por ejemplo, en la página de demostración, y navega a Application > Background services > Bounce tracking mitigations.
4. En la página de demostración, haz clic en un vínculo de rebote y espera (10 segundos) a que Chrome lo registre. La pestaña Problemas te advierte sobre la próxima eliminación del estado.
5. Haz clic en Forzar ejecución para borrar el estado de inmediato.

Notificaciones

Después de que un service worker recibe un mensaje push de un servidor, usa la API de Notifications para mostrar los datos a un usuario. Para registrar las notificaciones durante tres días, incluso cuando DevTools no esté abierto, haz lo siguiente:

1. Abre DevTools, por ejemplo, en esta página de demostración.

2. Navega a Application > Background services > Notifications y haz clic en Record.

   

3. En la página de demostración, haz clic en Programar notificación y Permitir cuando se te solicite.

4. Espera a que aparezca la notificación. DevTools registra los eventos de notificación en la tabla.

   

5. Haz clic en un evento para ver sus detalles en el espacio debajo de la tabla.

6. Puedes cerrar las Herramientas para desarrolladores y dejar que la grabación se ejecute durante hasta tres días. Para detener la grabación, haz clic en Detener.

Cargas especulativas

Las cargas especulativas permiten una carga de página casi instantánea según las reglas de especulación que defines. Esto permite que tu sitio web precargue y renderice previamente la mayoría de las páginas a las que se navega.

La precarga recupera un recurso con anticipación y la renderización previa va un paso más allá y renderiza toda la página en un proceso de renderización en segundo plano oculto.

Puedes depurar cargas especulativas en la sección Aplicación > Servicios en segundo plano > Cargas especulativas. La sección contiene tres vistas:

• Cargas especulativas. Contiene el estado especulativo de la página actual, la URL actual, las páginas que la página actual intenta cargar de forma especulativa y sus estados.
• Reglas. Contiene los conjuntos de reglas de la página actual en el panel Elementos y el estado general de las especulaciones.
• Especulación. Contiene una tabla con información sobre los intentos de carga especulativa y sus estados. Si un intento falló, puedes hacer clic en él en la tabla para ver información detallada y el motivo de la falla.

Intenta depurar las cargas especulativas en esta página de demostración:

1. Abre DevTools en la página y navega a Aplicación > Servicios en segundo plano > Cargas especulativas. Si no ves ninguna carga especulativa que haya iniciado la página, vuelve a cargarla.

   

2. La página de inicio de la demostración renderiza previamente dos páginas y no puede renderizar una. Haz clic en Ver todas las especulaciones.

3. En Conjeturas, selecciona la especulación con el estado Error para ver el Motivo del error, la sección con información detallada que se encuentra en la parte inferior.

   

   En este caso, la renderización previa falló porque no hay una página /next3.html en el sitio web.

4. Abre la sección Rules y haz clic en Status para ver el conjunto de reglas en la parte inferior. Si haces clic en el vínculo Conjunto de reglas, se te dirigirá al panel Elementos y se te mostrará dónde se define la regla de especulación.

   

   Nota: No puedes corregir la regla en esta pantalla ni en el panel Elementos porque DevTools no conserva los cambios arbitrarios del DOM en las cargas de página. Para corregir la regla en la fuente, configura un espacio de trabajo o simula el cambio anulando el contenido.

Para obtener una explicación más detallada, consulta Cómo depurar reglas de especulación.

Mensajería push

Para mostrar una notificación push a un usuario, un trabajador en primer plano primero debe usar la API de PushMessage para recibir datos de un servidor. Cuando el trabajador del servicio está listo para mostrar la notificación, usa la API de Notifications. Para registrar los mensajes push durante tres días, incluso cuando DevTools no esté abierta, haz lo siguiente:

1. Abre DevTools, por ejemplo, en esta página de demostración.

2. Navega a Application > Background services > Push Messaging y haz clic en Record.

   

3. En la página de demostración, activa Habilitar notificaciones push, haz clic en Permitir cuando se te solicite, escribe un mensaje y envíalo. DevTools registra los eventos de notificaciones push en la tabla.

   

   Nota: Además, en Application > Service Workers, puedes hacer clic en Push para enviar notificaciones de prueba desde DevTools.

4. Haz clic en un evento para ver sus detalles en el espacio debajo de la tabla.

5. Puedes cerrar las Herramientas para desarrolladores y dejar que la grabación se ejecute durante hasta tres días. Para detener la grabación, haz clic en Detener.

API de informes

Algunos errores solo ocurren en producción. Nunca los ves de forma local ni durante el desarrollo porque los usuarios, las redes y los dispositivos reales cambian el juego.

Por ejemplo, supongamos que tu sitio nuevo depende de software de terceros que usa document.write() para cargar secuencias de comandos críticas. Usuarios nuevos de todo el mundo abren tu sitio, pero es posible que tengan conexiones más lentas que las que usaste en las pruebas. Sin que lo sepas, tu sitio comienza a fallar porque Chrome interviene en document.write() en redes lentas. Como alternativa, te recomendamos que estés atento a las APIs obsoletas o que pronto dejarán de estarlo que podría estar usando tu base de código.

La API de Reporting está diseñada para ayudarte a supervisar las llamadas a la API obsoletas, los incumplimientos de seguridad de tu página y mucho más. Puedes configurar los informes como se describe en Supervisa tu aplicación web con la API de Reporting.

Para ver los informes que genera una página, sigue estos pasos:

1. Ve a chrome://flags/#enable-experimental-web-platform-features, establece Funciones experimentales de la plataforma web en Habilitada y reinicia Chrome.

2. Abre DevTools y navega a Application > Background services > Reporting API. Por ejemplo, puedes consultar los informes en esta página de demostración.

   

La pestaña API de Reporting se divide en tres partes:

• La tabla Informes con la siguiente información sobre cada informe:
  • URL que generó el informe
  • Tipo de incumplimiento
  • Informe de estado
  • Extremo de destino
  • Marca de tiempo de Generated at
  • Cuerpo del informe
• La sección de vista previa Cuerpo del informe Para obtener una vista previa del cuerpo de un informe, haz clic en él en la tabla de informes.
• La sección Extremos con una descripción general de todos los extremos configurados en el encabezado Reporting-Endpoints

Estado del informe

La columna Estado te indica si Chrome envió el informe correctamente, si está a punto de enviarlo o si se produjo un error.

Estado	Descripción
Success	El navegador envió el informe y el extremo respondió con un código de éxito (200 o algún otro código de respuesta de éxito 2xx).
Pending	El navegador intenta enviar el informe.
Queued	Se generó el informe y el navegador aún no intenta enviarlo. Un informe aparece como Queued en uno de estos dos casos: El informe es nuevo y el navegador está esperando a ver si llegan más informes antes de intentar enviarlo. El informe no es nuevo; el navegador ya intentó enviarlo, pero no pudo, y está esperando antes de volver a intentarlo.
MarkedForRemoval	Después de reintentarlo durante un tiempo (Queued), el navegador dejó de intentar enviar el informe y pronto lo quitará de su lista de informes para enviar.

Los informes se quitan después de un tiempo, independientemente de si se envían correctamente o no.

Punto clave: El estado Queued no siempre es informativo, ya que no indica con precisión si el envío falló o aún no se intentó. El uso de demoras de informes cortas es útil: un informe que permanece como Queued en ese caso probablemente indica que el envío falla.