वेबव्यू में वेब ऐप्लिकेशन बनाएं

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

WebView, ऐप्लिकेशन में ऐसी जानकारी देने में आपकी मदद कर सकता है जिसकी आपको ज़रूरत पड़ सकती है अपडेट, जैसे कि असली उपयोगकर्ता के लिए कानूनी समझौता या उपयोगकर्ता गाइड. आपके Android ऐप्लिकेशन में, Activity बनाया जा सकता है, जिसमें WebView लिखें, फिर इसका इस्तेमाल ऑनलाइन होस्ट किए गए अपने दस्तावेज़ को दिखाने के लिए करें.

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

इस दस्तावेज़ में बताया गया है कि WebView का इस्तेमाल कैसे शुरू करें और कैसे बांधें अपने वेब पेज से लेकर Android ऐप्लिकेशन में क्लाइंट-साइड कोड पर स्विच करने के लिए, JavaScript का इस्तेमाल करें. पेज नेविगेशन हैंडल करें और WebView का इस्तेमाल करते समय विंडो मैनेज करने का तरीका जानें.

Android के पुराने वर्शन पर वेबव्यू के साथ काम करें

आपके ऐप्लिकेशन में, WebView की ज़्यादा नई सुविधाओं का सुरक्षित तरीके से इस्तेमाल किया जा सकता है चालू है, तो AndroidX जोड़ें Webkit लाइब्रेरी. यह एक स्टैटिक है लाइब्रेरी जिसे android.webkit एपीआई का इस्तेमाल करने के लिए अपने ऐप्लिकेशन में जोड़ा जा सकता है पुराने प्लेटफ़ॉर्म के वर्शन के लिए उपलब्ध है.

इसे अपनी build.gradle फ़ाइल में इस तरह जोड़ें:

Kotlin

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

ग्रूवी

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

WebView के बारे में और जानें उदाहरण के लिए ज़्यादा जानकारी के लिए, GitHub पर जाएं.

अपने ऐप्लिकेशन में वेबव्यू जोड़ें

अपने ऐप्लिकेशन में WebView जोड़ने के लिए, <WebView> एलिमेंट को अपने ऐप्लिकेशन में शामिल किया जा सकता है गतिविधि का लेआउट चुनें या पूरी Activity विंडो को WebView के तौर पर सेट करें onCreate().

गतिविधि के लेआउट में वेबव्यू जोड़ें

अपने ऐप्लिकेशन के लेआउट में WebView जोड़ने के लिए, अपने गतिविधि के लेआउट की एक्सएमएल फ़ाइल:

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

WebView में किसी वेब पेज को लोड करने के लिए, इसका इस्तेमाल करें loadUrl(), जैसे नीचे दिए गए उदाहरण में दिखाया गया है:

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

onCreate() में वेबव्यू जोड़ें

इसके बजाय, किसी गतिविधि से जुड़े onCreate() तरीके से अपने ऐप्लिकेशन में WebView जोड़ने के लिए, इसका इस्तेमाल करें लॉजिक इस तरह का है:

Kotlin

val myWebView = WebView(activityContext)
setContentView(myWebView)

Java

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

इसके बाद, पेज लोड करें:

Kotlin

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

Java

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

या किसी एचटीएमएल स्ट्रिंग से यूआरएल लोड करें:

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

आपके ऐप्लिकेशन के पास इंटरनेट का ऐक्सेस होना चाहिए. इंटरनेट ऐक्सेस करने के लिए, INTERNET की अनुमति मेनिफ़ेस्ट फ़ाइल दिखेगी, जैसा कि इस उदाहरण में दिखाया गया है:

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

WebView को पसंद के मुताबिक बनाने के लिए, इनमें से कोई भी तरीका अपनाएं:

  • इसका इस्तेमाल करके फ़ुलस्क्रीन की सुविधा चालू की जा रही है WebChromeClient. यह क्लास इसे तब भी कॉल किया जाता है जब किसी WebView को होस्ट ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) को बदलने की अनुमति की ज़रूरत होती है, जैसे कि विंडो बनाना या बंद करना या उपयोगकर्ता. इस कॉन्टेक्स्ट में, डीबग करने के बारे में ज़्यादा जानने के लिए, डीबग वेब ऐप्लिकेशन हैं.
  • उन इवेंट को मैनेज करना जो कॉन्टेंट रेंडरिंग पर असर डालते हैं, जैसे कि फ़ॉर्म में हुई गड़बड़ियां सबमिशन या नेविगेशन की सुविधा WebViewClient. Google आपके यूआरएल पैरामीटर को कैसे इस्तेमाल करेगा, यह तय करने के लिए यूआरएल लोडिंग को रोकने के लिए इस सब-क्लास का इस्तेमाल करें.
  • बदलाव करके JavaScript चालू करना WebSettings.
  • आपने Android फ़्रेमवर्क के जिन ऑब्जेक्ट को इंजेक्ट किया है उन्हें ऐक्सेस करने के लिए JavaScript का इस्तेमाल करना WebView में बदल दिया जाएगा.

वेबव्यू में JavaScript का इस्तेमाल करें

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

JavaScript सक्षम करें

WebView में JavaScript डिफ़ॉल्ट रूप से बंद रहती है. इसे चालू करने के लिए यहां जाएं: WebSettings को आपके WebView से अटैच किया गया. WebSettings को इससे वापस पाएं getSettings(), फिर इसे चालू करें JavaScript के साथ setJavaScriptEnabled().

यह उदाहरण देखें:

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, ऐसी कई अन्य सेटिंग का ऐक्सेस देता है जो आपको मिल सकती हैं उपयोगी. उदाहरण के लिए, अगर आप कोई ऐसा वेब ऐप्लिकेशन डेवलप कर रहे हैं जिसे विशेष रूप से अपने Android ऐप्लिकेशन में WebView के लिए, तब आप एक कस्टम इसके साथ उपयोगकर्ता एजेंट स्ट्रिंग setUserAgentString(), इसके बाद, अपने वेब पेज में कस्टम उपयोगकर्ता एजेंट से क्वेरी करें, ताकि यह पुष्टि हो सके कि क्लाइंट आपके वेब पेज का अनुरोध करना ही आपका Android ऐप्लिकेशन है.

JavaScript कोड को Android कोड से बाइंड करें

खास तौर पर WebView के लिए डिज़ाइन किया गया वेब ऐप्लिकेशन बनाते समय Android ऐप्लिकेशन में, आपको अपने JavaScript कोड और का इस्तेमाल करता है. उदाहरण के लिए, आपका JavaScript कोड अपने Android कोड पर Dialog, के बजाय, JavaScript के alert() फ़ंक्शन का इस्तेमाल करें.

अपने JavaScript और Android कोड के बीच नया इंटरफ़ेस बाइंड करने के लिए, addJavascriptInterface() इसे आपके JavaScript और इंटरफ़ेस के नाम से बाइंड करने के लिए क्लास इंस्टेंस पास करना जिसे आपका JavaScript क्लास ऐक्सेस करने के लिए कॉल कर सके.

उदाहरण के लिए, अपने 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();
    }
}

इस उदाहरण में, WebAppInterface क्लास वेब पेज को showToast() का इस्तेमाल करके Toast मैसेज तरीका.

इस क्लास को JavaScript से बाइंड किया जा सकता है. यह JavaScript आपके WebView में, addJavascriptInterface(), जैसा कि इस उदाहरण में दिखाया गया है:

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

यहAndroid WebView. इस समय, आपके वेब ऐप्लिकेशन के पास WebAppInterface क्लास. उदाहरण के लिए, यहां कुछ एचटीएमएल और JavaScript दी गई है जब उपयोगकर्ता किसी बटन पर टैप करता है, तो नए इंटरफ़ेस का इस्तेमाल करके टोस्ट मैसेज बनाता है:

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

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

JavaScript से Android इंटरफ़ेस शुरू करने की ज़रूरत नहीं है. कॉन्टेंट बनाने WebView, इसे आपके वेब पेज पर अपने-आप उपलब्ध कराता है. इसलिए, जब कोई उपयोगकर्ता बटन पर टैप करता है, तो showAndroidToast() फ़ंक्शन Android इंटरफ़ेस का इस्तेमाल करता है WebAppInterface.showToast() तरीके को कॉल करने के लिए.

पेज नेविगेशन मैनेज करना

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

उपयोगकर्ता ने जिन लिंक पर टैप किया है उन्हें खोलने के लिए, अपने WebView के लिए WebViewClient दें इसका उपयोग कर रहा है setWebViewClient(). उपयोगकर्ता जिन लिंक पर टैप करता है वे सभी लिंक आपके WebView में लोड होते हैं. अगर आपको अपने कॉन्टेंट पर ज़्यादा कंट्रोल चाहिए जहां क्लिक किया गया लिंक लोड होता है, तो अपना खुद का WebViewClient बनाएं, जो shouldOverrideUrlLoading() तरीका. नीचे दिए गए उदाहरण में माना गया है कि MyWebViewClient एक इनर क्लास है कुल 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;
  }
}

इसके बाद, WebView के लिए इस नए WebViewClient का एक इंस्टेंस बनाएं:

Kotlin

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

Java

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

अब जब उपयोगकर्ता किसी लिंक पर टैप करता है, तो सिस्टम shouldOverrideUrlLoading() तरीका, जिससे यह पता चलता है कि यूआरएल होस्ट मेल खाता है या नहीं एक खास डोमेन की तरह काम करता है, जैसा कि ऊपर दिए गए उदाहरण में बताया गया है. अगर यह मेल खाता है, तो यह तरीका 'गलत' दिखाता है और यूआरएल लोड होने की प्रोसेस को नहीं बदलता. इससे WebView हमेशा की तरह यूआरएल लोड करता है. अगर यूआरएल होस्ट मेल नहीं खाता है, तो Intent को डिफ़ॉल्ट ब्राउज़र के तौर पर लॉन्च करने के लिए बनाया गया है यूआरएल को हैंडल करने के लिए Activity, जो उपयोगकर्ता के डिफ़ॉल्ट वेब ब्राउज़र पर काम करता है.

कस्टम यूआरएल मैनेज करना

संसाधनों का अनुरोध करने और लिंक का समाधान करने पर, WebView पाबंदियां लागू करता है जो कस्टम यूआरएल स्कीम का इस्तेमाल करते हैं. उदाहरण के लिए, अगर आप shouldOverrideUrlLoading() या shouldInterceptRequest(), फिर WebView उन्हें सिर्फ़ मान्य यूआरएल के लिए शुरू करता है.

उदाहरण के लिए, हो सकता है कि WebView आपके shouldOverrideUrlLoading() तरीके को कॉल न करे के लिए लिंक:

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

ऊपर दिए गए उदाहरण की तरह, अमान्य यूआरएल को हैंडल किया जाता है WebView में अलग-अलग यूआरएल हैं. इसलिए, हमारा सुझाव है कि आप इसके बजाय, बेहतर तरीके से बने यूआरएल का इस्तेमाल करें. आपके पास अपने संगठन के डोमेन के लिए, कस्टम स्कीम या एचटीटीपीएस यूआरएल का इस्तेमाल करने का विकल्प होता है नियंत्रण.

पिछले उदाहरण की तरह, किसी लिंक में सामान्य स्ट्रिंग का इस्तेमाल करने के बजाय, नीचे दी गई कस्टम स्कीम का इस्तेमाल करें:

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

इसके बाद, आप इस यूआरएल को अपने shouldOverrideUrlLoading() तरीके में मैनेज कर सकते हैं, जैसे शामिल करें:

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

shouldOverrideUrlLoading() एपीआई का इस्तेमाल, मुख्य तौर पर इंटेंट लॉन्च करने के लिए किया जाता है खास यूआरएल के लिए. इसे लागू करते समय, यूआरएल के लिए false दिखाना न भूलें WebView के हैंडल. हालांकि, आप लॉन्च करने तक सीमित नहीं हैं. आप लॉन्च होने वाले इंटेंट को पिछले कोड में दिए गए किसी भी कस्टम व्यवहार से बदलें सैंपल.

जब आपका WebView, यूआरएल लोड होने की सेटिंग को ओवरराइड करता है, तो यह अपने-आप देखे गए वेब पेजों का इतिहास. नेविगेट करने के लिए, goBack() और के साथ इतिहास goForward().

उदाहरण के लिए, नीचे दी गई जानकारी से पता चलता है कि आपका Activity, 'वापस जाएं' सुविधा का इस्तेमाल कैसे कर सकता है पीछे जाने के लिए बटन:

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

अगर ऐप्लिकेशन AndroidX AppCompat 1.6.0 या इसके बाद के वर्शन का इस्तेमाल करता है, तो इसके लिए पिछले वर्शन को आसान बनाया जा सकता है स्निपेट और भी ज़्यादा:

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

canGoBack() तरीका अगर उपयोगकर्ता के विज़िट करने के लिए वेब पेज का इतिहास मौजूद हो, तो 'सही' दिखाता है. इसी तरह, आप canGoForward() का इस्तेमाल इन कामों के लिए कर सकता है यह जांचें कि क्या कोई फ़ॉरवर्ड इतिहास है. अगर आप यह जांच नहीं करते हैं, तो जब उपयोगकर्ता इतिहास के आखिर तक पहुंचता है, तो goBack() और goForward() कुछ नहीं.

डिवाइस के कॉन्फ़िगरेशन में किए गए बदलावों को मैनेज करना

रनटाइम के दौरान, डिवाइस के कॉन्फ़िगरेशन के होने पर गतिविधि की स्थिति बदल जाती है बदलाव. जैसे, जब उपयोगकर्ता डिवाइस को घुमाते हैं या इनपुट के तरीके के एडिटर को खारिज करते हैं (IME). इन बदलावों की वजह से, WebView ऑब्जेक्ट की गतिविधि खत्म हो जाती है और नई गतिविधि बनानी होगी, जिससे एक नया WebView ऑब्जेक्ट भी बनता है जो लोड हो जाता है नष्ट किए गए ऑब्जेक्ट का यूआरएल. अपनी गतिविधि के डिफ़ॉल्ट तरीके में बदलाव करने के लिए, ये काम किए जा सकते हैं बदलें कि यह आपके मेनिफ़ेस्ट में orientation बदलावों को कैसे मैनेज करेगा. ज़्यादा जानकारी के लिए रनटाइम के दौरान कॉन्फ़िगरेशन में होने वाले बदलावों को मैनेज करने के बारे में जानने के लिए, कॉन्फ़िगरेशन मैनेज करें बदलाव के बारे में ज़्यादा जानें.

विंडो मैनेज करें

डिफ़ॉल्ट रूप से, नई विंडो खोलने के अनुरोधों को अनदेखा कर दिया जाता है. यह बात तब लागू होती है, जब जिन्हें JavaScript या लिंक में मौजूद टारगेट एट्रिब्यूट के ज़रिए खोला जाता है. अपनी पसंद के मुताबिक एक से ज़्यादा खोलने के लिए अपने हिसाब से तरीका बताने के लिए, अपना WebChromeClient विंडो.

अपने ऐप्लिकेशन को ज़्यादा सुरक्षित रखने के लिए, पॉप-अप और नई विंडो को खोलें. इस व्यवहार को लागू करने का सबसे सुरक्षित तरीका यह है कि "true" को setSupportMultipleWindows() लेकिन उसे ओवरराइड नहीं करता onCreateWindow() तरीका, जिस पर setSupportMultipleWindows() निर्भर करता है. यह लॉजिक किसी भी ऐसा पेज जो लोड होने में target="_blank" का इस्तेमाल करता है.