Melhores práticas para aplicações móveis do Teams

Os dispositivos móveis têm energia de processamento limitada, conectividade de rede e bateria em comparação com computadores de secretária e portáteis. Para aumentar a adoção da sua aplicação de separador Teams em dispositivos móveis, tem de garantir uma experiência Web rápida e reativa nos clientes Android e iOS do Teams. Este artigo descreve as melhores práticas para otimizar as páginas Web do separador Teams para o cliente móvel do Teams.

Utilizar funções de trabalho de serviço para colocar em cache recursos estáticos

• Coloque em cache recursos estáticos como HTML, CSS, JavaScript e imagens para reduzir a dependência de rede.
• Utilize a estratégia stale-while-revalidate para servir conteúdo em cache rapidamente enquanto obtém dados atualizados em segundo plano. Também pode utilizar esta estratégia para colocar em cache respostas de API que não mudam frequentemente, como dados de configuração.
• Evite colocar em cache grandes recursos para evitar o consumo desnecessário de armazenamento em dispositivos móveis.

Aplicativo de exemplo

Veja esta aplicação de exemplo que utiliza uma função de trabalho de serviço para colocar dados em cache e fornecer funcionalidade offline.

Minimizar o tamanho da página Web

Em áreas com fraca força de sinal, a rede de dados móveis pode ser lenta e instável, o que resulta numa latência elevada. Por conseguinte, é fundamental reduzir o tamanho geral do pacote de aplicações e otimizar as transferências de dados. Para reduzir o tamanho da página, reúna as principais métricas de desempenho ao executar uma auditoria de desempenho com o separador Desempenho nas ferramentas de desenvolvimento. A auditoria de desempenho ajuda a identificar estrangulamentos e áreas para melhorar a sua aplicação.

Auditoria de desempenho

Para executar uma auditoria de desempenho, siga estes passos:

1. Ativar ferramentas de programação.

2. Abra as ferramentas de programação e selecione inspecionar na sua aplicação. É aberta uma nova janela.

3. Selecione o separador Desempenho . Pode ver um marcador de desempenho que indica o tempo que a sua aplicação demora desde a inicialização do SDK JavaScript do Teams até à notifySuccess chamada. Pode utilizar este marcador para examinar a rede ou as operações locais realizadas entre init() e notifySuccess.

   No exemplo seguinte, a secção Temporizações mostra que a aplicação demora 2,20 segundos desde a inicialização do SDK JavaScript do Teams até ao notifySuccess, faz duas chamadas para obter um token de autorização e faz uma terceira chamada à API que demora 1,5 segundos.

   

4. Selecione o separador Lighthouse . Este separador fornece informações sobre o tamanho da aplicação e as métricas de desempenho.

   1. Em Dispositivo, selecione Móvel.

   2. Selecione Analisar carregamento da página.

      

      O relatório mostra vários diagnóstico para a página Web da sua aplicação e um conjunto de informações acionáveis para diminuir o carregamento de páginas. Siga os passos necessários para reduzir as latências sinalizadas neste relatório.

5. Selecione o separador Cobertura . A sua página Web pode conter recursos não utilizados que não fornecem qualquer valor para a funcionalidade da aplicação. Este separador permite-lhe ver o tamanho real e a percentagem de utilização dos recursos na página Web.

   1. Se não o conseguir encontrar na home page das ferramentas de desenvolvimento, aceda a Mais ferramentas>Cobertura.

      

   2. Utilize o relatório para remover código ou recursos não utilizados.

      

Calcular métricas de desempenho para aplicações

Utilize a ferramenta de Relatório de Desempenho simples (ou ferramenta Perf) de gestão personalizada para avaliar a eficiência das suas aplicações Web e de tabulação em dispositivos móveis. Esta ferramenta é executada de forma totalmente integrada no Android e no iOS e fornece métricas de desempenho em tempo real mapeadas em comparação com referências da indústria, garantindo uma experiência de utilizador superior. Também lhe permite implementar melhores práticas específicas do Teams na sua aplicação diretamente a partir do seu dispositivo móvel.

Os passos envolvidos são:

1. Gerar relatório de métricas de desempenho
2. Relatório de métricas de desempenho do Access
3. Analisar relatório de métricas de desempenho

Gerar relatório de métricas de desempenho

Para gerar um relatório de métricas de desempenho para a sua aplicação móvel com a ferramenta Relatório de Desempenho, siga estes passos:

1. Na sua aplicação teams para dispositivos móveis, aceda a Definições>Sobre> aPré-visualização do Programador e alterne o botão para ativar a Pré-visualização do programador.

   

2. Aceda à secção Aplicações .

3. Abra a aplicação que pretende auditar e aguarde que a mesma seja carregada.

4. Para gerar o relatório

   • Na aplicação Android:

     1. Selecione o menu de kebab .

     2. Selecione Gerar Relatório de Desempenho.

        

   • Na aplicação iOS, selecione o ícone de desempenho da aplicação de auditoria que aparece na barra de título.

   É apresentada uma página provisória enquanto o relatório está a ser gerado para Android e iOS.

5. Depois de o relatório ser gerado, aceda ao mesmo a partir da folha inferior que é apresentada com o relatório de desempenho html.

Relatório de métricas de desempenho do Access

O relatório fornece informações através do SDK JavaScript e das APIs WebView, juntamente com marcadores de desempenho específicos do Teams.

Pode aceder ao relatório a partir das seguintes opções na folha inferior:

• Abrir Relatório: abre o relatório numa nova janela do browser.

• Partilhar relatório: abre as opções do dispositivo para partilhar fora do Teams no Android. No iOS, esta opção abre o menu de partilha do dispositivo.

• Reencaminhar no Teams: abre o menu de partilha do dispositivo para partilha no Teams. Esta opção só está disponível no Android.

• Transferir: transfere o relatório no armazenamento local do dispositivo.

  

Analisar relatório de métricas de desempenho

O relatório de métricas de desempenho contém as seguintes métricas.

Indicador	Descrição	Resposta do sistema/Ação necessária
Latência	Esta métrica mede o tempo (aproximado) que a sua aplicação teams para dispositivos móveis demora a carregar.	Se a aplicação utilizar notifySuccess(): nesta secção, a latência da aplicação é calculada e apresentada na parte superior. Posteriormente, um linha do tempo apresenta a hora de fim de cada chamada à API durante o carregamento da aplicação. Se a sua aplicação não utilizar notifySuccess(): a latência não pode ser calculada. Utilize a ligação na mensagem que parece implementar notifySuccess()a API para a sua aplicação.
Colocação em Cache (Trabalho de Serviço)	Esta métrica mostra se o trabalho de serviço é implementado como um mecanismo de colocação em cache local. A função de trabalho de serviço só está disponível no Android.	Se a função de trabalho de serviço estiver implementada, Disponível será apresentado a verde. Caso contrário , Não Disponível será apresentado a vermelho. Quando a função de trabalho de serviço não estiver Disponível, utilize a ligação Saiba mais para prosseguir com a implementação.
Pacote de Aplicações	Esta métrica indica o tamanho total ocupado pelo pacote de ficheiros JavaScript da aplicação de plataforma.	O tamanho ideal do pacote é até 1 MB. Se o tamanho do pacote exceder o tamanho ideal, o tamanho será apresentado a vermelho. Selecione Verificar ficheiros do pacote para obter uma lista detalhada dos ficheiros que afetam o tamanho do pacote. Os ficheiros que afetam o tamanho do pacote são apresentados por ordem descendente do tamanho do ficheiro. Utilize a função de trabalho de serviço e outras melhores práticas para otimizar o desempenho da sua aplicação.
Métricas do Content Paint	Esta métrica indica todas as métricas de pintura de conteúdo relevantes (e os respetivos valores) para a sua aplicação móvel.	As métricas de pintura de conteúdo mostram a rapidez com que os elementos visuais aparecem enquanto a página da aplicação é carregada. Utilize estes dados para identificar e corrigir atrasos na composição de conteúdos visuais.
Tamanho do Disco	Indica o tamanho da aplicação no seu dispositivo móvel.	O limite ideal é 20 MB. Se uma aplicação for maior do que o limite ideal, a métrica é apresentada a vermelho em verde. Se não for possível calcular o tamanho do disco da aplicação, é apresentada uma mensagem de erro.

Confira também

• Compilar guias para o Teams
• Criar uma guia