Bonnes pratiques pour les applications Web

Le développement de pages et d'applications Web pour les appareils mobiles présente des défis différents de celui d'une page Web pour les navigateurs Web pour ordinateur. Les pratiques suivantes peuvent vous aider à fournir l'application Web la plus efficace pour Android et d'autres appareils mobiles.

  1. Redirigez les appareils mobiles vers une version mobile dédiée de votre site Web. Il existe plusieurs façons de procéder à l'aide de redirections côté serveur. Une méthode courante consiste à "renifler" la chaîne de l'user-agent fournie par le navigateur Web. Pour déterminer s'il faut diffuser une version mobile de votre site, recherchez la chaîne "mobile" dans l'user-agent.
  2. Utilisez HTML5 pour les appareils mobiles. HTML5 est le langage de balisage le plus couramment utilisé pour les sites Web mobiles. Cette norme encourage le développement axé sur le mobile pour s'assurer que les sites Web fonctionnent sur différents appareils. Contrairement aux langages Web précédents, HTML5 utilise des déclarations <DOCTYPE> et charset plus simples : 
    <!DOCTYPE html>
...
<meta charset="UTF-8">
  3. Utilisez les métadonnées de la fenêtre d'affichage pour redimensionner correctement votre page Web. Dans votre document <head>, fournissez des métadonnées qui spécifient la façon dont vous souhaitez que la fenêtre d'affichage du navigateur affiche votre page Web. Par exemple, les métadonnées de votre fenêtre d'affichage peuvent spécifier la hauteur et la largeur de la fenêtre d'affichage du navigateur, l'échelle initiale de la page et la densité d'écran cible.

    L'exemple suivant montre comment définir les métadonnées de la fenêtre d'affichage :

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

    Pour en savoir plus sur l'utilisation des métadonnées de fenêtre d'affichage pour les appareils optimisés pour Android, consultez Compatibilité avec différents écrans dans les applications Web.

  4. Utilisez une mise en page linéaire verticale. Évitez que l'utilisateur ait besoin de faire défiler la page vers la gauche et vers la droite pour la parcourir. L'utilisateur peut faire défiler la page vers le haut et vers le bas plus facilement, ce qui simplifie votre page.
  5. Définissez la hauteur et la largeur de la mise en page sur match_parent. Définir la hauteur et la largeur de votre objet WebView sur match_parent permet de s'assurer que les vues de votre application sont correctement dimensionnées. Nous vous déconseillons de définir la hauteur sur wrap_content, car cela entraîne un dimensionnement incorrect. De même, définir la largeur de la mise en page sur wrap_content n'est pas pris en charge et entraîne l'utilisation de la largeur de son parent par votre WebView. En raison de ce comportement, il est également important de s'assurer qu'aucun des objets de mise en page parents de votre objet WebView n'a sa hauteur et sa largeur définies sur wrap_content.
  6. Évitez d'envoyer plusieurs demandes de fichiers. Étant donné que les appareils mobiles ont généralement une vitesse de connexion inférieure à celle des ordinateurs de bureau, faites en sorte que votre page se charge le plus rapidement possible. Pour accélérer le processus, vous pouvez éviter de charger des fichiers supplémentaires tels que des feuilles de style et des fichiers de script dans le <head>. Pensez également à effectuer une analyse mobile avec PageSpeed Insights de Google pour obtenir des suggestions d'optimisation détaillées spécifiques à votre application.
  7. Désactivez le téléchargement automatique des favicons si vous n'en avez pas besoin. Par défaut, WebView télécharge automatiquement un favicon chaque fois qu'un site est visité lors de la navigation. WebView conserve deux copies de chaque favicon téléchargé (une en Java et une en mémoire native). La désactivation des téléchargements de favicon permet donc d'économiser de la mémoire (environ 8 Ko par instance WebView) et de réduire la consommation de bande passante. Si votre application n'utilise ni n'affiche de favicons, utilisez WebSettingsCompat.setDownloadFaviconsEnabled() de la bibliothèque Jetpack Webkit pour désactiver les téléchargements automatiques :

    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. Gérez l'état enregistré et évitez les limites de transaction. Si vous enregistrez l'état de votre WebView lors des événements de cycle de vie à l'aide de saveState(Bundle), appliquez les limites de taille de la charge utile à l'aide de WebViewCompat.saveState() pour éviter de dépasser la limite de 1 Mo de savedInstanceState d'Android. Pour en savoir plus, consultez Gérer efficacement l'état WebView.
  9. Optimisez les connexions réseau et le chargement des pages grâce aux API de chargement spéculatif. Pour réduire la latence de navigation, utilisez les API Jetpack Webkit afin de préparer les connexions réseau et le contenu à l'avance. Appelez Profile.addQuicHints pour préremplir la prise en charge de HTTP/3 sur QUIC afin que WebView puisse utiliser QUIC immédiatement lors de la première connexion, et utilisez Profile.preconnect pour préchauffer les sockets réseau. Lorsque les URL de destination sont connues ou probables, utilisez Profile.prefetchUrlAsync ou WebViewCompat.prerenderUrlAsync pour récupérer ou afficher les pages en arrière-plan. Pour en savoir plus, consultez Chargement spéculatif dans WebView.
  10. Désactivez le téléchargement automatique des favicons si vous n'en avez pas besoin. Par défaut, WebView télécharge automatiquement un favicon chaque fois qu'un site est visité lors de la navigation. WebView conserve deux copies de chaque favicon téléchargé (une en Java et une en mémoire native). La désactivation des téléchargements de favicon permet donc d'économiser de la mémoire (environ 8 Ko par instance WebView) et de réduire la consommation de bande passante. Si votre application n'utilise ni n'affiche de favicons, utilisez WebSettingsCompat.setDownloadFaviconsEnabled() de la bibliothèque Jetpack Webkit pour désactiver les téléchargements automatiques :

    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. Gérez l'état enregistré et évitez les limites de transaction. Si vous enregistrez l'état de votre WebView lors des événements de cycle de vie à l'aide de saveState(Bundle), appliquez les limites de taille de la charge utile à l'aide de WebViewCompat.saveState() pour éviter de dépasser la limite de 1 Mo de savedInstanceState d'Android. Pour en savoir plus, consultez Gérer efficacement l'état WebView.

Ressources supplémentaires