Usa el panel Application para inspeccionar, modificar y depurar manifiestos de apps web, service workers y cachés de service workers.
Las apps web progresivas (AWP) son aplicaciones modernas y de alta calidad compiladas con tecnología web. Las AWP ofrecen capacidades similares a las de las apps para iOS, Android y computadoras. Son los siguientes:
- Es confiable incluso en condiciones de red inestables.
- Se puede instalar en las plataformas de lanzamiento de los sistemas operativos, como la carpeta Applications en Mac OS X, el menú Start en Windows y la pantalla principal en Android y iOS.
- Aparecerán en los selectores de actividades, los motores de búsqueda del dispositivo, como Spotlight, y en las hojas de uso compartido de contenido.
En esta guía, solo se analizan las funciones de la app web progresiva del panel Application. Si buscas ayuda con los otros paneles, consulta la última sección de esta guía, Otras guías de paneles de la aplicación.
Resumen
- Usa la pestaña Manifiesto para inspeccionar el manifiesto de tu app web.
- Usa la pestaña Service Workers para realizar una amplia variedad de tareas relacionadas con los trabajadores de servicio, como cancelar el registro o actualizar un servicio, emular eventos push, desconectarse o detener un trabajador de servicio.
- Consulta la caché de tu trabajador del servicio en la pestaña Almacenamiento en caché.
- Cancela el registro de un trabajador de servicio y borra todo el almacenamiento y las cachés con un solo clic en la pestaña Borrar almacenamiento.
Manifiesto de la app web
Si deseas que los usuarios puedan agregar tu app a la carpeta Applications en Mac OS X, al menú Start en Windows y a la pantalla principal en Android y iOS, necesitas un manifiesto de app web. El manifiesto define cómo aparece la app en la pantalla principal, adónde dirigir al usuario cuando se inicia desde la pantalla principal y cómo se ve la app cuando se inicia.
Una vez que hayas configurado tu manifiesto, puedes usar la pestaña Manifiesto del panel Aplicación para inspeccionarlo.
- Para ver la fuente del manifiesto, haz clic en el vínculo que se encuentra debajo de la etiqueta Manifiesto de la app (
manifest.webmanifesten la captura de pantalla anterior). - Las secciones Identity y Presentation solo muestran campos de la fuente del manifiesto de una manera más fácil de usar.
- La sección Controladores de protocolo te permite probar el registro del controlador de protocolo de URL de tu AWP con un clic. Para obtener más información, consulta Cómo probar el registro del controlador de protocolo de URL.
- En la sección Íconos, se muestran todos los íconos que especificaste y puedes verificar sus máscaras.
- El conjunto de secciones Atajo #N muestra información sobre todos tus objetos de atajo.
- El conjunto de secciones Captura de pantalla n°N muestra las capturas de pantalla para una IU de instalación más enriquecida de tu app.
Además, si DevTools encuentra un error, como un ícono que no se puede cargar, la pestaña Manifiesto muestra una sección Instalabilidad que describe el error.
Cómo ver y verificar íconos adaptables
En la sección Íconos de la pestaña Manifiesto, se muestran todos los íconos de tu aplicación. En esta sección, también puedes verificar las áreas seguras para los íconos enmascarables, el formato de íconos que se adaptan a las plataformas.
Para recortar los íconos de modo que solo se vea el área segura mínima, marca 
Solo mostrar el área segura mínima de los íconos enmascarables.
Si todo el logotipo es visible en el área segura, puedes continuar.
Instalación del activador
Chrome te permite habilitar y promover la instalación de tu AWP directamente desde su interfaz de usuario. Obtén información para proporcionar tu propia experiencia de instalación en la app.
Para activar el flujo de instalación de tu AWP, haz lo siguiente:
- Abre la página de destino de la AWP en Chrome.
En el lado derecho de la barra de direcciones en la parte superior, haz clic en
Instalar.
Sigue las instrucciones en pantalla.
La función Install app no puede simular el flujo de trabajo para dispositivos móviles. Observa cómo el navegador Chrome para computadoras de escritorio muestra el botón de instalación en la barra de direcciones, aunque DevTools esté en el Modo de dispositivo. Sin embargo, si puedes agregar tu app a la computadora de escritorio, también funcionará en dispositivos móviles.
Si quieres probar la experiencia real de los dispositivos móviles, puedes conectar un dispositivo móvil real a DevTools a través de la depuración remota. Para activar la instalación en el dispositivo móvil conectado, abre el menú de tres puntos 
y haz clic en 
Instalar app.
Cómo inspeccionar combinaciones de teclas
Los atajos de la app te permiten proporcionar acceso rápido a algunas acciones comunes que los usuarios necesitan con frecuencia.
Para inspeccionar los atajos que definiste en tu archivo de manifiesto, desplázate hasta las secciones Shortcut #N de la pestaña Manifiesto.
Inspecciona las capturas de pantalla para obtener una IU de instalación más enriquecida
Cuando agregas una descripción y un conjunto de capturas de pantalla a tu archivo de manifiesto, tu app obtiene un diálogo de instalación más enriquecido.
Para inspeccionar las capturas de pantalla, desplázate hasta las secciones Captura de pantalla #N de la pestaña Manifiesto.
Prueba el registro del controlador de protocolo de URL
Las AWP pueden controlar vínculos que usan un protocolo específico para brindar una experiencia más integrada. Para obtener información sobre cómo crear un controlador, consulta Registro de controladores de protocolo de URL para AWPs.
Para probar el controlador, sigue estos pasos:
- Abre DevTools en la página de destino de tu AWP. Por ejemplo, consulta esta PWA de demostración.
- En la página de demostración, instala la AWP y vuelve a cargar la app después de la instalación. El navegador ahora registró la AWP como un controlador para el protocolo
web+coffee. - En la sección Application > Manifest > Protocol Handler, ingresa la URL que deseas que el controlador pruebe y haz clic en Test protocol.
En este ejemplo, el controlador puede procesar americano,chaiylatte-macchiato. - Cuando Chrome te pregunte si puede abrir la app, haz clic en Open Protocol Handler para confirmar.
- En el siguiente diálogo, permite que la app controle los vínculos
web+coffee.
Si el controlador procesa correctamente el vínculo, verás una imagen de una taza de café abierta en la app.
Service workers
Los trabajadores de servicio son una tecnología fundamental en la futura plataforma web. Son secuencias de comandos que el navegador ejecuta en segundo plano, separadas de una página web. Estas secuencias de comandos te permiten acceder a funciones que no necesitan una página web ni interacción del usuario, como notificaciones push, sincronización en segundo plano y experiencias sin conexión.
Guías relacionadas:
La pestaña Service Workers en el panel Application es el lugar principal de DevTools para inspeccionar y depurar los trabajadores de servicio.
- Si hay un service worker instalado en la página que está abierta, lo verás en esta pestaña. Por ejemplo, en la captura de pantalla anterior, hay un trabajador de servicio instalado para el alcance de
https://airhorner.com/. - La casilla de verificación
Sin conexión pone DevTools en modo sin conexión. Esto equivale al modo sin conexión disponible en el panel Red o en la opción Go offlinedel menú de comandos. - La casilla de verificación
Actualizar cuando se vuelva a cargar obliga al trabajador del servicio a actualizarse en cada carga de página. - La casilla de verificación Evitar para la red de
omite el trabajador de servicio y obliga al navegador a ir a la red para obtener los recursos solicitados. - El vínculo Solicitudes de red te dirige al panel Red con una lista de solicitudes interceptadas relacionadas con el trabajador de servicio (filtro
is:service-worker-intercepted). - El vínculo Actualizar realiza una actualización única del trabajador de servicio especificado.
- El botón Push emula una notificación push sin una carga útil (también conocida como tickle).
- El botón Sync emula un evento de sincronización en segundo plano.
- El vínculo Unregister cancela el registro del service worker especificado. Consulta Liberar espacio de almacenamiento para obtener una forma de cancelar el registro de un trabajador de servicio y borrar el almacenamiento y las cachés con un solo clic.
- La línea Source te indica cuándo se instaló el trabajador de servicio que se está ejecutando actualmente. El vínculo es el nombre del archivo fuente del trabajador del servicio. Si haces clic en el vínculo, se te redireccionará a la fuente del trabajador del servicio.
- La línea Status indica el estado del service worker. El número de esta línea (
#16en la captura de pantalla) indica cuántas veces se actualizó el trabajador de servicio. Si habilitas la casilla de verificación
Update on reload, verás que el número aumenta en cada carga de página.
Junto al estado, verás un vínculo para iniciar (si el trabajador de servicio está detenido) o para detener (si el trabajador de servicio está en ejecución). Los service workers están diseñados para que el navegador los detenga y los inicie en cualquier momento. Detener de forma explícita tu trabajador de servicio con el vínculo stop puede simular eso. Detener el trabajador de servicio es una excelente manera de probar cómo se comporta tu código cuando el trabajador de servicio se reinicia. A menudo, revela errores debido a suposiciones erróneas sobre el estado global persistente. - La línea Clientes indica el origen al que se asignó el trabajador del servicio. El botón focus es útil principalmente cuando tienes varios trabajadores del servicio registrados. Si haces clic en el botón focus junto a un trabajador de servicio que se ejecuta en una pestaña diferente, Chrome se enfocará en esa pestaña.
En la tabla Ciclo de actualización, se muestran las actividades del trabajador del servicio y sus tiempos transcurridos, como la instalación, la espera y la activación. Para ver la marca de tiempo exacta de cada actividad, haz clic en los botones
Expandir.
Para obtener más información, consulta El ciclo de vida del trabajador de servicio.
Si el trabajador de servicio causa algún error, la pestaña Service Workers muestra un ícono de Error 
con la cantidad de errores junto a la línea Source.
El vínculo con el número te dirige a la consola con todos los errores registrados.
Para ver información sobre todos los trabajadores de servicio, haz clic en Ver todos los registros en la parte inferior de la pestaña Trabajadores de servicio. Este vínculo te dirige a chrome://serviceworker-internals/?devtools, donde puedes depurar aún más tus trabajadores del servicio.
Cachés de service worker
La pestaña Almacenamiento en caché proporciona una lista de solo lectura de los recursos que se almacenaron en caché con la API de caché (service worker).
Ten en cuenta que la primera vez que abras una caché y le agregues un recurso, es posible que DevTools no detecte el cambio. Vuelve a cargar la página y deberías ver la caché.
Si tienes dos o más cachés abiertas, las verás en la lista debajo del menú desplegable Almacenamiento en caché.
Uso de cuota
Es posible que algunas respuestas de la pestaña Almacenamiento en caché se marquen como "opacas". Se refiere a una respuesta recuperada de un origen diferente, como de una CDN o una API remota, cuando no está habilitado el CORS.
Para evitar la filtración de información entre dominios, se agrega un padding significativo al tamaño de una respuesta opaca que se usa para calcular los límites de cuota de almacenamiento (es decir, si se genera una excepción QuotaExceeded) y que informa la API de navigator.storage.
Los detalles de este padding varían de un navegador a otro, pero, en el caso de Google Chrome, esto significa que el tamaño mínimo que cualquier respuesta opaca almacenada en caché contribuye al uso general de almacenamiento es de aproximadamente 7 megabytes. Debes tener esto en cuenta cuando determines cuántas respuestas opacas quieres almacenar en caché, ya que podrías superar fácilmente las limitaciones de cuota de almacenamiento mucho antes de lo que esperas en función del tamaño real de los recursos opacos.
Guías relacionadas:
- Stack Overflow: ¿Qué limitaciones se aplican a las respuestas opacas?
- Workbox: Información sobre la cuota de almacenamiento
Liberar espacio de almacenamiento
La pestaña Clear Storage es una función muy útil cuando se desarrollan apps web progresivas. Esta pestaña te permite cancelar el registro de los trabajadores del servicio y borrar todas las cachés y el almacenamiento con un solo clic. Consulta la siguiente sección para obtener más información.
Guías relacionadas:
Otras guías del panel de la aplicación
Consulta las siguientes guías para obtener más ayuda sobre los otros paneles del panel Application.
Guías relacionadas: