Depurar aplicaciones web progresivas

Use el panel de aplicaciones para inspeccionar, modificar y depurar manifiestos de aplicaciones Web, trabajos de servicios y cachés de trabajos de servicios.

Esta guía solo trata las características de la aplicación web progresiva del panel de la aplicación .

Resumen

  • Use el panel manifiesto para inspeccionar el manifiesto de la aplicación web y desencadenar agregar a eventos de pantalla Android.
  • Use el panel de trabajos de servicio para toda la gama de tareas relacionadas con los trabajos de los trabajadores, como la anulación del registro o la actualización de un servicio, la emulación de eventos de inserción, la desconexión o la detención de un trabajador de servicio.
  • Vea la caché de trabajos del servicio en el panel almacenamiento en caché .
  • Anula el registro de un trabajador del servicio y borra todo el almacenamiento y las memorias caché con un solo clic del botón en el panel Borrar almacenamiento .

Manifiesto de la aplicación Web

Si quiere que los usuarios puedan agregar la aplicación a su homescreens móvil, necesita un manifiesto de la aplicación Web. El manifiesto define cómo aparece la aplicación en la pantalla Android, dónde dirigir al usuario cuando se inicia desde pantalla Android y qué aspecto tiene la aplicación al iniciar.

Una vez que tenga configurado el manifiesto, puede usar el panel de manifiesto del panel de aplicaciones para inspeccionarlo.

El panel manifiesto

  • Para ver el origen del manifiesto, haga clic en el vínculo debajo de la etiqueta de manifiesto de la aplicación \ ( https://airhorner.com/manifest.json en la figura anterior ).
  • Las secciones identidad y presentación solo muestran campos del origen del manifiesto en una pantalla más fácil de usar.
  • En la sección iconos se muestran todos los iconos que especificó.

Trabajadores de servicios

Los trabajadores de servicios son una tecnología fundamental en la plataforma web futura. Son scripts que el explorador ejecuta en segundo plano, independientes de una página web. Estas secuencias de comandos le permiten acceder a las características que no necesitan una página web o interacción del usuario, como las notificaciones de inserción, la sincronización en segundo plano y las experiencias sin conexión.

El panel de trabajos de servicios del panel de aplicaciones es el lugar principal en el DevTools para inspeccionar y depurar trabajos de servicio.

El panel de trabajos de servicios

  • Si un trabajador de servicio está instalado en la página abierta actualmente, aparecerá en este panel. 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 de verificación sin conexión pone DevTools al modo sin conexión. Es equivalente al modo sin conexión disponible en el panel red o a la Go offline opción en el menú de comandos.
  • La casilla actualizar al volver a cargar fuerza al trabajador del servicio a actualizar en todas las cargas de páginas.
  • La casilla omitir para red evita el trabajo de servicio y obliga al explorador a ir a la red para obtener los recursos solicitados.
  • El botón Actualizar realiza una actualización única del trabajo de servicio especificado.
  • El botón de comando emula una notificación de inserción sin una carga \ (también conocida como Tickle).
  • El botón de sincronización emula un evento de sincronización en segundo plano.
  • El botón anular registro anula el registro del trabajo de servicio especificado. Consulte Borrar almacenamiento para una forma de anular el registro de un trabajador de servicio y de borrar almacenamiento y memorias caché con un solo clic de botón.
  • La línea de origen le indica cuándo se instaló el trabajo de servicio actualmente en ejecución. El vínculo es el nombre del archivo de origen del trabajador del servicio. Al hacer clic en el vínculo, se le envía a la fuente del trabajador del servicio.
  • La línea de Estado indica el estado del trabajador de servicio. El número de identificación situado junto al indicador de estado verde \ ( #36 en la figura anterior ) es para el trabajador de servicios actualmente activo. Junto al estado verás un botón iniciar \ (si el trabajo de servicio está detenido ) o un botón detener \ (si el trabajo de servicio se está ejecutando ). Los trabajadores de servicios están diseñados para que el navegador los detenga y los inicie en cualquier momento. Detener explícitamente el trabajo del servicio con el botón detener puede simularlo. Detener el trabajo del servicio es una excelente forma de comprobar cómo se comporta el código cuando vuelve a iniciarse el trabajo del servicio. Con frecuencia, revela errores a causa de suposiciones defectuosas sobre el estado global persistente.
  • La línea clientes le indica el origen al que el trabajador de servicio está en el ámbito. El botón foco es principalmente útil cuando se ha habilitado la casilla Mostrar todo . Cuando esta casilla esté habilitada, todos los trabajos de servicio registrados aparecerán en la lista. Si hace clic en el botón foco junto a un trabajador de servicio que se está ejecutando en una pestaña diferente, Microsoft Edge se centra en esa pestaña.

Si el trabajo de servicio provoca errores, aparece una nueva etiqueta denominada errores .

Cachés de trabajos del servicio

El panel almacenamiento en caché proporciona una lista de solo lectura de los recursos que se han almacenado en caché con la API de caché\ (trabajo de servicio ).

Panel almacenamiento en caché

Nota

La primera vez que abre una caché y le agrega un recurso, es posible que DevTools no detecte el cambio. Vuelva a cargar la página y verá la memoria caché.

Si tiene dos o más memorias caché abiertas, las verá debajo de la lista desplegable almacenamiento en caché .

Lista desplegable de almacenamiento en caché

Uso de cuotas

Es posible que algunas respuestas dentro del panel almacenamiento en caché se marquen como "opacas". Se refiere a una respuesta recuperada de un origen diferente, como en una CDN o una API remota, cuando CORS no está habilitado.

Para evitar la pérdida 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 la cuota de almacenamiento \ (por ejemplo, si QuotaExceeded se inicia una excepción ) y la API informa de ello navigator.storage .

Los detalles de este relleno varían según el explorador y el explorador, pero en Microsoft Edge, esto significa que el tamaño mínimo de una sola respuesta opaca en caché contribuye al uso general de almacenamiento es de aproximadamente 7 megabytes. Debe tener esto en cuenta al determinar cuántas respuestas opacas desea almacenar en caché, ya que es posible que pueda haber superado fácilmente las limitaciones de la cuota de almacenamiento, muy pronto como cabría esperar, en función del tamaño real de los recursos opacos.

Guías relacionadas:

Borrar almacenamiento

El panel Borrar almacenamiento es una característica muy útil al desarrollar aplicaciones web progresivas. Este panel le permite anular el registro de los trabajadores de los servicios y borrar todas las cachés y almacenamiento con un solo clic de botón.

Contactar al equipo de Microsoft Edge DevTools

Use las siguientes opciones para discutir las nuevas características y cambios de la publicación, o cualquier otro tema relacionado con DevTools.

  • Envíe sus comentarios con el icono Enviar comentarios o seleccione Alt + Shift + I \ (Windows, Linux ) o Option + Shift + I \ (MacOS ) en DevTools.
  • Tweet a @EdgeDevTools.
  • Enviar una sugerencia a la webque queremos.
  • Para archivar errores sobre este artículo, use la siguiente sección de comentarios .

El icono enviar comentarios en el DevTools de Microsoft Edge

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á modificada por Kayce vascos \ (redactor técnico, Chrome DevTools \ & Lighthouse ).

Licencia de Creative Commons
Este trabajo dispone de licencia conforme a Licencia internacional de Creative Commons Attribution 4.0.