Práticas recomendadas para apps da Web

O desenvolvimento de páginas e aplicativos da Web para dispositivos móveis apresenta desafios diferentes em comparação com o desenvolvimento de páginas da Web para navegadores típicos de computadores. As práticas a seguir podem ajudar você a fornecer o aplicativo da Web mais eficaz para Android e outros dispositivos móveis.

  1. Redirecione dispositivos móveis para uma versão para dispositivos móveis dedicada do seu site. Há várias maneiras de fazer isso usando redirecionamentos do lado do servidor. Um método comum é "farejar" a string do user agent fornecida pelo navegador da Web. Para determinar se uma versão para dispositivos móveis do seu site precisa ser exibida ou não, procure a string "mobile" no user agent.
  2. Use HTML5 para dispositivos móveis. O HTML5 é a linguagem de marcação mais comum usada em sites para dispositivos móveis. Esse padrão incentiva o desenvolvimento voltado para dispositivos móveis para garantir que os sites funcionem em vários dispositivos. Ao contrário de linguagens da Web anteriores, o HTML5 usa declarações <DOCTYPE> e charset mais simples: 
    <!DOCTYPE html>
...
<meta charset="UTF-8">
  3. Use os metadados da janela de visualização para redimensionar corretamente a página da Web. No documento <head>, forneça metadados que especifiquem como você quer que a janela de visualização do navegador renderize a página da Web. Por exemplo, os metadados da janela de visualização podem especificar a altura e a largura da janela de visualização do navegador, a escala inicial da página e a densidade da tela desejada.

    O exemplo a seguir mostra como definir metadados da janela de visualização:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    Para saber mais sobre como usar os metadados da janela de visualização para dispositivos com tecnologia Android, leia Compatibilidade com telas diferentes em apps da Web.

  4. Use um layout linear vertical. Evite a necessidade de rolar para a direita e para a esquerda na navegação pela página. A rolagem para cima e para baixo é mais fácil para o usuário e deixa sua página mais simples.
  5. Defina a altura e a largura do layout como match_parent. Definir a altura e a largura do objeto WebView como match_parent garante que as visualizações do seu app sejam dimensionadas corretamente. Não recomendamos definir a altura como wrap_content porque isso resulta em dimensionamento incorreto. Da mesma forma, definir a largura do layout como wrap_content não é compatível e faz com que o WebView use a largura do pai. Devido a esse comportamento, também é importante verificar se nenhum dos objetos de layout pais do objeto WebView tem a altura e a largura definidas como wrap_content.
  6. Evite várias solicitações de arquivos. Como dispositivos móveis normalmente têm uma velocidade de conexão mais lenta do que a de computadores desktop, faça com que o carregamento de página seja o mais rápido possível. Uma forma de acelerar o processo é evitar o carregamento de arquivos extras, como folhas de estilo e arquivos de script, no <head>. Além disso, considere fazer uma análise para dispositivos móveis com o PageSpeed Insights do Google para receber sugestões detalhadas de otimização específicas para seu app.
  7. Desative os downloads automáticos de favicon se eles não forem necessários. Por padrão, o WebView baixa automaticamente um favicon sempre que um site é visitado durante a navegação. O WebView mantém duas cópias de cada favicon baixado (uma em Java e outra em memória nativa). Portanto, desativar os downloads de favicon economiza memória (aproximadamente 8 KB por instância de WebView) e reduz o consumo de largura de banda. Se o app não usar nem mostrar favicons, use WebSettingsCompat.setDownloadFaviconsEnabled() da biblioteca WebKit do Jetpack para desativar os downloads automáticos:

    Kotlin

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.settings, false)
}

    Java

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.getSettings(), false);
}
  8. Gerencie o estado salvo e evite limites de transação. Se você salvar o estado do WebView durante eventos do ciclo de vida usando saveState(Bundle), aplique limites de tamanho de payload usando WebViewCompat.saveState() para evitar exceder o limite de 1 MB do savedInstanceState do Android. Para mais informações, consulte Gerenciar o estado do WebView de maneira eficiente.
  9. Otimize as conexões de rede e o carregamento de páginas com APIs de carregamento especulativo. Para reduzir a latência de navegação, use as APIs do Jetpack Webkit para preparar conexões de rede e conteúdo com antecedência. Chame Profile.addQuicHints para pré-preencher o suporte a HTTP/3 sobre QUIC para que a WebView possa usar o QUIC imediatamente na primeira conexão e use Profile.preconnect para pré-aquecer os sockets de rede. Quando os URLs de destino são conhecidos ou prováveis, use Profile.prefetchUrlAsync ou WebViewCompat.prerenderUrlAsync para buscar ou renderizar páginas em segundo plano. Para mais informações, leia Carregamento especulativo no WebView.
  10. Desative os downloads automáticos de favicon se eles não forem necessários. Por padrão, o WebView baixa automaticamente um favicon sempre que um site é visitado durante a navegação. O WebView mantém duas cópias de cada favicon baixado (uma em Java e outra em memória nativa). Portanto, desativar os downloads de favicon economiza memória (aproximadamente 8 KB por instância de WebView) e reduz o consumo de largura de banda. Se o app não usar nem mostrar favicons, use WebSettingsCompat.setDownloadFaviconsEnabled() da biblioteca WebKit do Jetpack para desativar os downloads automáticos:

    Kotlin

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.settings, false)
}

    Java

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.getSettings(), false);
}
  11. Gerencie o estado salvo e evite limites de transação. Se você salvar o estado do WebView durante eventos do ciclo de vida usando saveState(Bundle), aplique limites de tamanho de payload usando WebViewCompat.saveState() para evitar exceder o limite de 1 MB do savedInstanceState do Android. Para mais informações, consulte Gerenciar o estado do WebView de maneira eficiente.

Outros recursos