Cette page a été traduite par l'API Cloud Translation.

Créer des applications Web dans WebView

Utiliser WebView pour diffuser une application Web ou une page Web dans le cadre d'une application cliente. La classe WebView est une extension de la classe View d'Android, qui permet vous affichez des pages web dans le cadre de la mise en page de votre activité. Il n'inclut pas les d'un navigateur Web entièrement développé, telles que les commandes de navigation ou barre d'adresse. Par défaut, WebView affiche uniquement une page Web.

WebView peut vous aider à fournir dans votre appli des informations dont vous pourriez avoir besoin mise à jour, comme un contrat utilisateur final ou un guide de l'utilisateur. Dans votre application Android, vous pouvez créer un Activity contenant un WebView, puis utilisez-la pour afficher votre document hébergé en ligne.

WebView peut également être utile lorsque votre application fournit à l'utilisateur des données nécessitant un une connexion Internet pour récupérer des données, telles que des e-mails. Dans ce cas, vous pourriez qu'il est plus facile de créer un WebView dans votre application Android qui affiche une image contenant toutes les données utilisateur, au lieu d'exécuter une requête réseau, analyser les données et les afficher dans une mise en page Android. Au lieu de cela, vous pouvez concevoir une page Web adaptée aux appareils Android, puis mettez en œuvre WebView dans votre application Android qui charge la page Web.

Ce document explique comment démarrer avec WebView et comment lier depuis votre page Web vers le code côté client dans votre application Android, comment gérer la navigation sur les pages et gérer les fenêtres lorsque vous utilisez WebView.

Utiliser WebView sur les versions antérieures d'Android

Pour utiliser en toute sécurité les fonctionnalités WebView plus récentes sur l'appareil où votre appli est installée en cours d'exécution, ajoutez AndroidX Webkit. Il s'agit d'une image statique que vous pouvez ajouter à votre application pour utiliser les API android.webkit qui ne sont pas pour les versions antérieures de la plate-forme.

Ajoutez-le à votre fichier build.gradle comme suit:

Kotlin

dependencies {
    implementation("androidx.webkit:webkit:1.8.0")
}

Groovy

dependencies {
    implementation ("androidx.webkit:webkit:1.8.0")
}

Découvrez WebView exemple sur GitHub pour en savoir plus.

Ajouter une WebView à votre application

Pour ajouter un WebView à votre application, vous pouvez inclure l'élément <WebView> dans votre mise en page de l'activité ou définissez la fenêtre Activity entière en tant que WebView dans onCreate()

Ajouter une WebView dans la mise en page de l'activité

Pour ajouter un WebView à votre application dans la mise en page, ajoutez le code suivant à votre Fichier XML de mise en page de l'activité:

<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
/>

Pour charger une page Web dans WebView, utilisez loadUrl(), en tant que illustré dans l'exemple suivant:

Kotlin

val myWebView: WebView = findViewById(R.id.webview)
myWebView.loadUrl("http://www.example.com")

Java

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.loadUrl("http://www.example.com");

Ajouter une WebView dans onCreate()

Pour ajouter un WebView à votre application dans la méthode onCreate() d'une activité, utilisez plutôt logique comme suit:

Kotlin

val myWebView = WebView(activityContext)
setContentView(myWebView)

Java

WebView myWebView = new WebView(activityContext);
setContentView(myWebView);

Ensuite, chargez la page:

Kotlin

myWebView.loadUrl("http://www.example.com")

Java

myWebView.loadUrl("https://www.example.com");

Ou chargez l'URL à partir d'une chaîne HTML:

Kotlin

// Create an unencoded HTML string, then convert the unencoded HTML string into
// bytes. Encode it with base64 and load the data.
val unencodedHtml =
     "<html><body>'%23' is the percent code for ‘#‘ </body></html>";
val encodedHtml = Base64.encodeToString(unencodedHtml.toByteArray(), Base64.NO_PADDING)
myWebView.loadData(encodedHtml, "text/html", "base64")

Java

// Create an unencoded HTML string, then convert the unencoded HTML string into
// bytes. Encode it with base64 and load the data.
String unencodedHtml =
     "<html><body>'%23' is the percent code for ‘#‘ </body></html>";
String encodedHtml = Base64.encodeToString(unencodedHtml.getBytes(),
        Base64.NO_PADDING);
myWebView.loadData(encodedHtml, "text/html", "base64");

Votre application doit avoir accès à Internet. Pour obtenir un accès à Internet, demandez le Autorisation INTERNET dans votre manifeste, comme illustré dans l'exemple suivant:

<manifest ... >
    <uses-permission android:name="android.permission.INTERNET" />
    ...
</manifest>

Vous pouvez personnaliser votre WebView en effectuant l'une des opérations suivantes:

Activer le mode plein écran avec WebChromeClient Ce cours est également appelé lorsqu'un WebView a besoin d'une autorisation pour modifier l'UI de l'application hôte. comme la création ou la fermeture de fenêtres, ou l'envoi de boîtes de dialogue JavaScript utilisateur. Pour en savoir plus sur le débogage dans ce contexte, consultez Déboguer les fichiers applications.
Gérer les événements qui ont un impact sur l'affichage du contenu, tels que les erreurs dans le formulaire ou la navigation à l'aide de WebViewClient Vous pouvez également utiliser cette sous-classe pour intercepter le chargement d'URL.
Activer JavaScript en modifiant WebSettings
Utiliser JavaScript pour accéder aux objets du framework Android que vous avez injectés en WebView.

Utiliser JavaScript dans WebView

Si la page Web que vous souhaitez charger dans votre WebView utilise JavaScript, vous devez activer JavaScript pour votre WebView. Après avoir activé JavaScript, vous pouvez créer des interfaces entre le code de votre application et votre code JavaScript.

Activer JavaScript

Par défaut, JavaScript est désactivé dans un WebView. Vous pouvez l'activer via la WebSettings a été associé à votre WebView. Récupérer WebSettings avec getSettings(), puis activez JavaScript avec setJavaScriptEnabled()

Consultez l'exemple suivant :

Kotlin

val myWebView: WebView = findViewById(R.id.webview)
myWebView.settings.javaScriptEnabled = true

Java

WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

WebSettings donne accès à de nombreux autres paramètres susceptibles de vous être utiles utiles. Par exemple, si vous développez une application Web spécifiquement pour WebView dans votre application Android, vous pouvez définir chaîne user-agent avec setUserAgentString(), puis interroger le user-agent personnalisé dans votre page Web pour vérifier que le client qui demande votre page Web est votre application Android.

Lier du code JavaScript au code Android

Lors du développement d'une application Web conçue spécifiquement pour WebView dans votre application Android, vous pouvez créer des interfaces entre votre code JavaScript et code Android côté client. Par exemple, votre code JavaScript peut appeler une méthode dans votre code Android pour afficher un Dialog au lieu d'utiliser la fonction alert() de JavaScript.

Pour lier une nouvelle interface entre votre code JavaScript et votre code Android, appelez addJavascriptInterface(), en lui transmettant une instance de classe à lier à votre code JavaScript, ainsi qu'un nom d'interface que votre code JavaScript peut appeler pour accéder à la classe.

Avertissement :L'utilisation de addJavascriptInterface() permet à JavaScript de contrôler votre Android l'application. Bien que cela puisse être utile, cela peut également poser un problème de sécurité dangereux. Lorsque le code HTML dans WebView n'est pas fiable (par exemple, une partie ou l'intégralité du code HTML est fourni par une personne ou un processus inconnu, alors qu'un pirate informatique peut inclure du code HTML qui exécute votre code côté client et éventuellement n'importe quel code choisi par l'attaquant. Par conséquent, n'utilisez pas addJavascriptInterface() à moins que vous avez écrit tout le code HTML et JavaScript qui apparaît dans votre WebView. À ne pas faire permettre à l'utilisateur de naviguer dans votre WebView vers des pages Web qui ne vous appartiennent pas. Laissez plutôt l'application de navigateur par défaut de l'utilisateur ouvrir les liens en langue étrangère. Par par défaut, le navigateur Web de l'utilisateur ouvre tous les liens URL. Cet avertissement s'applique si vous gérez vous-même la navigation sur les pages, comme décrit dans .

Par exemple, vous pouvez inclure la classe suivante dans votre application Android:

Kotlin

/** Instantiate the interface and set the context.  */
class WebAppInterface(private val mContext: Context) {

    /** Show a toast from the web page.  */
    @JavascriptInterface
    fun showToast(toast: String) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show()
    }
}

Java

public class WebAppInterface {
    Context mContext;

    /** Instantiate the interface and set the context. */
    WebAppInterface(Context c) {
        mContext = c;
    }

    /** Show a toast from the web page. */
    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }
}

Dans cet exemple, la classe WebAppInterface permet à la page Web de créer un Message Toast, à l'aide de showToast() .

Vous pouvez lier cette classe au JavaScript qui s'exécute dans votre WebView avec addJavascriptInterface(), comme illustré dans l'exemple suivant:

Kotlin

val webView: WebView = findViewById(R.id.webview)
webView.addJavascriptInterface(WebAppInterface(this), "Android")

Java

WebView webView = (WebView) findViewById(R.id.webview);
webView.addJavascriptInterface(new WebAppInterface(this), "Android");

Cela crée une interface appelée Android pour JavaScript exécutée dans le WebView À ce stade, votre application Web a accès au WebAppInterface. Par exemple, voici du code HTML et JavaScript crée un toast dans la nouvelle interface lorsque l'utilisateur appuie sur un bouton:

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />

<script type="text/javascript">
    function showAndroidToast(toast) {
        Android.showToast(toast);
    }
</script>

Il n'est pas nécessaire d'initialiser l'interface Android à partir de JavaScript. La WebView le rend automatiquement disponible pour votre page Web. Ainsi, lorsqu'un utilisateur appuie sur le bouton, la fonction showAndroidToast() utilise l'interface Android pour appeler la méthode WebAppInterface.showToast().

Gérer la navigation sur les pages

Lorsque l'utilisateur appuie sur un lien depuis une page Web de votre WebView, Android par défaut lance une application qui gère les URL. Généralement, le navigateur Web par défaut s'ouvre et charge l'URL de destination. Vous pouvez toutefois modifier ce comportement WebView pour que les liens s'ouvrent dans votre WebView. Vous pouvez ensuite laisser l'utilisateur de parcourir l'historique de leur page Web, qui est conservé par votre WebView.

Pour ouvrir les liens sur lesquels l'utilisateur a appuyé, fournissez un WebViewClient pour votre WebView avec setWebViewClient() Tous les liens sur lesquels l'utilisateur appuie se chargent dans votre WebView. Si vous souhaitez mieux contrôler lorsqu'un lien se charge, créez votre propre WebViewClient qui remplace shouldOverrideUrlLoading() . L'exemple suivant suppose que MyWebViewClient est une classe interne sur Activity.

Kotlin

private class MyWebViewClient : WebViewClient() {

    override fun shouldOverrideUrlLoading(view: WebView?, url: String?): Boolean {
        if (Uri.parse(url).host == "www.example.com") {
            // This is your website, so don't override. Let your WebView load
            // the page.
            return false
        }
        // Otherwise, the link isn't for a page on your site, so launch another
        // Activity that handles URLs.
        Intent(Intent.ACTION_VIEW, Uri.parse(url)).apply {
            startActivity(this)
        }
        return true
    }
}

Java

private class MyWebViewClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        if ("www.example.com".equals(request.getUrl().getHost())) {
      // This is your website, so don't override. Let your WebView load the
      // page.
      return false;
    }
    // Otherwise, the link isn't for a page on your site, so launch another
    // Activity that handles URLs.
    Intent intent = new Intent(Intent.ACTION_VIEW, request.getUrl());
    startActivity(intent);
    return true;
  }
}

Créez ensuite une instance de ce nouveau WebViewClient pour WebView:

Kotlin

val myWebView: WebView = findViewById(R.id.webview)
myWebView.webViewClient = MyWebViewClient()

Java

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebViewClient(new MyWebViewClient());

Désormais, lorsque l'utilisateur appuie sur un lien, le système appelle La méthode shouldOverrideUrlLoading(), qui vérifie si l'hôte de l'URL correspond un domaine spécifique, tel que défini dans l'exemple précédent. Si elles correspondent, alors la méthode renvoie la valeur "false" et ne remplace pas le chargement de l'URL. Elle permet au WebView charge l'URL comme d'habitude. Si l'hôte de l'URL ne correspond pas, Intent est créé pour lancer l'application par défaut Activity pour la gestion des URL, qui pointe vers le navigateur Web par défaut de l'utilisateur.

Gérer les URL personnalisées

WebView applique des restrictions lors de la demande de ressources et de la résolution des liens qui utilisent un schéma d'URL personnalisé. Par exemple, si vous implémentez des rappels comme shouldOverrideUrlLoading() ou shouldInterceptRequest(), puis WebView les invoque uniquement pour les URL valides.

Par exemple, WebView n'appelle peut-être pas votre méthode shouldOverrideUrlLoading(). pour les liens de ce type:

<a href="showProfile">Show Profile</a>

Les URL non valides, comme celle présentée dans l'exemple précédent, sont traitées de manière incohérente dans WebView. Nous vous recommandons donc d'utiliser une URL au bon format. Vous pouvez utiliser un schéma personnalisé ou une URL HTTPS pour un domaine que votre organisation .

Au lieu d'utiliser une simple chaîne dans un lien, comme dans l'exemple précédent, vous pouvez utilisez un schéma personnalisé, par exemple:

<a href="example-app:showProfile">Show Profile</a>

Vous pouvez ensuite gérer cette URL dans votre méthode shouldOverrideUrlLoading() comme suit : ceci:

Kotlin

// The URL scheme must be non-hierarchical, meaning no trailing slashes.
const val APP_SCHEME = "example-app:"

override fun shouldOverrideUrlLoading(view: WebView?, url: String?): Boolean {
    return if (url?.startsWith(APP_SCHEME) == true) {
        urlData = URLDecoder.decode(url.substring(APP_SCHEME.length), "UTF-8")
        respondToData(urlData)
        true
    } else {
        false
    }
}

Java

// The URL scheme must be non-hierarchical, meaning no trailing slashes.
private static final String APP_SCHEME = "example-app:";

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
    if (url.startsWith(APP_SCHEME)) {
        urlData = URLDecoder.decode(url.substring(APP_SCHEME.length()), "UTF-8");
        respondToData(urlData);
        return true;
    }
    return false;
}

L'API shouldOverrideUrlLoading() est principalement destinée à lancer des intents. pour des URL spécifiques. Lors de son implémentation, assurez-vous de renvoyer false pour les URL. les identifiants WebView. Cependant, vous n'êtes pas limité au lancement d'intents. Vous pouvez Remplacez les intents de lancement par un comportement personnalisé du code précédent exemples.

Parcourir l'historique d'une page Web

Lorsque votre WebView remplace le chargement de l'URL, il accumule automatiquement un l'historique des pages Web consultées. Vous pouvez avancer ou reculer dans les historique avec goBack() et goForward()

L'exemple suivant montre comment votre Activity peut utiliser le Retour de l'appareil pour revenir en arrière:

Kotlin

override fun onKeyDown(keyCode: Int, event: KeyEvent?): Boolean {
    // Check whether the key event is the Back button and if there's history.
    if (keyCode == KeyEvent.KEYCODE_BACK && myWebView.canGoBack()) {
        myWebView.goBack()
        return true
    }
    // If it isn't the Back button or there isn't web page history, bubble up to
    // the default system behavior. Probably exit the activity.
    return super.onKeyDown(keyCode, event)
}

Java

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    // Check whether the key event is the Back button and if there's history.
    if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack()) {
        myWebView.goBack();
        return true;
    }
    // If it isn't the Back button or there's no web page history, bubble up to
    // the default system behavior. Probably exit the activity.
    return super.onKeyDown(keyCode, event);
}

Si votre application utilise AndroidX AppCompat 1.6.0 ou version ultérieure, vous pouvez simplifier l'extrait de code:

Kotlin

onBackPressedDispatcher.addCallback {
    // Check whether there's history.
    if (myWebView.canGoBack()) {
        myWebView.goBack()
    }
}

Java

onBackPressedDispatcher.addCallback {
    // Check whether there's history.
    if (myWebView.canGoBack()) {
        myWebView.goBack();
    }
}

La méthode canGoBack() renvoie la valeur "true" si l'utilisateur dispose d'un historique de pages Web. De même, vous peut utiliser canGoForward() pour vérifier s'il existe un historique de transfert. Si vous n'effectuez pas cette vérification, une fois que l'utilisateur a atteint la fin de l'historique, goBack() et goForward() le font rien.

Gérer les modifications de configuration des appareils

Pendant l'exécution, l'état d'une activité change lorsque la configuration d'un appareil modifications, par exemple lorsque les utilisateurs font pivoter l'appareil ou ignorent un éditeur de mode de saisie. (IME). Ces modifications entraînent la destruction de l'activité d'un objet WebView et nouvelle activité, ce qui crée également un objet WebView qui charge l'URL de l'objet détruit. Pour modifier le comportement par défaut de votre activité, vous pouvez modifiez la façon dont il gère les modifications orientation dans votre fichier manifeste. Pour en savoir plus sur la gestion des modifications de configuration pendant l'exécution, consultez la page Gérer la configuration modifications.

Gérer les fenêtres

Par défaut, les demandes d'ouverture de nouvelles fenêtres sont ignorées. Cela est vrai, qu’ils soient sont ouverts par JavaScript ou par l'attribut cible dans un lien. Vous pouvez personnaliser votre WebChromeClient pour fournir votre propre comportement en vue d'ouvrir plusieurs Windows.

Pour renforcer la sécurité de votre application, il est préférable d'empêcher les pop-ups et les nouvelles fenêtres à l'ouverture. Le moyen le plus sûr d'implémenter ce comportement consiste à transmettre "true" à setSupportMultipleWindows() sans remplacer onCreateWindow() dont dépend setSupportMultipleWindows(). Cette logique empêche page dont les liens contiennent target="_blank".