Procedimientos recomendados para aplicaciones móviles de Teams

Los dispositivos móviles tienen una potencia de procesamiento limitada, conectividad de red y batería en comparación con equipos de escritorio y portátiles. Para aumentar la adopción de la aplicación de pestaña de Teams en dispositivos móviles, debe garantizar una experiencia web rápida y con capacidad de respuesta en los clientes de Android e iOS de Teams. En este artículo se describen los procedimientos recomendados para optimizar las páginas web de la pestaña Teams para el cliente móvil de Teams.

Uso de trabajadores de servicio para almacenar en caché recursos estáticos

• Almacene en caché recursos estáticos como HTML, CSS, JavaScript e imágenes para reducir la dependencia de red.
• Use la estrategia de revalidación obsoleta para servir contenido almacenado en caché rápidamente mientras captura los datos actualizados en segundo plano. También puede usar esta estrategia para almacenar en caché las respuestas de API que no cambian con frecuencia, como los datos de configuración.
• Evite almacenar en caché recursos de gran tamaño para evitar el consumo innecesario de almacenamiento en dispositivos móviles.

Aplicación de ejemplo

Consulte esta aplicación de ejemplo que usa un trabajo de servicio para almacenar en caché los datos y proporcionar funcionalidad sin conexión.

Minimizar el tamaño de la página web

En áreas con una intensidad de señal débil, la red de datos móviles puede ser lenta e inestable, lo que da lugar a una latencia alta. Por lo tanto, es fundamental reducir el tamaño general del paquete de la aplicación y optimizar las transferencias de datos. Para reducir el tamaño de página, recopile métricas clave de rendimiento mediante la ejecución de una auditoría de rendimiento mediante la pestaña Rendimiento de las herramientas de desarrollo. La auditoría de rendimiento ayuda a identificar cuellos de botella y áreas para mejorar la aplicación.

Auditoría de rendimiento

Para ejecutar una auditoría de rendimiento, siga estos pasos:

1. Habilite las herramientas de desarrollo.

2. Abra las herramientas de desarrollo y seleccione Inspeccionar en la aplicación. Se abre una nueva ventana.

3. Seleccione la pestaña Rendimiento . Puede ver un marcador de rendimiento que indica el tiempo que tarda la aplicación desde la inicialización del SDK de JavaScript de Teams a la notifySuccess llamada. Puede usar este marcador para examinar la red o las operaciones locales realizadas entre init() y notifySuccess.

   En el ejemplo siguiente, la sección Timings muestra que la aplicación tarda 2,20 segundos desde la inicialización del SDK de JavaScript de Teams en notifySuccess, realiza dos llamadas para obtener un token de autorización y realiza una tercera llamada API que tarda 1,5 segundos.

   

4. Seleccione la pestaña Lighthouse . En esta pestaña se proporciona información sobre el tamaño de la aplicación y las métricas de rendimiento.

   1. En Dispositivo, seleccione Móvil.

   2. Seleccione Analizar carga de página.

      

      El informe muestra varios diagnósticos para la página web de la aplicación y un conjunto de información accionable para reducir la carga de la página. Siga los pasos necesarios para reducir las latencias marcadas en este informe.

5. Seleccione la pestaña Cobertura . La página web puede contener recursos sin usar que no proporcionan ningún valor a la funcionalidad de la aplicación. Esta pestaña le permite ver el tamaño real y el porcentaje de uso de los recursos en la página web.

   1. Si no lo encuentra en la página principal de las herramientas de desarrollo, vaya a Más herramientas>Cobertura.

      

   2. Use el informe para quitar el código o los recursos no utilizados.

      

Cálculo de métricas de rendimiento para aplicaciones

Use la herramienta de informe de rendimiento ligero y de autoservicio (o herramienta Perf) para evaluar la eficacia de las aplicaciones web y de pestañas en dispositivos móviles. Esta herramienta se ejecuta sin problemas tanto en Android como en iOS, y proporciona métricas de rendimiento en tiempo real asignadas a pruebas comparativas del sector, lo que garantiza una experiencia de usuario superior. También le permite implementar procedimientos recomendados específicos de Teams en la aplicación directamente desde el dispositivo móvil.

Los pasos implicados son:

1. Generación de un informe de métricas de rendimiento
2. Informe de métricas de rendimiento de acceso
3. Análisis del informe de métricas de rendimiento

Generación de un informe de métricas de rendimiento

Para generar un informe de métricas de rendimiento para la aplicación móvil con la herramienta Informe de rendimiento, siga estos pasos:

1. En la aplicación móvil de Teams, vaya a Configuración>acerca> dela versión preliminar del desarrollador y cambie el modificador para habilitar la versión preliminar del desarrollador.

   

2. Vaya a la sección Aplicaciones .

3. Abra la aplicación que desea auditar y espere a que se cargue.

4. Para generar el informe

   • En la aplicación Android:

     1. Seleccione el menú kebab .

     2. Seleccione Generar informe de rendimiento.

        

   • En la aplicación iOS, seleccione el icono de rendimiento de la aplicación de auditoría que aparece en la barra de título.

   Aparece una página provisional mientras se genera el informe para Android e iOS.

5. Una vez generado el informe, acceda a él desde la hoja inferior que aparece con el informe de rendimiento html.

Informe de métricas de rendimiento de acceso

El informe proporciona información sobre el uso del SDK de JavaScript y las API de WebView, junto con marcadores de rendimiento específicos de Teams.

Puede acceder al informe desde las siguientes opciones de la hoja inferior:

• Abrir informe: abre el informe en una nueva ventana del explorador.

• Compartir informe: abre las opciones del dispositivo para compartir fuera de Teams en Android. En iOS, esta opción abre el menú de recursos compartidos del dispositivo.

• Reenviar en Teams: abre el menú de recursos compartidos del dispositivo para compartirlo en Teams. Esta opción solo está disponible en Android.

• Descargar: descarga el informe en el almacenamiento local del dispositivo.

  

Análisis del informe de métricas de rendimiento

El informe de métricas de rendimiento contiene las siguientes métricas.

Métrica	Descripción	Respuesta del sistema/Acción necesaria
Latencia	Esta métrica mide el tiempo (aproximado) que tarda la aplicación móvil de Teams en cargarse.	Si la aplicación usa notifySuccess(): en esta sección, la latencia de la aplicación se calcula y se muestra en la parte superior. Posteriormente, una escala de tiempo muestra la hora de finalización de cada llamada API durante la carga de la aplicación. Si la aplicación no usa notifySuccess(): no se puede calcular la latencia. Use el vínculo del mensaje que aparece para implementar notifySuccess()la API para la aplicación.
Almacenamiento en caché (Service Worker)	Esta métrica muestra si el trabajo de servicio se implementa como un mecanismo de almacenamiento en caché local. Service Worker solo está disponible en Android.	Si se implementa el trabajo de servicio, Disponible se muestra en verde; de lo contrario , No disponible se muestra en rojo. Cuando el trabajo de servicio no está disponible, use el vínculo Más información para continuar con la implementación.
Paquete de aplicación	Esta métrica indica el tamaño total ocupado por la agrupación de archivos JavaScript de la aplicación de plataforma.	El tamaño de paquete ideal es de hasta 1 MB. Si el tamaño del paquete supera el tamaño ideal, el tamaño se muestra en rojo. Seleccione Comprobar archivos de agrupación para obtener una lista detallada de los archivos que afectan al tamaño de la agrupación. Los archivos que afectan al tamaño de agrupación aparecen en orden descendente de tamaño de archivo. Use service worker y otros procedimientos recomendados para optimizar el rendimiento de la aplicación.
Métricas de pintura de contenido	Esta métrica indica todas las métricas de pintura de contenido pertinentes (y sus valores) para la aplicación móvil.	Las métricas de pintura de contenido muestran la rapidez con la que aparecen los elementos visuales mientras se carga la página de la aplicación. Use estos datos para identificar y corregir retrasos en la representación de contenido visual.
Tamaño del disco	Indica el tamaño de la aplicación en el dispositivo móvil.	El límite ideal es de 20 MB. Si una aplicación es mayor que el límite ideal, la métrica se muestra en rojo en verde. Si no se puede calcular el tamaño del disco de la aplicación, aparece un mensaje de error.

Vea también

• Pestañas de compilación para Teams
• Crear una pestaña