Compartir a través de

Depuración de un PWA

Una aplicación web progresiva (PWA) se compila mediante tecnologías web. Por lo tanto, todas las herramientas disponibles en Microsoft Edge DevTools también son útiles para una PWA. Un PWA también usa un manifiesto de aplicación web y puede usar trabajos de servicio y otras características y API específicas que requieren herramientas de depuración especiales.

Vea también:

Abrir DevTools

Un PWA se puede instalar localmente y usarse en una ventana independiente, o bien se puede usar en un explorador web como un sitio web.

Puede abrir DevTools en su PWA de la misma manera en ambos casos. Para abrir DevTools, use una de las siguientes maneras:

  • Haga clic con el botón derecho en cualquier elemento de la interfaz de usuario de la aplicación y, a continuación, seleccione Inspeccionar.
  • Presione Ctrl+Mayús+I (Windows, Linux) o Comando+Opción+I (macOS).
  • Presione F12.

Para obtener más información, consulte Open DevTools en Información general de DevTools.

Pruebe sus cambios

Al desarrollar un PWA, se realizan cambios en el código fuente y, a continuación, se prueban.

La forma más rápida de probar los cambios es cargar el PWA en un explorador web mediante su dirección URL de desarrollo local, por ejemplo http://localhost:8080. Las pruebas en un explorador son más rápidas porque no es necesario instalar la PWA localmente primero.

Para probar los cambios, actualice la pestaña del explorador donde se carga el PWA presionando F5.

Una vez que tenga un trabajo de servicio que almacene en caché los archivos estáticos, es posible que al presionar F5 no siempre se vuelvan a cargar los cambios más recientes en el explorador. Para forzar al explorador a volver a cargar los cambios, use una de las siguientes maneras:

  • Abra DevTools, haga clic con el botón derecho en Actualizar en la barra de herramientas del explorador y haga clic en Caché vacía y actualización rígida.
  • Abra DevTools, abra la Herramienta de aplicación , haga clic en Trabajadores del servicio y, a continuación, seleccione la casilla Omitir red .

Para probar las características de PWA habilitadas mediante la adición de código en el manifiesto de la aplicación web, debe instalar el PWA. Si, a continuación, realiza más cambios en el manifiesto de la aplicación web, debe desinstalar y volver a instalar el PWA. Para obtener información sobre cómo desinstalar el PWA, consulte Administración de PWA en Uso de PWA en Microsoft Edge.

Depuración del trabajo de servicio

El trabajador del servicio PWA es responsable de que la aplicación sea más rápida y confiable para las condiciones de red.

Para ello, el trabajador del servicio se ejecuta en paralelo a la aplicación e intercepta las solicitudes de red. Tiene su propio ciclo de vida independiente del ciclo de vida de la aplicación.

Para comprobar si el trabajo de servicio se instaló correctamente y en qué estado de su ciclo de vida se encuentra actualmente, use el panel Trabajadores del servicio de la herramienta Aplicación . Para más información, consulte Trabajos de servicio en Depuración de una aplicación web progresiva (PWA).

Para depurar el código JavaScript que se ejecuta en el subproceso de trabajo de servicio, mediante puntos de interrupción, cambie al subproceso de trabajo de servicio en la herramienta Orígenes . Para obtener más información, consulte Cambiar el contexto de subproceso en características de depuración de JavaScript.

Los trabajadores del servicio pueden ejecutarse incluso cuando la aplicación no se está ejecutando y ejecutar tareas en segundo plano para mantener la aplicación actualizada. Por ejemplo, pueden capturar datos del servidor o recibir mensajes push.

Para depurar las tareas en segundo plano del trabajo de servicio, use la sección Servicios en segundo plano de la herramienta Aplicación . Para más información, consulte Depuración de servicios en segundo plano.

Visualización del manifiesto de la aplicación web

El manifiesto de la aplicación web define el nombre, la descripción, el icono y las características de la aplicación. Si estas características funcionan correctamente puede depender de si se especificaron correctamente en el archivo JSON del manifiesto.

Para comprobar si Microsoft Edge detecta el archivo de manifiesto y las características del mismo, use el panel Manifiesto de la herramienta Aplicación . Para más información, consulte Manifiesto de aplicación web en Depuración de una aplicación web progresiva (PWA).

Algunas características de manifiesto PWA tienen herramientas dedicadas. Por ejemplo, puede probar el control de protocolos de aplicación web progresiva (PWA).

Visualización y edición de datos locales

Para proporcionar una experiencia enriquecida y rápida a los usuarios, su PWA puede almacenar datos localmente. Para ver, editar y eliminar los datos almacenados, consulte la siguiente documentación de DevTools, en función de la opción de almacenamiento que haya elegido:

Para ver la cantidad total de datos almacenados que usa el PWA, la cuota disponible y eliminar los datos, use el panel Almacenamiento de la herramienta Aplicación . Para obtener más información, consulte Almacenamiento en Depuración de una aplicación web progresiva (PWA).

Simulación de diferentes tamaños de pantalla

Con la Web Apps progresiva, se entrega una aplicación para todos los dispositivos, desde un código base. Para asegurarse de que la aplicación se adapta a todos los tamaños de pantalla del dispositivo, usa la herramienta Emulación de dispositivos en DevTools.

Para más información, consulte Emulación de dispositivos móviles (Emulación de dispositivos).

Tenga en cuenta que la herramienta Emulación de dispositivos solo está disponible cuando se usa DevTools en el explorador y no cuando se usa DevTools en un PWA instalado. Las PPA instaladas tienen sus propias ventanas independientes que son muy fáciles de cambiar de tamaño para probar la aplicación con diferentes tamaños de pantalla.

  • Last updated on