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 permiten que tu sitio web envíe y reciba actualizaciones, incluso cuando el usuario no lo tenga 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 no esté abierto. Esto puede ayudarte a asegurarte de que los eventos se envíen y reciban según lo esperado.

Además de eventos de servicio en segundo plano, Herramientas para desarrolladores puede hacer lo siguiente:

• Mostrarte informes que Chrome ya envió o está por enviar usando la API de Reporting.
• Te permiten depurar y probar la memoria caché atrás/adelante con un solo clic.

Recuperación en segundo plano

La API de recuperación en segundo plano permite que un service worker descargue de manera confiable recursos grandes, 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 Herramientas para desarrolladores no esté abierto, haz lo siguiente:

1. Abre Herramientas para desarrolladores, por ejemplo, en esta página de demostración.

2. Navega a Aplicación > Servicios en segundo plano > Recuperación en segundo plano y haz clic en Registro.

   

3. En la página de demostración, haz clic en Almacenar recursos localmente. Esto activa alguna actividad de recuperación en segundo plano. Herramientas para desarrolladores registra los eventos en la tabla.

   

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

5. Puedes cerrar Herramientas para desarrolladores y dejar que se ejecute la grabación por un máximo de tres días. Para detener la grabación, haz clic en Detener.

Sincronización en segundo plano

La API de sincronización en segundo plano permite que un service worker sin conexión envíe datos a un servidor una vez que haya restablecido una conexión a Internet confiable. Para registrar eventos de sincronización en segundo plano durante tres días, incluso cuando Herramientas para desarrolladores no esté abierto, haz lo siguiente:

1. Abre Herramientas para desarrolladores, por ejemplo, en esta página de demostración.

2. Navega a Aplicación > Servicios en segundo plano > Sincronización en segundo plano y haz clic en Grabar.

   

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

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

   

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

5. Puedes cerrar Herramientas para desarrolladores y dejar que se ejecute la grabación por un máximo de tres días. Para detener la grabación, haz clic en Detener.

Mitigaciones del seguimiento por rebote (experimental)

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

Para forzar las mitigaciones de seguimiento, sigue estos pasos:

1. Bloquear cookies de terceros en Chrome. Navega y habilita > Configuración > Privacidad y seguridad > Cookies y otros datos de sitios > Bloquear cookies de terceros.
2. En chrome://flags, establece el experimento Mitigaciones de seguimientos por rebote como Habilitado con eliminación.
3. Por ejemplo, abre Herramientas para desarrolladores en la página de demostración y navega a Aplicación > Servicios en segundo plano > Mitigaciones de seguimientos por rebote.
4. En la página de demostración, haz clic en un vínculo de rebote y espera (10 segundos) a que Chrome registre el rebote. En la pestaña Problemas, se te advierte sobre la próxima eliminación de 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 de aplicación de un servidor, el service worker usa la API de Notifications para mostrarle los datos a un usuario. Para registrar notificaciones durante tres días, incluso cuando Herramientas para desarrolladores no esté abierto, haz lo siguiente:

1. Abre Herramientas para desarrolladores, por ejemplo, en esta página de demostración.

2. Navega a Aplicación > Servicios en segundo plano > Notificaciones y haz clic en Registro.

   

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. Las Herramientas para desarrolladores registran los eventos de notificación en la tabla.

   

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

6. Puedes cerrar Herramientas para desarrolladores y dejar que se ejecute la grabación por un máximo de tres días. Para detener la grabación, haz clic en Detener.

Cargas especulativas

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

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

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.
• Especulaciones. Contiene una tabla con información sobre intentos de carga especulativas y sus estados. Si un intento falló, puedes hacer clic en él en la tabla para ver la información detallada y el motivo de la falla.

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

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

   

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

3. En Speculations, selecciona la especulación con el estado Failure para ver la sección Failure reason con información detallada en la parte inferior.

   

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

4. Abre la sección Reglas y haz clic en Estado para ver la regla establecida en la parte inferior. Si haces clic en el vínculo Conjunto de reglas, accederás al panel Elementos y verás dónde se define la regla de especulación.

   

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 service worker debe usar primero la API de push Message para recibir datos de un servidor. Cuando el service worker está listo para mostrar la notificación, usa la API de Notifications. Para registrar mensajes push durante tres días, incluso si Herramientas para desarrolladores no está abierta:

1. Abre Herramientas para desarrolladores, por ejemplo, en esta página de demostración.

2. Navega a Aplicación > Servicios en segundo plano > Push Messaging y haz clic en Record.

   

3. En la página de demostración, activa o desactiva Habilitar notificaciones push, haz clic en Permitir cuando se te solicite, escribe un mensaje y envíalo. Las Herramientas para desarrolladores registran los eventos de notificaciones push en la tabla.

   

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

5. Puedes cerrar Herramientas para desarrolladores y dejar que se ejecute la grabación por un máximo de 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 las reglas del 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 probaste. Si no reconoces, tu sitio comienza a fallar porque Chrome interviene en contra document.write() en redes lentas. Como alternativa, te recomendamos que estés atento a las APIs que dejaron de estar disponibles o que pronto lo estarán, 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 la opción Funciones experimentales de la plataforma web como Habilitadas y reinicia Chrome.

2. Abre Herramientas para desarrolladores y navega a Aplicación > Servicios en segundo plano > API de Reporting. Por ejemplo, puedes consultar 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 provocó la generación del informe
  • Tipo de incumplimiento
  • Estado del informe
  • Extremo de destino
  • Marca de tiempo de generado
  • Cuerpo del informe
• Sección de vista previa en el Cuerpo del informe. Para obtener una vista previa del cuerpo de un informe, haz clic en un informe 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

En la columna Estado, se indica si Chrome envió el informe correctamente, si está a punto de enviarlo o si falló.

Los informes se quitan después de un tiempo, sin importar si se enviaron o no correctamente.