Depuración de una aplicación web progresiva (PWA)

Use la herramienta Aplicación para inspeccionar, modificar y depurar manifiestos de aplicación web de PWA, trabajos de servicio y cachés de trabajo de servicio.

La herramienta ) incluye los siguientes paneles para las características de PWA:

• Use el panel Manifiesto para inspeccionar el manifiesto de la aplicación web.

• Use el panel Trabajadores del servicio para las tareas relacionadas con service-worker, como:

  • Anular el registro o actualizar un servicio.
  • Emulación de eventos de inserción.
  • Sin conexión.
  • Detener un trabajador de servicio.

• Use el panel Almacenamiento en caché para ver la caché del trabajo del servicio.

• Use el panel Almacenamiento para ver la cantidad de datos que la aplicación almacena en el dispositivo y borrar los datos almacenados.

Las características que se describen a continuación son características de la herramienta Application que son pertinentes para los PWA. Para obtener ayuda sobre las otras características y paneles de la herramienta Aplicación , consulte:

• Visualización de los archivos de recursos que componen una página web
• Ver y editar el almacenamiento local

Consulta también:

• Introducción a las aplicaciones web progresivas (PWA)

Manifiesto de aplicación web

Si quieres que los usuarios puedan agregar la aplicación a sus pantallas de inicio móviles, necesitas un manifiesto de aplicación web. El manifiesto define cómo aparece la aplicación en la pantalla de inicio, dónde dirigir al usuario al iniciarse desde la pantalla principal y cómo se ve la aplicación al iniciarse.

Para inspeccionar un manifiesto:

1. Vaya a la página web que usa el manifiesto, como Airhorner.com, en una nueva ventana o pestaña.

2. Haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar.

   Se abre DevTools.

3. En DevTools, seleccione el de aplicación .

4. En el esquema de la izquierda, en la sección Aplicación , seleccione Manifiesto.

   Se muestra el panel Manifiesto de aplicación, donde puede inspeccionar el manifiesto:

El panel Manifiesto de aplicación contiene las secciones siguientes:

• Sección superior, que contiene el vínculo de manifiesto

• Identidad

• Presentación

• Controladores de protocolo

• Iconos

• Superposición de controles de ventana

• Captura de pantalla 1

• Captura de pantalla 2

• Para ver el archivo de origen del manifiesto, haga clic en el vínculo situado debajo de la etiqueta Manifiesto de aplicación. En la ilustración anterior, ese vínculo es manifest.json, que abre https://airhorner.com/manifest.json, para Airhorner.com.

• Las secciones Identidad y Presentación muestran los campos del origen del manifiesto en una pantalla más fácil de usar.

• La sección Iconos muestra todos los iconos que se han especificado en el manifiesto.

Trabajadores de servicio

Los trabajadores de servicios son una tecnología fundamental en la plataforma web. Los trabajos de servicio son scripts que el explorador ejecuta en segundo plano, separados de una página web. Los scripts de trabajo de servicio permiten a la aplicación acceder a características que no necesitan una página web o interacción del usuario, como notificaciones push, sincronización en segundo plano y experiencias sin conexión.

El lugar principal de DevTools para inspeccionar y depurar trabajadores del servicio es el panel Trabajadores del servicio en el de aplicación .

Para ver los trabajos de servicio:

1. Vaya a una página web, como Airhorner.com, en una nueva ventana o pestaña.

2. Haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar.

   Se abre DevTools.

3. En DevTools, seleccione el de aplicación .

4. En el esquema de la izquierda, en la sección Aplicación , seleccione Trabajos de servicio.

   Se muestra el panel Trabajadores del servicio:

• Si un trabajador del servicio está instalado en la página abierta actualmente, el trabajador del servicio aparece en el panel Trabajadores del servicio. Por ejemplo, en la ilustración anterior, hay un trabajo de servicio instalado para el ámbito de https://weather-pwa-sample.firebaseapp.com.

• La casilla Sin conexión coloca DevTools en modo sin conexión. Esto equivale al modo sin conexión disponible en la herramienta o en la Go offline opción del menú Comandos.

• La casilla Actualizar al volver a cargar obliga al trabajador del servicio a actualizarse en cada carga de página.

• La casilla Omisión de red omite el trabajo de servicio y obliga al explorador a ir a la red para los recursos solicitados.

• El vínculo Solicitudes de red le lleva a la herramienta Red con una lista de solicitudes interceptadas relacionadas con el trabajo de servicio (el is:service-worker-intercepted filtro). Consulte Visualización de solicitudes de red controladas por un trabajador del servicio, a continuación.

• El botón Actualizar realiza una actualización única del trabajo de servicio especificado.

• El botón Push emula una notificación push sin una carga (también conocida como cosquillas).

• El botón Sincronizar emula un evento de sincronización en segundo plano.

• El vínculo Anular registro anula el registro del trabajo de servicio especificado. Para anular el registro de un trabajador del servicio y borrar el almacenamiento y las cachés con un solo clic con un botón, consulte Borrar almacenamiento a continuación.

• La línea Origen le indica cuándo se instaló el trabajo de servicio en ejecución. El vínculo es el nombre del archivo de origen del trabajo de servicio. Al elegir en el vínculo, se le envía al origen del trabajo de servicio.

• La línea Estado indica el estado del trabajador del servicio. El número de identificador situado junto al indicador de estado verde (#36 en la ilustración anterior) es para el trabajo de servicio activo actualmente.

  Junto al estado:

  • Si se detiene el trabajo de servicio, se muestra un botón de inicio .
  • Si el trabajo de servicio se está ejecutando, se muestra un botón de detención .

  Los trabajadores de servicio están diseñados para que el explorador los detenga e inicie en cualquier momento. Detener explícitamente el trabajo de servicio mediante el botón detener puede simularlo.

  Detener el trabajo de servicio es una excelente manera de probar cómo se comporta el código cuando el trabajo de servicio vuelve a iniciar la copia de seguridad. Con frecuencia revela errores debido a suposiciones erróneas sobre el estado global persistente.

• La línea Clientes indica el origen al que se limita el trabajo de servicio. El botón de enfoque es principalmente útil cuando se ha habilitado la casilla mostrar todo . Cuando esa casilla está habilitada, se muestran todos los trabajadores de servicio registrados. Si hace clic en el botón de enfoque situado junto a un trabajo de servicio que se ejecuta en una pestaña diferente, Microsoft Edge se centra en esa pestaña.

• La tabla Ciclo de actualización muestra las actividades del trabajador del servicio y sus tiempos transcurridos, como Instalar, Esperar y Activar. Para ver la marca de tiempo exacta de cada actividad, haga clic en los botones Expandir ().

Si el trabajador del servicio produce errores, se muestra una etiqueta Errores .

Consulta también:

• API de Service Worker : en MDN, acerca de los trabajadores del servicio.

Mostrar las solicitudes de red controladas por un trabajador del servicio

En el panel Trabajadores del servicio de la herramienta Aplicación , puede acceder rápidamente a la lista de solicitudes de red que controla un trabajador de servicio, a través de la herramienta Red .

Para mostrar las solicitudes de red que administra un trabajador del servicio:

1. Vaya a una página web, como Airhorner.com, en una nueva ventana o pestaña.

2. Haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar.

   Se abre DevTools.

3. En DevTools, seleccione el de aplicación .

4. En el esquema de la izquierda, en la sección Aplicación , seleccione Trabajos de servicio.

   Se muestra el panel Trabajadores del servicio.

5. En la parte superior derecha del panel Trabajadores del servicio, haga clic en el botón Solicitudes de red .

   Se abre Herramienta de red .

   El cuadro de texto Filtro contiene is:service-worker-intercepted. Este filtro solo muestra las solicitudes que controló este trabajador del servicio.

6. Actualice la página web.

7. Seleccione una de las solicitudes, como main.css.

   Aparecerá la barra lateral.

8. En la barra lateral, haga clic en la pestaña Temporización .

   La sección Service Worker muestra información de tiempo sobre las fases Startup y respondWith .

Memorias caché de Service Worker

El panel Almacenamiento en caché proporciona una lista de solo lectura de los recursos que se han almacenado en caché mediante la API de caché (service worker):

La primera vez que abra una memoria caché y agregue un recurso, es posible que DevTools no detecte el cambio. Actualice la página para mostrar la memoria caché.

Todas las cachés abiertas aparecen en el expansador Almacenamiento en caché .

Uso de cuota

Algunas respuestas del panel Almacenamiento en caché se pueden marcar como "opacas". Esto hace referencia a una respuesta recuperada de un origen diferente, como desde una RED CDN o una API remota, cuando CORS no está habilitado.

Con el fin de evitar la pérdida de información entre dominios, se agrega un relleno significativo al tamaño de una respuesta opaca utilizada para calcular los límites de cuota de almacenamiento (por ejemplo, si se produce una QuotaExceeded excepción) y notificada por la navigator.storage API.

Los detalles de este relleno varían de un explorador a otro, pero para Microsoft Edge, esto significa que el tamaño mínimo que cualquier respuesta opaca única almacenada en caché contribuye al uso general del almacenamiento es de aproximadamente 7 megabytes. Recuerde el relleno al determinar cuántas respuestas opacas desea almacenar en caché, ya que puede superar fácilmente las limitaciones de cuota de almacenamiento mucho antes de lo esperado en función del tamaño real de los recursos opacos.

Guías relacionadas:

• Stack Overflow: ¿Qué limitaciones se aplican a las respuestas opacas?

Borrar almacenamiento

La pestaña Borrar almacenamiento es útil al desarrollar una aplicación web progresiva. Use el panel Borrar almacenamiento para anular el registro de los trabajadores del servicio y borrar todas las memorias caché y almacenamiento, con un solo botón y haga clic.

Consulte también

• Inspeccionar actividad de red

Nota

Algunas partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y se usan según los términos descritos en la Licencia internacional de Creative Commons Attribution 4.0. La página original se encuentra aquí y está creada por Kayce Basques.

Esta obra está licenciada bajo una Licencia Internacional Creative Commons Attribution 4.0.