Solución de problemas y registro

Depurar un service worker es difícil. Se trata del ciclo de vida, las actualizaciones, las cachés y la interacción entre todos estos aspectos. Por suerte, así como Workbox facilita el desarrollo de los 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, y se explica cómo funciona el registro de Workbox y cómo se puede configurar.

Herramientas de solución de problemas disponibles

Hay muchísimas herramientas disponibles en el navegador para depurar y solucionar problemas durante el desarrollo de un service worker. A continuación, se ofrecen 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 abordaron 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 a fin de depurar service workers. Puedes obtener más información sobre ellos en los siguientes recursos:

Registro de la caja de trabajo

Una mejora clave de la experiencia de los desarrolladores que ofrece Workbox es en 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 que tienen una insignia de Workbox. Cada mensaje se puede expandir 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, según si creas un paquete de Workbox personalizado o si usas 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 salidas de JavaScript que están listas para ejecutarse en el navegador. Cuando usas un agrupador, también puedes usar un complemento de Workbox específico del agrupador que ayude con el almacenamiento previo en caché, como workbox-webpack-plugin, o bien podrías empaquetar la lógica de almacenamiento en caché del 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 como 'production' o 'development'. workbox-webpack-plugin usará el registro de producción o desarrollo en Workbox según 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 el comportamiento de registro predeterminado se debe anular 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 mediante la opción mode de workbox-webpack-plugin para el método GenerateSW.

Sin un agrupador

Si bien los agrupadores son excelentes, no todos los proyectos los necesitan. Si te encuentras en una situación en la que deseas 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.) desde una CDN. La carga de los paquetes de desarrollo o producción dependerá de la URL que se use para acceder a tu aplicación web. De forma predeterminada, workbox-sw carga la versión de desarrollo de Workbox si tu aplicación web se ejecuta en http://localhost, y la versión de producción en el resto del momento.

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 todo el registro 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 de las ventajas de este enfoque es que es completamente independiente de la configuración del agrupador y funcionará sin importar si usas workbox-sw directamente o dependes de un agrupador para empaquetar tu service worker con tecnología de Workbox.

Más información

Si todavía tienes problemas para comprender qué sucede en un service worker con errores y los registros no son suficientes, 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 de contribución). Esto no solo le permite a un público amplio de desarrolladores leer y responder tus preguntas, sino que las respuestas a tus preguntas pueden ayudar a alguien en la misma situación más adelante.