Usa el panel Application para inspeccionar, modificar y depurar manifiestos de aplicaciones web, procesos de trabajo de servicio y cachés de procesos de trabajo de servicio.
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:
- 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 Progressive Web App en el panel Application. Si buscas ayuda con los otros subpaneles, consulta la última sección de esta guía, Otras guías del panel Application.
Resumen
- Usa la pestaña Manifiesto para inspeccionar el manifiesto de tu aplicación web.
- Usa la pestaña Service Workers para acceder a una amplia variedad de tareas relacionadas con los service workers, como cancelar el registro o actualizar un servicio, emular eventos de envío, desconectarse o detener un service worker.
- Consulta la caché del service worker desde la pestaña Almacenamiento en caché.
- Cancela el registro de un service worker y borra todo el almacenamiento y las memorias caché con un solo botón en la pestaña Liberar espacio de 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 se debe dirigir al usuario cuando se inicia desde la pantalla principal y cómo se ve la app durante el inicio.
Una vez que hayas configurado el manifiesto, podrás usar la pestaña Manifiesto del panel Aplicación para inspeccionarlo.
- Para ver el código del manifiesto, haz clic en el vínculo debajo de la etiqueta Manifiesto de la app (
manifest.webmanifesten la captura de pantalla anterior). - En las secciones Identity y Presentation, solo se muestran campos de la fuente del manifiesto de forma más intuitiva.
- 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 Prueba el registro de controladores 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 las Herramientas para desarrolladores encuentran un error, por ejemplo, un ícono que no se puede cargar, la pestaña Manifiesto muestra una sección de 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.
Activa la instalación
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 de 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 Herramientas para desarrolladores está en Modo de dispositivo. Sin embargo, si puedes agregar correctamente tu app a tu escritorio, también funcionará en dispositivos móviles.
Si quieres probar la experiencia genuina en dispositivos móviles, puedes conectar un dispositivo móvil real a las Herramientas para desarrolladores 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 accesos directos a aplicaciones te permiten proporcionar acceso rápido a algunas acciones comunes que los usuarios necesitan con frecuencia.
Para inspeccionar las combinaciones de teclas que definiste en el archivo de manifiesto, desplázate hasta las secciones Acceso directo #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 de controladores del 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 AWP.
Para probar el controlador, haz lo siguiente:
- 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 quieres que pruebe el controlador y haz clic en Probar protocolo.
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 service workers son una tecnología fundamental para el futuro de la plataforma web. Son secuencias de comandos que el navegador ejecuta en segundo plano, independiente de una página web. Estas secuencias de comandos te permiten acceder a funciones que no requieren páginas 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 del panel Application es el lugar principal de DevTools para inspeccionar y depurar los service workers.
- Si hay un service worker instalado en la página actualmente abierta, lo verás en esta pestaña. Por ejemplo, en la captura de pantalla anterior, hay un service worker instalado para el alcance de
https://airhorner.com/. - La casilla de verificación
Sin conexión activa el modo sin conexión de DevTools. Esto equivale al modo sin conexión disponible en el panel Red o a la opción Go offlineen el menú de comandos. - La casilla de verificación
Update on reload obliga al service worker a actualizarse cada vez que se carga la página. - Con la casilla de verificación
Bypass for network, se omite el service worker y se obliga al navegador a ir a la red para obtener los recursos solicitados. - El vínculo Solicitudes de red te lleva al panel Red con una lista de solicitudes interceptadas relacionadas con el service worker (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 carga útil (también conocida como señal).
- El botón Sync emula un evento de sincronización en segundo plano.
- El vínculo Cancelar registro cancela el registro del service worker especificado. Consulta Liberar espacio de almacenamiento para ver cómo cancelar el registro de un service worker y limpiar el almacenamiento y la memoria caché con un solo clic.
- En la línea Fuente, se indica cuándo se instaló el service worker que se encuentra en ejecución. El vínculo es el nombre del archivo de origen del service worker. Si haces clic en el vínculo, accederás al código del service worker.
- En la línea Status, se indica el estado del service worker. El número de esta línea (
#16en la captura de pantalla) indica la cantidad de veces que se actualizó el trabajador de servicio. Si habilitas la casilla de verificación
Update on reload, notarás que el número aumentará con cada carga de página.
Junto al estado, verás un vínculo para iniciar (si el service worker está detenido) o para detener (si está en ejecución). Los service workers están diseñados para que el navegador los detenga e inicie en cualquier momento. Detener explícitamente el trabajador de servicio con el vínculo stop puede simular eso. Detener el service worker es una excelente manera de probar cómo se comporta tu código cuando el service worker vuelve a iniciarse. Con frecuencia, revela errores debidos a suposiciones incorrectas sobre el estado global persistente. - En la línea Clients, se indica el origen al que está asignado el service worker. El botón focus es útil principalmente cuando tienes varios trabajadores de servicio registrados. Si haces clic en el botón de enfoque junto a un service worker que se ejecuta en una pestaña diferente, Chrome se enfoca en esa pestaña.
En la tabla Ciclo de actualización, se muestran las actividades del service worker 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 service workers.
Cachés de service worker
La pestaña Cache Storage proporciona una lista de solo lectura de los recursos que se almacenaron en caché con la API de caché (del service worker).
Ten en cuenta que la primera vez que abras un caché y agregues un recurso, es posible que DevTools no detecte el cambio. Vuelve a cargar la página para ver la caché.
Si tienes dos o más cachés abiertas, las verás debajo del menú desplegable Almacenamiento en caché.
Uso de cuota
Algunas respuestas dentro de la pestaña Almacenamiento en caché pueden marcarse como “opacas”. Esto hace referencia a una respuesta recuperada de un origen diferente, como desde una CDN o una API remota, cuando CORS no está habilitado.
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 arroja 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 deseas 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 aplicaciones web progresivas. Esta pestaña te permite cancelar el registro de los service workers y borrar todas las cachés y el almacenamiento con solo un clic. Consulta la siguiente sección para obtener más información.
Guías relacionadas:
Otras guías del panel Application
Consulta las guías a continuación para obtener más ayuda sobre otros paneles del panel Aplicación.
Guías relacionadas: