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

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

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

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

इस दस्तावेज़ में, WebView का इस्तेमाल शुरू करने का तरीका, अपने वेब पेज से JavaScript को अपने Android ऐप्लिकेशन के क्लाइंट-साइड कोड से बांधने का तरीका, पेज नेविगेशन को मैनेज करने का तरीका, और 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")
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScript सक्षम करें

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

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

KotlinJava
val myWebView: WebView = findViewById(R.id.webview)
myWebView.settings.javaScriptEnabled = true
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 कोड, Dialog दिखाने के लिए, अपने Android कोड में किसी तरीके को कॉल कर सकता है. इसके लिए, वह JavaScript के alert() फ़ंक्शन का इस्तेमाल नहीं करता.

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

उदाहरण के लिए, अपने Android ऐप्लिकेशन में इस क्लास को शामिल किया जा सकता है:

KotlinJava
/** 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()
    }
}
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 मैसेज तरीका.

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

KotlinJava
val webView: WebView = findViewById(R.id.webview)
webView.addJavascriptInterface(WebAppInterface(this), "Android")
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>

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

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

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

उपयोगकर्ता के टैप किए गए लिंक खोलने के लिए, setWebViewClient() का इस्तेमाल करके, अपने WebView के लिए WebViewClient दें. उपयोगकर्ता जिन लिंक पर टैप करता है वे आपके WebView में लोड हो जाते हैं. अगर आपको क्लिक किए गए लिंक के लोड होने की जगह पर ज़्यादा कंट्रोल चाहिए, तो अपना WebViewClient बनाएं. यह shouldOverrideUrlLoading() के तरीके को बदल देगा. नीचे दिए गए उदाहरण में माना गया है कि MyWebViewClient एक इनर क्लास है कुल Activity.

KotlinJava
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
    }
}
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 का एक इंस्टेंस बनाएं:

KotlinJava
val myWebView: WebView = findViewById(R.id.webview)
myWebView.webViewClient = MyWebViewClient()
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() तरीके में मैनेज कर सकते हैं, जैसे शामिल करें:

KotlinJava
// 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
    }
}
// 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, डिवाइस के 'वापस जाएं' बटन का इस्तेमाल करके, पिछली स्क्रीन पर कैसे जा सकता है:

KotlinJava
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)
}
@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 या इसके बाद के वर्शन का इस्तेमाल करता है, तो पिछले स्निपेट को और भी आसान बनाया जा सकता है:

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

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

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

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

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

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

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