Uygulama içi içeriği yükleme

Web tabanlı içerik (örneğin, HTML, JavaScript ve CSS: Uygulamanızın kullanması için, bunun yerine statik olarak uygulama derlediğiniz getirme işlemidir.

Uygulama içi içerik internet erişimi gerektirmez veya kullanıcının bant genişliğini tüketmez. Eğer içerik yalnızca WebView için özel olarak tasarlanmıştır. Yani, yerel bir uygulamayla iletişim kurmaya bağlıdır; o halde kullanıcılar yanlışlıkla dosyayı bir web tarayıcısına yükleyin.

Ancak uygulama içi içerikle ilgili bazı dezavantajlar vardır. Web tabanlı içeriği güncelleme yeni bir uygulama güncellemesinin gönderilmesi gerekiyor. Uyuşmazlık olasılığı da var. bir web sitesindeki ve cihazınızdaki uygulamadakiler arasındaki içerik kullanıcıların uygulama sürümü eskiyse

WebViewAssetLoader

WebViewAssetLoader bir bir tarayıcıda uygulama içi içeriğin yüklenmesinin WebView nesne olarak tanımlar. Bu sınıf şunları destekler: takip etmek için:

WebViewAssetLoader öğesini ana etkinlik dosyanıza dahil edin. Bu, öğeler klasöründen basit web içeriği yükleme örneği:

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));
    }
}

Uygulamanız, bir WebViewAssetLoader örneğini ihtiyaçlarına uygun şekilde yapılandırmalıdır. İlgili içeriği oluşturmak için kullanılan bununla ilgili bir örnek göreceksiniz.

Uygulama içi öğeler ve kaynaklar oluşturun

WebViewAssetLoader şuna bağlı: PathHandler örneklerinden birini kullanarak belirli bir kaynak yoluna karşılık gelen kaynakları yükler. Siz Bu arayüzü, uygulamanızın gerektiği gibi kaynak almak için kullanabilir. Webkit kitaplık paketleri AssetsPathHandler ve ResourcesPathHandler Android öğelerini ve kaynaklarını yüklemek için sıralı olarak.

Başlamak için uygulamanız için öğeler ve kaynaklar oluşturun. Genellikle, aşağıdakiler geçerlidir:

  • HTML, JavaScript ve CSS gibi metin dosyaları öğelere aittir.
  • Resimler ve diğer ikili program dosyaları kaynaklara ait.

Bir projeye metin tabanlı web dosyaları eklemek için şunları yapın:

  1. Android Studio'da uygulamayı sağ tıklayın > src > ana klasör ve ardından Yeni > Dizin'e gidin.
    Android Studio dizin oluşturma menülerini gösteren resim
    Şekil 1. Sizin için bir öğe klasörü oluşturun belirler.
  2. Klasöre "assets" adını verin.
    Öğe klasörünü gösteren resim
    Şekil 2. Öğeler klasörüne ad verin.
  3. assets klasörünü sağ tıklayın ve ardından Yeni > Dosya. index.html yazıp Return tuşuna basın veya Enter tuşuna basın.
  4. Önceki adımı tekrarlayın ve şunun için boş bir dosya oluşturun: stylesheet.css
  5. Oluşturduğunuz boş dosyaları sonraki iki koddaki içerikle doldurun kullanabilirsiniz.
```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;
}
```

Projenize görüntü tabanlı bir web dosyası eklemek için şunları yapın:

  1. İndirin: Android_symbol_green_RGB.png dosyasını yerel makinenize yükleyin.

  2. Dosyanın adını android_robot.png olarak değiştirin.

  3. Dosyayı şu konumda projenizin main/res/drawable dizinine manuel olarak taşıyın: sabit diskinize yapıştırın.

Şekil 4'te, eklediğiniz resim ve önceki kod örneklerinde bulunan metin gösterilmektedir oluşturulur.

Uygulama tarafından oluşturulan çıktıyı gösteren resim
Şekil 4. Uygulama içi HTML dosyası ve resim dosyası oluşturulur.
ziyaret edin.
'nı inceleyin.

Uygulamayı tamamlamak için şunları yapın:

  1. İşleyicileri kaydedin veAssetLoader şu kodu onCreate() yöntemine ekleyin:

    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));

  2. Aşağıdaki kodu onCreate() yöntemine ekleyerek içeriği yükleyin:

    Kotlin

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

    Java

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

Uygulama içi içeriği web sitenizdeki kaynaklarla bir arada kullanın

Uygulamanızın, internet sitenizin CSS'si tarafından stilize edilen uygulama içi HTML sayfası gibi. WebViewAssetLoader bu kullanım alanını destekler. Kayıtlılardan hiçbiri PathHandler örnek belirtilen yol için bir kaynak bulabilir, WebView ise düşüyor içerik yüklemeye geri döner. Uygulama içi içeriği kaynakları veya /assets/ gibi dizin yollarını ayırmanızı sağlar. Uygulama içi kaynaklar için /resources/. Hesabınızdaki hiçbir kaynağı web sitelerini ziyaret etmiş olursunuz.

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);

Şu adreste WebView demosunu izleyin: GitHub web'de barındırılan JSON verilerini getiren bir uygulama içi HTML sayfası örneği.

LoadDataileTemelURL

Uygulamanızın yalnızca bir HTML sayfası yüklemesi ve müdahale etmesi gerekmediğinde alt kaynaklar için, loadDataWithBaseURL() uygulama öğeleri gerektirmez. Aşağıdaki kodda gösterildiği gibi kullanabilirsiniz örnek:

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);

Bağımsız değişken değerlerini dikkatli bir şekilde seçin. Aşağıdakileri göz önünde bulundurun:

  • baseUrl: Bu, HTML içeriğinizin yüklendiği URL'dir. Bu bir HTTP(S) URL'si.
  • data: Bu, dize olarak görüntülemek istediğiniz HTML içeriğidir.
  • mimeType: Bu genellikle text/html olarak ayarlanmalıdır.
  • encoding: baseUrl bir HTTP(S) URL'si olduğunda kullanılmaz, dolayısıyla null olarak ayarlandı.
  • historyUrl: Bu, baseUrl ile aynı değere ayarlanmıştır.

baseUrl olarak bir HTTP(S) URL'si kullanmanızı önemle tavsiye ederiz. Bu şekilde Uygulamanızın aynı kaynak politikasına uygun olduğundan emin olun.

İçeriğiniz için uygun bir baseUrl bulamıyor ve kullanmayı tercih ediyorsanız loadData(), içeriği aşağıdaki gibi kodlamanız gerekir: yüzde kodlama veya Base64 kodlama. Kodlama için Base64 kodlamasını seçmenizi ve Android API'lerini kullanmanızı önemle tavsiye ederiz. aşağıdaki kod örneğinde gösterildiği gibi programlı olarak değiştirebilirsiniz:

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");

Yapılmaması gerekenler

Uygulama içi içerik yüklemenin birkaç yolu daha vardır ancak kesinlikle önerilir aleyhinedir:

  • file:// URL ve data: URL opak kaynak olarak kabul edilir, ve dolayısıyla fetch() veya XMLHttpRequest loadData(), dahili olarak data: URL kullanıyor. Bu nedenle, Bunun yerine WebViewAssetLoader veya loadDataWithBaseURL().
  • Her ne kadar WebSettings.setAllowFileAccessFromFileURLs() ve WebSettings.setAllowUniversalAccessFromFileURLs() çözüm, file:// URL ile ilgili sorunlara çözüm getirebileceği için, uygulamanızı true içine koymanız durumunda dosya tabanlı iyi olur. Bunları tüm API düzeylerinde açık bir şekilde false olarak ayarlamanızı öneririz. kullanın.
  • Aynı nedenlerle file://android_assets/ ve file://android_res/ URL. AssetsHandler ve ResourcesHandler sınıfları birer alternatif olarak kapsıyor.
  • Şunlardan kaçının: MIXED_CONTENT_ALWAYS_ALLOW. Bu ayar genellikle gerekli değildir ve uygulamanızın güvenliğini zayıflatır. Uygulama içi içeriğinizi aynı şema (HTTP veya HTTPS (web sitenizin kaynakları olarak) ve MIXED_CONTENT_COMPATIBILITY_MODE veya MIXED_CONTENT_NEVER_ALLOW, gerektiği şekilde ele alın.