Best practice per le app web

Lo sviluppo di pagine web e applicazioni per dispositivi mobili presenta sfide diverse rispetto allo sviluppo di una pagina web per browser web desktop. Le seguenti pratiche possono aiutarti a fornire l'applicazione web più efficace per Android e altri dispositivi mobili.

  1. Reindirizza i dispositivi mobili a una versione mobile dedicata del tuo sito web. Esistono diversi modi per farlo utilizzando i reindirizzamenti lato server. Un metodo comune è quello di "annusare" la stringa User-Agent fornita dal browser web. Per determinare se pubblicare una versione mobile del tuo sito, cerca la stringa "mobile" nello user agent.
  2. Utilizza HTML5 per i dispositivi mobili. HTML5 è il linguaggio di markup più comune utilizzato per i siti web mobile. Questo standard incoraggia lo sviluppo mobile-first per garantire che i siti web funzionino su una varietà di dispositivi. A differenza dei linguaggi web precedenti, HTML5 utilizza dichiarazioni <DOCTYPE> e charset più semplici: 
    <!DOCTYPE html>
...
<meta charset="UTF-8">
  3. Utilizza i metadati dell'area visibile per ridimensionare correttamente la pagina web. Nel documento <head>, fornisci i metadati che specificano come vuoi che la viewport del browser visualizzi la tua pagina web. Ad esempio, i metadati del viewport possono specificare l'altezza e la larghezza del viewport del browser, la scala iniziale della pagina e la densità dello schermo di destinazione.

    L'esempio seguente mostra come impostare i metadati dell'area visibile:

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

    Per ulteriori informazioni su come utilizzare i metadati del viewport per i dispositivi basati su Android, consulta Supportare schermi diversi nelle app web.

  4. Utilizza un layout lineare verticale. Evita che l'utente debba scorrere verso sinistra e destra mentre naviga nella tua pagina. Lo scorrimento verso l'alto e verso il basso è più semplice per l'utente e rende la pagina più semplice.
  5. Imposta l'altezza e la larghezza del layout su match_parent. Se imposti l'altezza e la larghezza dell'oggetto WebView su match_parent, le dimensioni delle visualizzazioni della tua app saranno corrette. Sconsigliamo di impostare l'altezza su wrap_content perché le dimensioni risultano errate. Allo stesso modo, l'impostazione della larghezza del layout su wrap_content non è supportata e fa sì che WebView utilizzi la larghezza del relativo elemento principale. A causa di questo comportamento, è anche importante assicurarsi che nessuno degli oggetti di layout principali dell'oggetto WebView abbia altezza e larghezza impostate su wrap_content.
  6. Evita più richieste di file. Poiché i dispositivi mobili in genere hanno una velocità di connessione più lenta rispetto ai computer, fai in modo che il caricamento pagina sia il più rapidamente possibile. Un modo per velocizzare il processo è evitare di caricare file aggiuntivi come fogli di stile e file di script in <head>. Inoltre, valuta la possibilità di eseguire l'analisi mobile con PageSpeed Insights di Google per suggerimenti di ottimizzazione dettagliati specifici per la tua app.
  7. Disattiva i download automatici delle favicon se non ti servono. Per impostazione predefinita, WebView scarica automaticamente una favicon ogni volta che un sito viene visitato durante la navigazione. WebView conserva due copie di ogni favicon scaricata (una in Java e una nella memoria nativa), quindi la disattivazione dei download delle favicon consente di risparmiare memoria (circa 8 KB per istanza di WebView) e riduce il consumo di larghezza di banda. Se la tua app non utilizza o non mostra le favicon, utilizza WebSettingsCompat.setDownloadFaviconsEnabled() dalla libreria Jetpack Webkit per disattivare i download automatici:

    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. Gestisci lo stato salvato ed evita i limiti delle transazioni. Se salvi lo stato di WebView durante gli eventi del ciclo di vita utilizzando saveState(Bundle), applica i limiti di dimensione del payload utilizzando WebViewCompat.saveState() per evitare di superare il limite di 1 MB di savedInstanceState di Android. Per saperne di più, consulta Gestire in modo efficiente lo stato di WebView.
  9. Ottimizza le connessioni di rete e il caricamento delle pagine con le API di caricamento speculativo. Per ridurre la latenza di navigazione, utilizza le API Jetpack Webkit per preparare in anticipo le connessioni di rete e i contenuti. Chiama Profile.addQuicHints per precompilare il supporto di HTTP/3 su QUIC in modo che WebView possa utilizzare QUIC immediatamente alla prima connessione e utilizza Profile.preconnect per preriscaldare i socket di rete. Quando gli URL di destinazione sono noti o probabili, utilizza Profile.prefetchUrlAsync o WebViewCompat.prerenderUrlAsync per recuperare o eseguire il rendering delle pagine in background. Per saperne di più, leggi Caricamento speculativo in WebView.
  10. Disattiva i download automatici delle favicon se non ti servono. Per impostazione predefinita, WebView scarica automaticamente una favicon ogni volta che un sito viene visitato durante la navigazione. WebView conserva due copie di ogni favicon scaricata (una in Java e una nella memoria nativa), quindi la disattivazione dei download delle favicon consente di risparmiare memoria (circa 8 KB per istanza di WebView) e riduce il consumo di larghezza di banda. Se la tua app non utilizza o non mostra le favicon, utilizza WebSettingsCompat.setDownloadFaviconsEnabled() dalla libreria Jetpack Webkit per disattivare i download automatici:

    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. Gestisci lo stato salvato ed evita i limiti delle transazioni. Se salvi lo stato di WebView durante gli eventi del ciclo di vita utilizzando saveState(Bundle), applica i limiti di dimensione del payload utilizzando WebViewCompat.saveState() per evitare di superare il limite di 1 MB di savedInstanceState di Android. Per saperne di più, consulta Gestire in modo efficiente lo stato di WebView.

Risorse aggiuntive