Solución de problemas y registro

La depuración de un service worker es difícil. Se trata del ciclo de vida, las actualizaciones, las cachés y la interacción entre todos estos elementos. Por suerte, así como Workbox facilita el desarrollo de service workers, también facilita la depuración a través de su registro informativo. En esta página, se mencionan algunas de las herramientas de depuración disponibles, además de cómo funciona el registro de Workbox y cómo se puede configurar.

Herramientas de solución de problemas disponibles

Hay un montón de herramientas disponibles en el navegador para depurar y solucionar problemas durante el desarrollo de un service worker. A continuación, te ofrecemos algunos recursos para que comiences a usar el navegador que prefieras.

Chrome y Edge

Chrome (y las versiones recientes de Edge basadas en el motor Blink) cuentan con un conjunto completo de herramientas para desarrolladores. Algunas de esas herramientas (específicamente en las Herramientas para desarrolladores de Chrome) se mencionaron anteriormente en esta documentación, pero hay más por descubrir:

Firefox

Los usuarios de Firefox pueden consultar los siguientes recursos:

Safari

Actualmente, Safari tiene un conjunto más limitado de herramientas para desarrolladores para depurar service workers. Puedes obtener más información sobre ellas en estos recursos:

Registro de la caja de trabajo

Una mejora clave de la experiencia de los desarrolladores que ofrece Workbox es su registro informativo. Cuando el registro está habilitado, Workbox registra casi toda su actividad de una manera distintiva y funcional.

Captura de pantalla de los mensajes de registro de Workbox en la consola de Herramientas para desarrolladores de Chrome. Los mensajes de registro se distinguen de los registros normales de la consola con la insignia Caja de trabajo. Se puede expandir cada mensaje para obtener más información de depuración.

Las compilaciones de desarrollo de Workbox activan el registro de forma predeterminada, mientras que las de producción lo desactivan. Existen diferentes pasos para cambiar entre las compilaciones de desarrollo y producción, en función de si estás creando un paquete personalizado de Workbox o usando una copia empaquetada previamente a través de workbox-sw.

Con o sin un agrupador

Los agrupadores son herramientas que toman código de módulos individuales y crean resultados de JavaScript listos para ejecutarse en el navegador. Cuando usas un agrupador, también puedes usar un complemento de Workbox específico del agrupador que te ayude con el almacenamiento previo en caché, como workbox-webpack-plugin, o quizás solo estés agrupando la lógica del almacenamiento en caché en el entorno de ejecución de Workbox. De cualquier manera, el registro de Workbox se ve afectado por la configuración de un modo de producción en la configuración del agrupador:

  • En webpack, la opción de configuración mode se puede establecer en 'production' o 'development'. workbox-webpack-plugin usará el registro de producción o desarrollo en Workbox en función de este valor.
  • En el caso de Rollup, rollup-plugin-workbox acepta una opción de configuración mode que también afecta si Workbox registra algo en la consola. Si usas Rollup sin el complemento específico de Workbox, deberás configurar @rollup/plugin-replace para sustituir process.env.NODE_ENV por 'development' o 'production'.

Supongamos que se debe anular el comportamiento de registro predeterminado durante el desarrollo. En ese caso, el complemento de Workbox adecuado para tu agrupador debería permitirte codificar una preferencia para depurar registros en su configuración. Por ejemplo, puedes inhabilitar el registro en Workbox a través de la opción mode de workbox-webpack-plugin para el método GenerateSW.

Sin agrupador

Si bien los agrupadores son geniales, no todos los proyectos los necesitan. Si te encuentras en una situación en la que quieres agregar Workbox a un proyecto que no usa un agrupador, workbox-sw es la manera de hacerlo.

El módulo workbox-sw simplifica la carga de otros módulos de Workbox (p.ej., workbox-routing, workbox-precaching, etc.) de una CDN. La carga de los paquetes de desarrollo o producción dependerá de la URL que uses para acceder a tu app web. De forma predeterminada, workbox-sw carga la versión de desarrollo de Workbox si tu app web se ejecuta en http://localhost y la versión de producción en el resto de los momentos.

Puedes anular el comportamiento predeterminado llamando al método setConfig de Workbox para establecer la opción debug en true:

// Load workbox-sw from a CDN
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js');

// This must come before any other workbox.* methods.
workbox.setConfig({
  debug: true
});

// Now use workbox.routing.*, workbox.precaching.*, etc.

Desactiva el registro en compilaciones de desarrollo en cualquier flujo de trabajo

Independientemente de si usas un agrupador o no, puedes desactivar todos los registros en las compilaciones de desarrollo si asignas true a una variable self.__WB_DISABLE_DEV_LOGS especial en tu service worker:

//
self.__WB_DISABLE_DEV_LOGS = true;

// The rest of your Workbox service worker code goes here

Una ventaja de este enfoque es que es completamente independiente de tu configuración de agrupador y funcionará tanto si usas workbox-sw directamente como si dependes de un agrupador para que empaquete tu service worker potenciado por Workbox por ti.

Más información

Si aún tienes dificultades para descubrir qué sucede en un service worker con errores y el registro no es suficiente, publica una pregunta en Stack Overflow con la etiqueta workbox. Si no encuentras la respuesta allí, informa un problema en GitHub (después de leer los lineamientos para contribuir). Esto no solo permite que un amplio público de desarrolladores lea y responda tus preguntas, sino que la respuesta a tu pregunta podría ayudar a alguien en la misma situación más adelante.