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 apps para iOS, Android y computadoras de escritorio. que son las siguientes:
- Confiables incluso en condiciones de red inestables
- Instalables para iniciar superficies de sistemas operativos, como la carpeta Applications en Mac OS X, el menú Start en Windows y la pantalla principal en Android y iOS
- Aparecen en los conmutadores de actividad, los motores de búsqueda de dispositivos, 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 en los otros paneles, consulta la última sección de esta guía, Otras guías del panel Application.
Resumen
- Usa la pestaña Manifest para inspeccionar el manifiesto de tu app web.
- Usa la pestaña Service Workers para una amplia gama de tareas relacionadas con el service worker, como anular el registro o actualizar un servicio, emular eventos push, desconectarse o detener un service worker.
- Consulta la caché del service worker desde la pestaña Cache Storage.
- Anula el registro de un service worker y borra todo el almacenamiento y las cachés con un solo clic en el botón de la pestaña Clear storage.
Manifiesto de la app web
Si quieres 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 la app web. El manifiesto define cómo aparece la app en la pantalla principal, a dó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 el manifiesto, puedes usar la pestaña Manifest del panel Application para inspeccionarlo.
- Para ver la fuente del manifiesto, haz clic en el vínculo debajo de la etiqueta App Manifest (
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 Protocol Handlers te permite probar el registro del controlador de protocolo de URL de tu AWP con un clic en un botón. Para obtener más información, consulta Prueba el registro del controlador de protocolo de URL.
- En la sección Icons , se muestra cada ícono que especificaste y te permite verificar sus máscaras.
- El conjunto de secciones Shortcut #N muestra información sobre todos tus objetos de atajo.
- El conjunto de secciones Screenshot #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, como un ícono que no se puede cargar, la pestaña Manifest muestra una sección Installability que describe el error.
Cómo ver y verificar íconos enmascarables
En la sección Icons de la pestaña Manifest , 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 los íconos que se adaptan a las plataformas.
Para recortar los íconos de modo que solo se vea el área segura mínima, marca 
Show only the minimum safe area for maskable icons.
Si todo tu logotipo es visible en el área segura, puedes continuar.
Cómo activar la instalación
Chrome te permite habilitar y promocionar la instalación de tu AWP directamente en 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
Install.
Sigue las instrucciones en pantalla.
La función Install app (o Add to home screen en algunos dispositivos) 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, incluso si las Herramientas para desarrolladores están en el modo de dispositivo. Sin embargo, si puedes agregar correctamente tu app a tu computadora de escritorio, también funcionará para dispositivos móviles.
Si quieres probar la experiencia móvil genuina, 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 
Install app (o Add to home screen).
Cómo inspeccionar atajos
Los atajos de apps te permiten proporcionar acceso rápido a un conjunto de 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 Manifest.
Cómo inspeccionar capturas de pantalla para 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 Screenshot #N de la pestaña Manifest.
Prueba el registro del controlador de protocolo de URL
Las AWP pueden controlar vínculos que usan un protocolo específico para 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 tu controlador, haz lo siguiente:
- Abre las Herramientas para desarrolladores en la página de destino de tu AWP. Por ejemplo, consulta esta AWP 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 controlador para el protocolo
web+coffee. - En la sección Application > Manifest > Protocol Handler, ingresa la URL que quieres 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 service workers 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 del panel Application es el lugar principal de las Herramientas para desarrolladores para inspeccionar y depurar service workers.
- Si se instala un service worker en la página abierta actualmente, 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
Offline coloca las Herramientas para desarrolladores en modo sin conexión. Esto equivale al modo sin conexión
disponible en el panel Network o la opción Go offlineen el Command Menu. - La casilla de verificación
Update on reload obliga al service worker a actualizarse en cada carga de página. - La casilla de verificación
Bypass for network omite el service worker y obliga al navegador a ir a
la red para obtener los recursos solicitados. - El vínculo Network requests te lleva al panel Network con una lista de solicitudes interceptadas relacionadas con el service worker (filtro
is:service-worker-intercepted). - El vínculo Update realiza una actualización única del service worker especificado.
- El botón Push emula una notificación push sin carga útil (también conocida como tickle).
- El botón Sync emula un evento de sincronización en segundo plano.
- El vínculo Unregister anula el registro del service worker especificado. Consulta Borrar almacenamiento para obtener una forma de anular el registro de un service worker y borrar el almacenamiento y las cachés con un solo clic en el botón.
- La línea Source te indica cuándo se instaló el service worker que se está ejecutando actualmente. El vínculo es el nombre del archivo fuente del service worker. Si haces clic en el vínculo, se te enviará a la fuente del service worker.
- La línea Status te 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 service worker. Si habilitas la casilla de verificación
Update on reload , notarás que el número aumenta en cada carga de página.
Junto al estado, verás un vínculo start (si el service worker está detenido) o un vínculo stop (si el service worker se está ejecutando). Los service workers están diseñados para que el navegador los detenga y los inicie en cualquier momento. Detener explícitamente tu service worker con el vínculo stop puede simular eso. Detener tu 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 debido a suposiciones defectuosas sobre el estado global persistente. - La línea Clients te indica el origen al que se limita el service worker. El botón focus es más útil cuando tienes varios service workers registrados. Si haces clic en el botón focus junto a un service worker que se ejecuta en una pestaña diferente, Chrome se enfoca en esa pestaña.
En la tabla Update Cycle, se muestran las actividades del service worker y sus tiempos transcurridos, como instalar, esperar y activar. Para ver la marca de tiempo exacta de cada actividad, haz clic en los botones
Expand.
Para obtener más información, consulta El ciclo de vida del service worker.
Si el service worker causa algún error, la pestaña Service Workers muestra un ícono 
Error con la cantidad de errores junto a la línea Source.
El vínculo con el número te lleva a la Console con todos los errores registrados.
Para ver información sobre todos los service workers, haz clic en See all registrations en la parte inferior de la pestaña Service Workers. Este vínculo te lleva 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 (service worker) API de caché.
Ten en cuenta que, la primera vez que abres una caché y le agregas un recurso, es posible que las Herramientas para desarrolladores no detecten 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 desplegable Cache Storage.
Uso de cuota
Algunas respuestas dentro de la pestaña Cache Storage pueden marcarse como "opacas". Esto se refiere 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 relleno 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 navigator.storage.
Los detalles de este relleno 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 del 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 exceder fácilmente las limitaciones de cuota de almacenamiento mucho antes de lo que esperarías según el tamaño real de los recursos opacos.
Guías relacionadas:
- Stack Overflow: ¿Qué limitaciones se aplican a las respuestas opacas?
- Workbox: Comprende 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 anular el registro de service workers y borrar todas las cachés y el almacenamiento con un solo clic en el botón. Consulta la siguiente sección para obtener más información.
Guías relacionadas:
Otras guías del panel Application
Consulta las siguientes guías para obtener más ayuda sobre los otros paneles del panel Application.
Guías relacionadas: