Usa el panel Application para inspeccionar, modificar y depurar manifiestos de apps 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 de escritorio. Estos son los siguientes:
- Confiable incluso en condiciones de red inestables.
- Se puede instalar para iniciar plataformas de sistemas operativos, como la carpeta Aplicaciones en Mac OS X, el menú Inicio en Windows y la pantalla principal en iOS y Android.
- Aparece en las personas que cambian de actividad, en los motores de búsqueda de dispositivos, como Spotlight, y en las hojas para compartir contenido.
En esta guía, solo se analizan las funciones de las apps web progresivas del panel Aplicación. Si necesitas ayuda sobre los otros paneles, 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 app web.
- Usa la pestaña Service Workers para realizar una gran variedad de tareas relacionadas con los service workers, como cancelar el registro o actualizar un servicio, emular eventos push, desconectarte 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 cachés con un solo clic en la pestaña Liberar espacio de almacenamiento.
Manifiesto de la aplicación web
Si deseas que los usuarios puedan agregar tu app a la carpeta Aplicaciones en Mac OS X, al menú Inicio en Windows y a la pantalla principal en iOS y Android, necesitarás un manifiesto de aplicación web. El manifiesto define cómo se muestra la app en la pantalla principal, hacia dónde 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 tu manifiesto, puedes usar la pestaña Manifest del panel Application 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). - En las secciones Identidad y Presentación, solo se muestran los 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 solo hacer 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 Íconos, se muestran todos los íconos que especificaste y puedes verificar sus máscaras.
- El conjunto de secciones Acceso directo #N muestra información sobre todos tus objetos de acceso directo.
- El conjunto de secciones Screenshot #N muestra las capturas de pantalla para brindar una IU de instalación más completa de la app.
Además, si Herramientas para desarrolladores 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 los íconos enmascarables
La sección Íconos de la pestaña Manifiesto muestra todos los íconos de tu aplicación. En esta sección, también puedes verificar las áreas seguras de los íconos enmascarables, el formato de íconos que se adaptan a las plataformas.
Para cortar los íconos de modo que solo se vea el área segura mínima, marca 
Mostrar solo el área segura mínima para los íconos enmascarables.
Si todo el logotipo se puede ver en el área segura, puedes continuar.
Activa la instalación
Chrome le permite habilitar y promocionar la instalación de su AWP directamente en la interfaz de usuario. Obtén más información para brindar tu propia experiencia de instalación integrada en la app.
Para activar el flujo de instalación de la 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 Instalar 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 Herramientas para desarrolladores está en Modo de dispositivo. Sin embargo, si puedes agregar correctamente la app al escritorio, también funcionará para los dispositivos móviles.
Si deseas probar la experiencia genuina en dispositivos móviles, puedes conectar un dispositivo móvil real a 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 de 
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 capturas de pantalla para obtener una IU de instalación más completa
Cuando agregas una descripción y un conjunto de capturas de pantalla a tu archivo de manifiesto, la app obtiene un diálogo de instalación más completo.
Para inspeccionar las capturas de pantalla, desplázate hasta las secciones Captura de pantalla #N de la pestaña Manifiesto.
Probar el registro del controlador de protocolo de URL
Las AWP pueden gestionar vínculos que usan un protocolo específico para lograr una experiencia más integrada. Si deseas obtener información sobre cómo crear un controlador, consulta Registro del controlador de protocolo de URL para AWP.
Para probar el controlador, haz lo siguiente:
- Abre 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 registró la AWP como controlador del protocolo
web+coffee. - En la sección Aplicación > Manifiesto > Controlador de protocolo, ingresa la URL que deseas que el controlador pruebe 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 confirmarlo.
- En el siguiente diálogo, permite que la app controle los vínculos de
web+coffee.
Si el controlador procesa correctamente el vínculo, verás una imagen de una taza de café abierta en la app.
Trabajadores de servicio
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 necesitan una página web o interacción del usuario, como las notificaciones push, la sincronización en segundo plano y las experiencias sin conexión.
Guías relacionadas:
La pestaña Service Workers del panel Application es el lugar principal en Herramientas para desarrolladores donde puedes inspeccionar y depurar los service workers.
- Si un service worker está instalado en la página actualmente abierta, lo verás en la lista. 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 coloca Herramientas para desarrolladores en modo sin conexión. Esto equivale al modo sin conexión disponible en el panel Red o a la opción Go offlinedel Menú de comandos. - La casilla de verificación
Update on reload obliga al service worker a actualizar cada vez que se carga la página. - La casilla de verificación
Bypass for network omite el service worker y fuerza 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 Update realiza una actualización única del service worker especificado.
- El botón Push emula una notificación push sin una carga útil (también conocida como señal).
- 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 conocer una manera de cancelar el registro de un service worker y limpiar el almacenamiento y la memoria caché con un solo clic.
- La línea Fuente te indica cuándo se instaló el service worker que se ejecuta actualmente. El vínculo es el nombre del archivo de origen del service worker. Si haces clic en el vínculo, accederás 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 aumentará cada vez que se cargue la página.
Junto al estado, verás un vínculo start (si el service worker está detenido) o un vínculo de stop (si se está ejecutando el service worker). Los service workers están diseñados para que el navegador los detenga e inicie en cualquier momento. Detener explícitamente el service worker mediante el vínculo stop puede simular eso. Detener el service worker es una buena forma de probar cómo se comporta el código cuando el service worker se reinicia. Con frecuencia, revela errores debidos a suposiciones incorrectas sobre el estado global persistente. - La línea Clients indica el origen en el que se determina el alcance del service worker. El botón de enfoque es útil principalmente cuando tienes varios service worker registrados. Si haces clic en el botón de enfoque junto a un service worker que se esté ejecutando en otra pestaña, Chrome se enfocará en esa pestaña.
En la tabla Ciclo de actualización, se muestran las actividades del service worker y los 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
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 llevará a Console con todos los errores registrados.
Para ver información sobre todos los procesos de trabajo de servicio, haz clic en Ver todos los registros en la parte inferior de la pestaña Trabajadores de servicio. Este vínculo lleva a chrome://serviceworker-internals/?devtools, donde puedes depurar aún más tus service worker.
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 agregues un recurso, es posible que Herramientas para desarrolladores 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 en una lista 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 se refiere a una respuesta recuperada de un origen diferente, como de una CDN o una API remota, cuando CORS no está habilitado.
Para evitar la filtración de información multidominio, se agrega un relleno significativo al tamaño de una respuesta opaca que se usa para calcular los límites de la cuota de almacenamiento (es decir, si se arroja una excepción QuotaExceeded) y que se informa por la API de navigator.storage.
Los detalles de este relleno varían de un navegador a otro, pero, para Google Chrome, esto significa que el tamaño mínimo que cualquier respuesta opaca en caché contribuye al uso general del 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 con facilidad las limitaciones de cuota de almacenamiento mucho antes de lo que esperarías, de acuerdo con el tamaño real de los recursos opacos.
Guías relacionadas:
- Stack Overflow: ¿Qué limitaciones se aplican a las respuestas opacas?
- Cuadro de trabajo: Información sobre la cuota de almacenamiento
Liberar almacenamiento
La pestaña Liberar espacio de almacenamiento es una función muy útil al desarrollar apps web progresivas. Esta pestaña te permite cancelar el registro de los service workers y borrar toda la caché 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 app
Consulta las siguientes guías para obtener más ayuda sobre los otros paneles del panel Application.
Guías relacionadas: