Prácticas recomendadas para las aplicaciones web

El desarrollo de páginas y aplicaciones web para dispositivos móviles presenta desafíos diferentes en comparación con el desarrollo de una página web para navegadores web de escritorio. Las siguientes prácticas pueden ayudarte a proporcionar la aplicación web más eficaz para Android y otros dispositivos móviles.

  1. Redirecciona los dispositivos móviles a una versión para dispositivos móviles exclusiva de tu sitio web. Existen varias formas de hacerlo con redireccionamientos del servidor. Un método común es "examinar" la cadena del usuario-agente que proporciona el navegador web. Para determinar si deseas publicar una versión para dispositivos móviles de tu sitio, busca la cadena "mobile" en el usuario-agente.
  2. Usa HTML5 para dispositivos móviles. HTML5 es el lenguaje de marcado más común que se usa para los sitios web móviles. Este estándar fomenta el desarrollo pensado para la tecnología móvil con el objetivo de garantizar que los sitios web funcionen en una variedad de dispositivos. A diferencia de los lenguajes web anteriores, HTML5 usa declaraciones <DOCTYPE> y charset más simples: 
    <!DOCTYPE html>
...
<meta charset="UTF-8">
  3. Utiliza los metadatos del viewport para cambiar correctamente el tamaño de tu página web. En el <head> de tu documento, proporciona metadatos que especifiquen cómo quieres que el viewport del navegador renderice tu página web. Por ejemplo, los metadatos de tu viewport pueden especificar la altura y el ancho del viewport del navegador, el ajuste inicial de la página y la densidad de la pantalla de destino.

    En el siguiente ejemplo, se muestra cómo establecer los metadatos de la ventana gráfica:

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

    Si quieres obtener más información para usar los metadatos del viewport en dispositivos con Android, consulta Cómo admitir diferentes pantallas en apps web.

  4. Usa un diseño lineal vertical. Evita la necesidad de que el usuario se desplace hacia la izquierda y la derecha mientras navega por tu página. El desplazamiento hacia arriba y abajo es más fácil para el usuario y simplifica tu página.
  5. Establece la altura y el ancho del diseño en match_parent. Si estableces la altura y el ancho del objeto WebView en match_parent, garantizas que las vistas de tu app tengan el tamaño correcto. No recomendamos establecer la altura en wrap_content porque genera un tamaño incorrecto. Del mismo modo, establecer el ancho del diseño en wrap_content no es compatible y hace que tu WebView use el ancho de su elemento superior. Debido a este comportamiento, también es importante asegurarse de que ninguno de los objetos de diseño de nivel superior de tu objeto WebView tengan la altura y el ancho establecidos en wrap_content.
  6. Evita múltiples solicitudes de archivos. Debido a que los dispositivos móviles generalmente tienen una velocidad de conexión más lenta que las computadoras de escritorio, haz que tu página se cargue lo más rápido posible. Una forma de acelerarlo es evitar la carga de archivos adicionales, como hojas de estilo y archivos de secuencias de comandos en el <head>. Además, considera realizar un análisis para dispositivos móviles con PageSpeed Insights de Google para obtener sugerencias de optimización detalladas específicas para tu app.
  7. Inhabilita las descargas automáticas de favicons si no las necesitas. De forma predeterminada, WebView descarga automáticamente un favicon cada vez que se visita un sitio durante la navegación. WebView mantiene dos copias de cada favicon descargado (una en Java y otra en memoria nativa), por lo que inhabilitar las descargas de favicons ahorra memoria (aproximadamente 8 KB por instancia de WebView) y reduce el consumo de ancho de banda. Si tu app no usa ni muestra favicons, usa WebSettingsCompat.setDownloadFaviconsEnabled() de la biblioteca de Jetpack Webkit para inhabilitar las descargas automáticas:

    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. Administra el estado guardado y evita los límites de transacciones. Si guardas el estado de WebView durante los eventos del ciclo de vida con saveState(Bundle), aplica los límites de tamaño de la carga útil con WebViewCompat.saveState() para evitar exceder el límite de 1 MB de savedInstanceState de Android. Para obtener más información, consulta Cómo administrar el estado de WebView de manera eficiente.
  9. Optimiza las conexiones de red y la carga de páginas con las APIs de carga especulativa. Para reducir la latencia de navegación, usa las APIs de Jetpack Webkit para preparar las conexiones de red y el contenido con anticipación. Llama a Profile.addQuicHints para completar previamente la compatibilidad con HTTP/3 a través de QUIC, de modo que WebView pueda usar QUIC de inmediato en la primera conexión, y usa Profile.preconnect para precalentar los sockets de red. Cuando se conozcan o sean probables las URLs de destino, usa Profile.prefetchUrlAsync o WebViewCompat.prerenderUrlAsync para recuperar o renderizar páginas en segundo plano. Para obtener más información, consulta Carga especulativa en WebView.
  10. Inhabilita las descargas automáticas de favicons si no las necesitas. De forma predeterminada, WebView descarga automáticamente un favicon cada vez que se visita un sitio durante la navegación. WebView mantiene dos copias de cada favicon descargado (una en Java y otra en memoria nativa), por lo que inhabilitar las descargas de favicons ahorra memoria (aproximadamente 8 KB por instancia de WebView) y reduce el consumo de ancho de banda. Si tu app no usa ni muestra favicons, usa WebSettingsCompat.setDownloadFaviconsEnabled() de la biblioteca de Jetpack Webkit para inhabilitar las descargas automáticas:

    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. Administra el estado guardado y evita los límites de transacciones. Si guardas el estado de WebView durante los eventos del ciclo de vida con saveState(Bundle), aplica los límites de tamaño de la carga útil con WebViewCompat.saveState() para evitar exceder el límite de 1 MB de savedInstanceState de Android. Para obtener más información, consulta Cómo administrar el estado de WebView de manera eficiente.

Recursos adicionales