Depurar aplicaciones web progresivas

Artículo
11/10/2021
Tiempo de lectura: 5 minutos

Use el panel Aplicación para inspeccionar, modificar y depurar manifiestos de aplicaciones web, trabajadores de servicio y cachés de trabajadores de servicio.

Esta guía solo analiza las características de La aplicación web progresiva del panel Aplicación.

Resumen

Usa el panel Manifiesto para inspeccionar el manifiesto de la aplicación web y desencadenar los eventos Agregar a pantalla principal.
Use el panel Trabajadores de servicio para toda una gama de tareas relacionadas con el trabajo de servicio, como anular el registro o actualizar un servicio, emular eventos de inserción, desconectarse o detener a un trabajador de servicio.
Vea la memoria caché del trabajador de servicio desde el panel Storage caché.
Anula el registro de un trabajador de servicio y borra todo el almacenamiento y las memorias caché con un solo botón elige en el panel Borrar almacenamiento.

Manifiesto de aplicación web

Si quieres que los usuarios puedan agregar la aplicación a sus pantallas de inicio móviles, necesitas un manifiesto de aplicación web. El manifiesto define cómo aparece la aplicación en la pantalla principal, dónde dirigir al usuario al iniciarse desde la pantalla principal y cómo es la aplicación al iniciarla.

Después de configurar el manifiesto, puede usar el panel Manifiesto del panel Aplicación para inspeccionarlo.

Para ver el origen del manifiesto, elija el vínculo debajo de la etiqueta Manifiesto de aplicación ( https://airhorner.com/manifest.json en la figura anterior).

Las secciones Identity y Presentation solo muestran campos del origen del manifiesto en una presentación más fácil de usar.
La sección Iconos muestra todos los iconos especificados.

Trabajadores de servicio

Los trabajadores de servicio son una tecnología fundamental en la futura plataforma web. Son scripts que el explorador ejecuta en segundo plano, separados de una página web. Los scripts permiten tener acceso a características que sin necesidad de una página web o interacción del usuario, como notificaciones de inserción, sincronización en segundo plano y experiencias sin conexión.

El panel Trabajadores de servicio del panel Aplicación es el lugar principal de DevTools para inspeccionar y depurar trabajadores de servicio.

Si un trabajador de servicio está instalado en la página abierta actualmente, aparece en este panel. Por ejemplo, en la figura anterior, hay un trabajador de servicio instalado para el ámbito de https://weather-pwa-sample.firebaseapp.com .
La casilla Sin conexión pone DevTools en modo sin conexión. Esto equivale al modo sin conexión disponible en la herramienta Red o a la opción del Go offline menú comando.
La casilla Actualizar al volver a cargar fuerza al trabajador del servicio a actualizarse en cada carga de página.
La casilla Omitir para red omite al trabajador del servicio y fuerza al explorador a ir a la red en busca de recursos solicitados.
El botón Actualizar realiza una actualización única del trabajador de servicio especificado.
El botón Push emula una notificación de inserción sin una carga (también conocida como cosquilleo).
El botón Sincronizar emula un evento de sincronización en segundo plano.
El botón Anular registro anula el registro del trabajador de servicio especificado. Consulte Borrar almacenamiento para obtener una forma de anular el registro de un trabajador de servicio y borrar el almacenamiento y las memorias caché con un solo botón.
La línea Origen indica cuándo se instaló el trabajador de servicio que se está ejecutando actualmente. El vínculo es el nombre del archivo de origen del trabajador de servicio. Al elegir en el vínculo, se envía al origen del trabajador de servicio.
La línea Estado indica el estado del trabajador del servicio. El número de identificador junto al indicador de estado verde (en la figura #36 anterior) es para el trabajador de servicio activo actualmente. Junto al estado, se muestra un botón de inicio **** (si el trabajador de servicio está detenido) o un botón de detenerse (si el trabajador del servicio se está ejecutando). Los trabajadores de servicio están diseñados para ser detenidos e iniciados por el explorador en cualquier momento. Detener explícitamente al trabajador del servicio mediante el botón de detención puede simularlo. Detener al trabajador de servicio es una excelente manera de probar cómo se comporta el código cuando el trabajador de servicio vuelve a iniciar la copia de seguridad. Con frecuencia, se revelan errores debido a suposiciones erróneas sobre el estado global persistente.
La línea Clientes indica el origen al que está ámbito el trabajador de servicio. El botón de foco es principalmente útil cuando se ha habilitado la casilla mostrar todo. Cuando esta casilla está habilitada, se enumeran todos los trabajadores de servicio registrados. Si elige en el botón de enfoque junto a un trabajador de servicio que se ejecuta en una pestaña diferente, Microsoft Edge se centra en esa pestaña.

Si el trabajador del servicio provoca algún error, aparece una nueva etiqueta denominada Errores.

Cachés de trabajadores de servicio

El panel Storage caché proporciona una lista de solo lectura de los recursos que se han almacenado en caché mediante la API de caché (trabajador de servicio).

Nota

La primera vez que abra una memoria caché y le agregue un recurso, Es posible que DevTools no detecte el cambio. Actualice la página y muestre la memoria caché.

Si tiene dos o más cachés abiertas, las cachés se muestran en la siguiente lista desplegable Storage caché.

Uso de cuota

Algunas respuestas dentro del panel de Storage caché se pueden marcar como "opacas". Esto hace referencia a una respuesta recuperada de un origen diferente, como de un CDN o 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 cuota de almacenamiento (por ejemplo, si se produce una excepción) y se notifica mediante la QuotaExceeded navigator.storage API.

Los detalles de este relleno varían de un explorador a otro, pero para Microsoft Edge, 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. **** Recuerde el relleno al determinar cuántas respuestas opacas desea almacenar en caché, ya que puede superar fácilmente las limitaciones de cuota de almacenamiento mucho antes de lo que espera en función del tamaño real de los recursos opacos.

Guías relacionadas:

Desbordamiento de pila: ¿qué limitaciones se aplican a las respuestas opacas?

Borrar almacenamiento

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