इन-ऐप्लिकेशन कॉन्टेंट लोड करें

आपके पास वेब पर आधारित कॉन्टेंट उपलब्ध कराने का विकल्प होता है. जैसे, एचटीएमएल, JavaScript, और सीएसएस—आपके ऐप्लिकेशन के लिए इसका इस्तेमाल करने के लिए, जिसे आप स्टैटिक रूप से ऐप्लिकेशन में कंपाइल करते हैं को ढूंढने के लिए डिज़ाइन किया गया है.

इन-ऐप्लिकेशन कॉन्टेंट को न तो इंटरनेट की ज़रूरत होती है और न ही इसके लिए उपयोगकर्ता के बैंडविथ का इस्तेमाल करना पड़ता है. अगर आपने कॉन्टेंट को खास तौर पर सिर्फ़ WebView के लिए बनाया गया है—यानी कि यह किसी खास ऐप्लिकेशन से बातचीत करने पर निर्भर करता है—फिर उपयोगकर्ता अनजाने में इसे वेब ब्राउज़र में लोड करें.

हालांकि, ऐप्लिकेशन में मौजूद कॉन्टेंट की कुछ कमियां भी हैं. वेब पर आधारित कॉन्टेंट अपडेट करना ऐप्लिकेशन का नया अपडेट भेजना ज़रूरी है. ऐसा भी हो सकता है कि ऐप्लिकेशन का अपडेट मेल न खाए आपके डिवाइस में मौजूद कॉन्टेंट और ऐप्लिकेशन में मौजूद कॉन्टेंट के बीच का कॉन्टेंट शामिल होने पर, उपयोगकर्ताओं के पास ऐप्लिकेशन के पुराने वर्शन हैं.

WebViewAssetLoader

WebViewAssetLoader साथ ही, इन-ऐप्लिकेशन कॉन्टेंट को बेहतर तरीके से लोड करने के लिए, WebView ऑब्जेक्ट. यह श्रेणी इनका समर्थन करती है फ़ॉलो किया जा रहा है:

WebViewAssetLoader को अपनी मुख्य गतिविधि की फ़ाइल में शामिल करें. नीचे दी गई चीज़ें ऐसेट फ़ोल्डर से सामान्य वेब कॉन्टेंट लोड करने का उदाहरण:

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

आपके ऐप्लिकेशन को अपनी ज़रूरतों के हिसाब से, WebViewAssetLoader इंस्टेंस कॉन्फ़िगर करना होगा. कॉन्टेंट बनाने अगले सेक्शन में एक उदाहरण दिया गया है.

इन-ऐप्लिकेशन ऐसेट और संसाधन बनाना

WebViewAssetLoader इन पर निर्भर है PathHandler दिए गए संसाधन पाथ से जुड़े संसाधनों को लोड करने के इंस्टेंस. हालांकि, आपको इस इंटरफ़ेस को लागू करके, आपके ऐप्लिकेशन की ज़रूरत के हिसाब से संसाधन वापस ला सकता है. वेबकिट लाइब्रेरी के बंडल AssetsPathHandler और ResourcesPathHandler का इस्तेमाल करें.

शुरू करने के लिए, अपने ऐप्लिकेशन के लिए एसेट और संसाधन बनाएं. आम तौर पर, ये बातें लागू होती हैं:

  • एचटीएमएल, JavaScript, और सीएसएस जैसी टेक्स्ट फ़ाइलें ऐसेट में शामिल होती हैं.
  • इमेज और अन्य बाइनरी फ़ाइलें, संसाधनों में शामिल हैं.

किसी प्रोजेक्ट में टेक्स्ट पर आधारित वेब फ़ाइलें जोड़ने के लिए, यह तरीका अपनाएं:

  1. Android Studio में, ऐप्लिकेशन > सोर्स > मुख्य फ़ोल्डर और फिर नया > डायरेक्ट्री.
    Android Studio में 'डायरेक्ट्री' मेन्यू दिखाने वाली इमेज
    पहली इमेज. अपने ऐसेट फ़ोल्डर के लिए प्रोजेक्ट.
  2. फ़ोल्डर को "ऐसेट" नाम दें.
    ऐसेट फ़ोल्डर दिखाने वाली इमेज
    दूसरी इमेज. ऐसेट फ़ोल्डर को नाम दें.
  3. ऐसेट फ़ोल्डर पर राइट क्लिक करें. इसके बाद, नया > फ़ाइल. index.html डालें और Return दबाएं या Enter बटन.
  4. खाली फ़ाइल बनाने के लिए पिछला चरण दोहराएं stylesheet.css.
  5. अगले दो कोड में, कॉन्टेंट के साथ बनाई गई खाली फ़ाइलों को भरें सैंपल.
```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/>styet.quot;<
>  /head
  body
    pThis file is loaded <fr>om in<-><app content./p
    pimg src="/res/drawable/android_robot.png" a>=&qn robot" <width="100"/p
  /bo>dy
/html
```

```css
!-- stylesheet.css content --

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

अपने प्रोजेक्ट में इमेज पर आधारित वेब फ़ाइल जोड़ने के लिए, ये काम करें:

  1. Google News ऐप्लिकेशन Android_symbol_green_RGB.png फ़ाइल को कंप्यूटर में सेव किया जा सकता है.

  2. फ़ाइल का नाम बदलकर android_robot.png करें.

  3. फ़ाइल को मैन्युअल तरीके से अपने प्रोजेक्ट की main/res/drawable डायरेक्ट्री में ले जाएं आपकी हार्ड ड्राइव.

चौथी इमेज में, आपकी जोड़ी गई इमेज और पिछले कोड सैंपल का टेक्स्ट दिखाया गया है किसी ऐप्लिकेशन में रेंडर होने में कितना समय लगता है.

ऐप्लिकेशन रेंडर किया गया आउटपुट दिखाने वाली इमेज
चौथी इमेज. इन-ऐप्लिकेशन एचटीएमएल फ़ाइल और इमेज फ़ाइल किसी ऐप्लिकेशन में रेंडर होने में कितना समय लगता है.

ऐप्लिकेशन डाउनलोड करने के लिए, ये काम करें:

  1. हैंडलर को रजिस्टर करें औरAssetLoader 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));

  2. कॉन्टेंट लोड करने के लिए, onCreate() तरीके में यह कोड जोड़ें:

    Kotlin

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

    Java

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

अपनी वेबसाइट के संसाधनों और इन-ऐप्लिकेशन कॉन्टेंट को मिलाएं

आपके ऐप्लिकेशन को जैसे, आपकी वेबसाइट के सीएसएस के ज़रिए स्टाइल किया गया कोई इन-ऐप्लिकेशन एचटीएमएल पेज. WebViewAssetLoader पर इस्तेमाल के इस उदाहरण का इस्तेमाल किया जा सकता है. अगर कोई PathHandler इंस्टेंस दिए गए पाथ के लिए कोई संसाधन ढूंढ सकते हैं, WebView ड्रॉप फिर से लोड करना शुरू करें. अगर आपने इन-ऐप्लिकेशन कॉन्टेंट को आपकी वेबसाइट के रिसॉर्स के साथ-साथ, डायरेक्ट्री पाथ रिज़र्व करें, जैसे कि /assets/ या ऐप्लिकेशन में मौजूद संसाधनों के लिए /resources/. अपने वेबसाइट लोड होती है.

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

WebView का डेमो देखें GitHub वेब पर होस्ट किया गया JSON डेटा फ़ेच करने वाले इन-ऐप्लिकेशन एचटीएमएल पेज के उदाहरण के लिए.

loadDataWithBaseURL

जब आपके ऐप्लिकेशन को सिर्फ़ एचटीएमएल पेज को लोड करने की ज़रूरत हो और इंटरसेप्ट करने की ज़रूरत न हो सबरिसॉर्स का इस्तेमाल कर रहे हैं, तो loadDataWithBaseURL() इसके लिए ऐप्लिकेशन ऐसेट की ज़रूरत नहीं होती. इसका इस्तेमाल इस तरह किया जा सकता है कि इसका इस्तेमाल किस तरह किया जाए नमूना:

Kotlin

val html = &<;htm>bodypHello /html"
val baseUrl = "https://example.com/"

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

Java

String html = &<;htm>bodypHello /html";
String baseUrl = "https://example.com/";

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

आर्ग्युमेंट की वैल्यू सावधानी से चुनें. इसके लिए, इन्हें आज़माएं:

  • baseUrl: यही वह यूआरएल है जिस पर आपका एचटीएमएल कॉन्टेंट लोड किया जाता है. इसे एचटीटीपी या एचटीटीपीएस यूआरएल.
  • data: यह वह एचटीएमएल कॉन्टेंट है जिसे आपको स्ट्रिंग के तौर पर दिखाना है.
  • mimeType: आम तौर पर, इसे text/html पर सेट किया जाना चाहिए.
  • encoding: baseUrl एक एचटीटीपी या एचटीटीपीएस यूआरएल है, इसलिए इस यूआरएल का इस्तेमाल नहीं किया जाता. इसलिए, इसे null पर सेट किया गया.
  • historyUrl: यह baseUrl की ही वैल्यू पर सेट है.

हम baseUrl के तौर पर एचटीटीपी(एस) यूआरएल का इस्तेमाल करने का सुझाव देते हैं, क्योंकि इससे मदद मिलती है यह पक्का करें कि आपका ऐप्लिकेशन एक ही ऑरिजिन से जुड़ी नीति का पालन करता हो.

अगर आपको अपने कॉन्टेंट के लिए सही baseUrl नहीं मिल रहा है और आपको इसका इस्तेमाल करना है loadData(), आपको कॉन्टेंट को कोड में बदलना होगा प्रतिशत में एन्कोड करने की सुविधा या बेस64 कोड में बदलने का तरीका. हमारा सुझाव है कि कोड में बदलने के लिए, Base64 एन्कोडिंग को चुनें और Android API का इस्तेमाल करें को प्रोग्राम के रूप में, जैसा कि नीचे दिए गए कोड सैंपल में दिखाया गया है:

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

ऐसा करने से बचें

ऐप्लिकेशन में कॉन्टेंट लोड करने के और भी कई तरीके हैं, लेकिन हमारा सुझाव है कि आप टीम में हुए बदलाव के ख़िलाफ़:

  • file:// यूआरएल और data: यूआरएल को ओपेक ऑरिजिन माना जाता है, इसका मतलब है कि वह अपने संस्थान के लिए, दमदार वेब एपीआई का फ़ायदा नहीं ले सकता, जैसे कि fetch() या XMLHttpRequest. loadData(), अंदरूनी तौर पर data: यूआरएल का इस्तेमाल करता है. इसलिए, हम आपको इसके बजाय, WebViewAssetLoader या loadDataWithBaseURL() का इस्तेमाल करें.
  • हालांकि WebSettings.setAllowFileAccessFromFileURLs() और WebSettings.setAllowUniversalAccessFromFileURLs() file:// यूआरएल की समस्याओं को हल कर सकता है. हमारा सुझाव है कि आप सेटिंग बंद करने पर इन कार्रवाइयों को true कर सकते हैं, क्योंकि ऐसा करने से आपके ऐप्लिकेशन में फ़ाइल-आधारित एक्सटेंशन का जोखिम हो सकता है मजबूर किया जा रहा है. हमारा सुझाव है कि सभी एपीआई लेवल के लिए, इन्हें false पर सेट करें सुरक्षा के लिए सबसे मज़बूत विकल्प चुना जा सकता है.
  • इन्हीं वजहों से हमारा सुझाव है कि आप file://android_assets/ और file://android_res/ यूआरएल. AssetsHandler और ResourcesHandler क्लास की जगह क्लास में बदलाव किया जा सकता है.
  • इस्तेमाल करने से बचें MIXED_CONTENT_ALWAYS_ALLOW. आम तौर पर, यह सेटिंग ज़रूरी नहीं होती है और इससे आपके ऐप्लिकेशन की सुरक्षा कम हो जाती है. हमारा सुझाव है कि आप अपने ऐप्लिकेशन के कॉन्टेंट को एक ही स्कीम पर लोड करें—एचटीटीपी या एचटीटीपीएस—जैसे कि आपकी वेबसाइट के संसाधन और MIXED_CONTENT_COMPATIBILITY_MODE या MIXED_CONTENT_NEVER_ALLOW, शर्तों को पूरा करते हैं.