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. Si desea 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, asegúrese de seleccionar 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. Asegúrese de realizar 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. Puede usar el informe para quitar el código o los recursos no utilizados.

      

Vea también

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