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

Charger le contenu de l'application

Vous pouvez fournir du contenu Web, tel que HTML, JavaScript et CSS, pour votre application, que vous compilez de manière statique dans l'application plutôt que plutôt que de les récupérer sur Internet.

Le contenu intégré à l'application ne nécessite pas d'accès à Internet et ne consomme pas de bande passante. Si le contenu est spécialement conçu pour WebView uniquement, c'est-à-dire qu'il dépend de la communication avec l'application native. Par conséquent, les utilisateurs ne peuvent pas accidentellement le charger dans un navigateur Web.

Toutefois, le contenu intégré à l'application présente des inconvénients. Mettre à jour du contenu Web nécessite d'expédier une nouvelle mise à jour d'application, ce qui peut entraîner des incohérences entre le contenu d'un site Web et celui de l'application de votre appareil, si les utilisateurs ont des versions obsolètes de l'application.

WebViewAssetLoader

WebViewAssetLoader est un flexible et efficace pour charger le contenu de l'application objet WebView. Cette classe est compatible avec suivantes:

Chargement de contenu avec une URL HTTP(S) pour assurer la compatibilité avec la même origine règle.
Chargement de sous-ressources telles que JavaScript, CSS, images et iFrames.

Incluez WebViewAssetLoader dans votre fichier d'activité principal. Voici un exemple exemple de chargement d'un contenu Web simple à partir du dossier "assets" :

Kotlin

private class LocalContentWebViewClient(private val assetLoader: WebViewAssetLoader) : WebViewClientCompat() {
    @RequiresApi(21)
    override fun shouldInterceptRequest(
        view: WebView,
        request: WebResourceRequest
    ): WebResourceResponse? {
        return assetLoader.shouldInterceptRequest(request.url)
    }

    // To support API < 21.
    override fun shouldInterceptRequest(
        view: WebView,
        url: String
    ): WebResourceResponse? {
        return assetLoader.shouldInterceptRequest(Uri.parse(url))
    }
}

Java

private static class LocalContentWebViewClient extends WebViewClientCompat {

    private final WebViewAssetLoader mAssetLoader;

    LocalContentWebViewClient(WebViewAssetLoader assetLoader) {
        mAssetLoader = assetLoader;
    }

    @Override
    @RequiresApi(21)
    public WebResourceResponse shouldInterceptRequest(WebView view,
                                     WebResourceRequest request) {
        return mAssetLoader.shouldInterceptRequest(request.getUrl());
    }

    @Override
    @SuppressWarnings("deprecation") // To support API < 21.
    public WebResourceResponse shouldInterceptRequest(WebView view,
                                     String url) {
        return mAssetLoader.shouldInterceptRequest(Uri.parse(url));
    }
}

Votre application doit configurer une instance WebViewAssetLoader selon ses besoins. La la section suivante contient un exemple.

Créer des composants et des ressources dans l'application

WebViewAssetLoader s'appuie sur PathHandler pour charger des ressources correspondant à un chemin d'accès à une ressource donné. Bien que vous vous pouvez implémenter cette interface pour récupérer des ressources selon les besoins de votre application, Groupes de bibliothèques WebKit AssetsPathHandler et ResourcesPathHandler pour charger les ressources et les éléments Android, respectivement.

Pour commencer, créez des éléments et des ressources pour votre application. En général, ce qui suit s'applique:

Les fichiers texte tels que HTML, JavaScript et CSS appartiennent aux éléments.
Les images et autres fichiers binaires appartiennent aux ressources.

Pour ajouter des fichiers Web texte à un projet, procédez comme suit:

Dans Android Studio, effectuez un clic droit sur app > src > dossier principal Sélectionnez Nouveau > Annuaire. <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> Figure 1. Créez un dossier de composants pour votre projet.
Nommez ce dossier "assets". <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> Figure 2. Attribuez un nom au dossier de composants.
Effectuez un clic droit sur le dossier assets, puis cliquez sur Nouveau > Fichier. Saisissez index.html et appuyez sur la touche Entrée ou touche Entrée. <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> Figure 3. Créer le index.html .
Répétez l'étape précédente pour créer un fichier vide pour stylesheet.css
Remplissez les fichiers vides que vous avez créés avec le contenu des deux codes suivants. exemples.

```html
<!-- index.html content -->

<html>
  <head>
    <!-- Tip: Use relative URLs when referring to other in-app content to give
              your app code the flexibility to change the scheme or domain as
              necessary. -->
    <link rel="stylesheet" href="/assets/stylesheet.css">
  </head>
  <body>
    <p>This file is loaded from in-app content.</p>
    <p><img src="/res/drawable/android_robot.png" alt="Android robot" width="100"></p>
  </body>
</html>
```

```css
<!-- stylesheet.css content -->

body {
  background-color: lightblue;
}
```

Pour ajouter un fichier Web basé sur une image à votre projet, procédez comme suit:

Téléchargez le Android_symbol_green_RGB.png sur votre ordinateur local.
Renommez le fichier android_robot.png.
Déplacez manuellement le fichier dans le répertoire main/res/drawable de votre projet sur votre disque dur.

La figure 4 montre l'image que vous avez ajoutée et le texte des exemples de code précédents. affichées dans une application.

Image montrant le résultat d'un rendu de l'application — **Figure 4** : Fichier HTML et fichier image intégrés à l'application affichées dans une application.

Pour terminer l'application, procédez comme suit:

Enregistrez les gestionnaires et configurez AssetLoader en ajoutant la classe le code suivant à la méthode onCreate():

Kotlin

val assetLoader = WebViewAssetLoader.Builder()
                       .addPathHandler("/assets/", AssetsPathHandler(this))
                       .addPathHandler("/res/", ResourcesPathHandler(this))
                       .build()
webView.webViewClient = LocalContentWebViewClient(assetLoader)

Java

final WebViewAssetLoader assetLoader = new WebViewAssetLoader.Builder()
         .addPathHandler("/assets/", new WebViewAssetLoader.AssetsPathHandler(this))
         .addPathHandler("/res/", new WebViewAssetLoader.ResourcesPathHandler(this))
         .build();
mWebView.setWebViewClient(new LocalContentWebViewClient(assetLoader));

Chargez le contenu en ajoutant le code suivant à la méthode onCreate():

Kotlin

webView.loadUrl("https://appassets.androidplatform.net/assets/index.html")

Java

mWebView.loadUrl("https://appassets.androidplatform.net/assets/index.html");

Combiner le contenu intégré à l'application et les ressources de votre site Web

Il se peut que votre application doive charger à la fois du contenu intégré et du contenu de la comme une page HTML intégrée à l'application dont le style est défini par le code CSS de votre site Web. WebViewAssetLoader est compatible avec ce cas d'utilisation. Si aucune des adresses e-mail PathHandler instances peuvent trouver une ressource pour le chemin d'accès donné, WebView tombe au chargement de contenu depuis Internet. Si vous mélangez des contenus ressources de votre site Web, réservez des chemins de répertoire, tels que /assets/ ou /resources/, pour les ressources intégrées à l'application. Évitez de stocker des ressources de votre dans ces zones géographiques.

Kotlin

val assetLoader = WebViewAssetLoader.Builder()
                        .setDomain("example.com") // Replace this with your website's domain.
                        .addPathHandler("/assets/", AssetsPathHandler(this))
                        .build()

webView.webViewClient = LocalContentWebViewClient(assetLoader)
val inAppHtmlUrl = "https://example.com/assets/index.html"
webView.loadUrl(inAppHtmlUrl)
val websiteUrl = "https://example.com/website/data.json"

// JavaScript code to fetch() content from the same origin.
val jsCode = "fetch('$websiteUrl')" +
        ".then(resp => resp.json())" +
        ".then(data => console.log(data));"

webView.evaluateJavascript(jsCode, null)

Java

final WebViewAssetLoader assetLoader = new WebViewAssetLoader.Builder()
           .setDomain("example.com") // Replace this with your website's domain.
           .addPathHandler("/assets/", new AssetsPathHandler(this))
           .build();

mWebView.setWebViewClient(new LocalContentWebViewClient(assetLoader));
String inAppHtmlUrl = "https://example.com/assets/index.html";
mWebView.loadUrl(inAppHtmlUrl);
String websiteUrl = "https://example.com/website/data.json";

// JavaScript code to fetch() content from the same origin.
String jsCode = "fetch('" + websiteUrl + "')" +
      ".then(resp => resp.json())" +
      ".then(data => console.log(data));";

mWebView.evaluateJavascript(jsCode, null);

Voir la version de démonstration de WebView sur GitHub pour obtenir un exemple de page HTML intégrée à une application récupérant des données JSON hébergées sur le Web.

loadDataAvecURLDeBase

Lorsque votre application a uniquement besoin de charger une page HTML et n'a pas besoin d'intercepter sous-ressources, envisagez d'utiliser loadDataWithBaseURL(), qui ne nécessite pas de composants Application. Vous pouvez l'utiliser comme indiqué dans le code suivant : exemple:

Kotlin

val html = "<html><body><p>Hello world</p></body></html>"
val baseUrl = "https://example.com/"

webView.loadDataWithBaseURL(baseUrl, html, "text/html", null, baseUrl)

Java

String html = "<html><body><p>Hello world</p></body></html>";
String baseUrl = "https://example.com/";

mWebView.loadDataWithBaseURL(baseUrl, html, "text/html", null, baseUrl);

Choisissez soigneusement les valeurs d'argument. Réfléchissez aux points suivants :

baseUrl: URL sous laquelle votre contenu HTML est chargé. Il doit s'agir URL HTTP(S).
data: contenu HTML que vous souhaitez afficher sous forme de chaîne.
mimeType: il doit généralement être défini sur text/html.
encoding: cet argument n'est pas utilisé lorsque baseUrl est une URL HTTP(S). Il peut donc être définie sur null.
historyUrl: défini sur la même valeur que baseUrl.

Nous vous recommandons vivement d'utiliser une URL HTTP(S) comme baseUrl, car cela permet assurez-vous que votre application respecte le règlement concernant l'origine commune.

Si vous ne trouvez pas de baseUrl adapté à votre contenu et que vous préférez utiliser loadData(), vous devez encoder le contenu avec encodage-pourcent ou Base64 l'encodage. Nous vous recommandons vivement de choisir l'encodage Base64 et d'utiliser les API Android pour encoder de manière automatisée, comme illustré dans l'exemple de code suivant:

Kotlin

val encodedHtml: String = Base64.encodeToString(html.toByteArray(), Base64.NO_PADDING)

webView.loadData(encodedHtml, mimeType, "base64")

Java

String encodedHtml = Base64.encodeToString(html.getBytes(), Base64.NO_PADDING);

mWebView.loadData(encodedHtml, mimeType, "base64");

Ce qu'il faut éviter

Il existe plusieurs autres façons de charger le contenu de l'application, mais nous vous recommandons à leur encontre:

Les URL file:// et data: sont considérées comme ayant des origines opaques. ce qui signifie qu'ils ne peuvent pas exploiter les API Web performantes fetch() ou XMLHttpRequest. loadData() utilise des URL data: en interne. Nous vous conseillons donc d'utiliser WebViewAssetLoader ou loadDataWithBaseURL() à la place.
Bien que WebSettings.setAllowFileAccessFromFileURLs() et WebSettings.setAllowUniversalAccessFromFileURLs() pour résoudre les problèmes liés aux URL file://, nous vous déconseillons de définir à true, car cela rend votre application vulnérable aux attaques contre les failles de sécurité. Nous vous recommandons de les définir explicitement sur false à tous les niveaux d'API. pour une sécurité optimale.
C'est également pour les mêmes raisons que nous vous déconseillons d'utiliser file://android_assets/. file://android_res/ URL. AssetsHandler et ResourcesHandler sont destinés à être des remplacements de type "drop-in".
Évitez d'utiliser MIXED_CONTENT_ALWAYS_ALLOW Ce paramètre n'est généralement pas nécessaire et affaiblit la sécurité de votre application. Nous vous recommandons de charger le contenu intégré à l'application en utilisant le même schéma : HTTP ou HTTPS, en tant que ressources de votre site Web MIXED_CONTENT_COMPATIBILITY_MODE ou MIXED_CONTENT_NEVER_ALLOW, le cas échéant.