क्लाइंट ऐप्लिकेशन के हिस्से के तौर पर, वेब ऐप्लिकेशन या वेब पेज डिलीवर करने के लिए, WebView
का इस्तेमाल करें. WebView
क्लास, Android की View
क्लास का एक्सटेंशन है. इसकी मदद से, वेब पेजों को अपनी गतिविधि के लेआउट के हिस्से के तौर पर दिखाया जा सकता है. इसमें पूरी तरह से तैयार किए गए वेब ब्राउज़र की सुविधाएं शामिल नहीं होती हैं. जैसे, नेविगेशन कंट्रोल या पता बार. डिफ़ॉल्ट रूप से, WebView
सिर्फ़ एक वेब पेज दिखाता है.
WebView
की मदद से, अपने ऐप्लिकेशन में ऐसी जानकारी दी जा सकती है जिसे आपको अपडेट करना पड़ सकता है. जैसे, असली उपयोगकर्ता का समझौता या उपयोगकर्ता गाइड. अपने Android ऐप्लिकेशन में, Activity
बनाया जा सकता है. इसमें WebView
होता है. इसके बाद, इसका इस्तेमाल करके ऑनलाइन होस्ट किया गया अपना दस्तावेज़ दिखाया जा सकता है.
WebView
से तब भी मदद मिल सकती है, जब आपका ऐप्लिकेशन उपयोगकर्ता को ऐसा डेटा उपलब्ध कराता है जिसे पाने के लिए इंटरनेट कनेक्शन की ज़रूरत होती है. जैसे, ईमेल. ऐसे में, आपको यह लग सकता है कि नेटवर्क अनुरोध करने, फिर डेटा को पार्स करने, और उसे Android लेआउट में रेंडर करने के बजाय, अपने Android ऐप्लिकेशन में WebView
बनाना ज़्यादा आसान है. इससे उपयोगकर्ता का पूरा डेटा दिखाने वाला वेब पेज दिखता है. इसके बजाय, Android डिवाइसों के लिए खास तौर पर डिज़ाइन किया गया वेब पेज बनाया जा सकता है. इसके बाद, अपने Android ऐप्लिकेशन में WebView
लागू किया जा सकता है, जो वेब पेज को लोड करता है.
इस दस्तावेज़ में, WebView
का इस्तेमाल शुरू करने का तरीका बताया गया है. साथ ही, इसमें यह भी बताया गया है कि अपने वेब पेज से JavaScript को Android ऐप्लिकेशन में क्लाइंट-साइड कोड से कैसे बाइंड करें, पेज नेविगेशन को कैसे मैनेज करें, और WebView
का इस्तेमाल करते समय विंडो को कैसे मैनेज करें.
Android के पुराने वर्शन पर WebView का इस्तेमाल करना
अपने ऐप्लिकेशन को जिस डिवाइस पर चलाया जा रहा है उस पर WebView
की नई सुविधाओं का सुरक्षित तरीके से इस्तेमाल करने के लिए, AndroidX Webkit लाइब्रेरी जोड़ें. यह एक स्टैटिक लाइब्रेरी है. इसे अपने ऐप्लिकेशन में जोड़ा जा सकता है, ताकि android.webkit
के उन एपीआई का इस्तेमाल किया जा सके जो प्लैटफ़ॉर्म के पुराने वर्शन के लिए उपलब्ध नहीं हैं.
इसे अपनी build.gradle
फ़ाइल में इस तरह जोड़ें:
Kotlin
dependencies { implementation("androidx.webkit:webkit:1.8.0") }
Groovy
dependencies { implementation ("androidx.webkit:webkit:1.8.0") }
ज़्यादा जानकारी के लिए, GitHub पर WebView
उदाहरण देखें.
अपने ऐप्लिकेशन में WebView जोड़ना
अपने ऐप्लिकेशन में WebView
जोड़ने के लिए, <WebView>
एलिमेंट को अपनी गतिविधि के लेआउट में शामिल करें. इसके अलावा, पूरी Activity
विंडो को onCreate()
में WebView
के तौर पर सेट करें.
गतिविधि के लेआउट में WebView जोड़ना
लेआउट में अपने ऐप्लिकेशन में 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() में WebView जोड़ना
अगर आपको किसी गतिविधि के 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
को होस्ट ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) में बदलाव करने की अनुमति चाहिए होती है. जैसे, विंडो बनाना या बंद करना या उपयोगकर्ता को JavaScript डायलॉग भेजना. इस संदर्भ में डीबग करने के बारे में ज़्यादा जानने के लिए, वेब ऐप्लिकेशन डीबग करना लेख पढ़ें.- ऐसे इवेंट मैनेज करना जिनसे कॉन्टेंट रेंडरिंग पर असर पड़ता है. जैसे, फ़ॉर्म सबमिट करने में गड़बड़ियां या
WebViewClient
का इस्तेमाल करके नेविगेट करना. यूआरएल लोड होने से रोकने के लिए, इस सबक्लास का इस्तेमाल भी किया जा सकता है. WebSettings
में बदलाव करके JavaScript चालू करना.- आपने
WebView
में Android फ़्रेमवर्क ऑब्जेक्ट इंजेक्ट किए हैं. अब JavaScript का इस्तेमाल करके, इन ऑब्जेक्ट को ऐक्सेस किया जा सकता है.
WebView में JavaScript का इस्तेमाल करना
अगर आपको WebView
में कोई ऐसा वेब पेज लोड करना है जिसमें JavaScript का इस्तेमाल किया गया है, तो आपको WebView
के लिए JavaScript चालू करनी होगी. JavaScript चालू करने के बाद, अपने ऐप्लिकेशन कोड और JavaScript कोड के बीच इंटरफ़ेस बनाए जा सकते हैं.
JavaScript सक्षम करें
WebView
में JavaScript डिफ़ॉल्ट रूप से बंद होती है. इसे अपने WebView
से जुड़े WebSettings
के ज़रिए चालू किया जा सकता है. getSettings()
की मदद से WebSettings
को वापस पाएं. इसके बाद, setJavaScriptEnabled()
की मदद से JavaScript चालू करें.
यह उदाहरण देखें:
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 कोड से बाइंड करना
अगर आपको कोई ऐसा वेब ऐप्लिकेशन डेवलप करना है जो खास तौर पर आपके Android ऐप्लिकेशन में WebView
के लिए डिज़ाइन किया गया है, तो अपने JavaScript कोड और क्लाइंट-साइड Android कोड के बीच इंटरफ़ेस बनाए जा सकते हैं. उदाहरण के लिए, JavaScript के alert()
फ़ंक्शन का इस्तेमाल करने के बजाय, आपका JavaScript कोड, Android कोड में मौजूद किसी तरीके को कॉल करके Dialog
दिखा सकता है.
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
मैसेज बना सकता है.
इस क्लास को, WebView
में चलने वाले JavaScript से बाइंड किया जा सकता है. इसके लिए, 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
में चल रहे JavaScript के लिए, 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()
फ़ंक्शन, WebAppInterface.showToast()
तरीके को कॉल करने के लिए Android
इंटरफ़ेस का इस्तेमाल करता है.
पेज नेविगेशन को मैनेज करना
जब कोई उपयोगकर्ता आपके WebView
में मौजूद किसी वेब पेज पर मौजूद लिंक पर टैप करता है, तो Android डिफ़ॉल्ट रूप से, यूआरएल को हैंडल करने वाला ऐप्लिकेशन लॉन्च करता है. आम तौर पर, डिफ़ॉल्ट वेब ब्राउज़र खुलता है और डेस्टिनेशन यूआरएल लोड करता है. हालांकि, अपने WebView
के लिए इस सेटिंग को बदला जा सकता है, ताकि लिंक आपके WebView
में खुलें. इसके बाद, उपयोगकर्ता को अपनी वेबसाइट के पेज के इतिहास में आगे और पीछे जाने की अनुमति दी जा सकती है. यह इतिहास, आपके WebView
के ज़रिए सेव किया जाता है.
उपयोगकर्ता की ओर से टैप किए गए लिंक खोलने के लिए, WebViewClient
के लिए WebViewClient
दें. इसके लिए, setWebViewClient()
का इस्तेमाल करें.WebView
उपयोगकर्ता जिन लिंक पर टैप करता है वे सभी आपके 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
, यूआरएल को हमेशा की तरह लोड कर पाता है. अगर यूआरएल होस्ट मेल नहीं खाता है, तो यूआरएल को मैनेज करने के लिए डिफ़ॉल्ट Activity
लॉन्च करने के लिए, Intent
बनाया जाता है. यह उपयोगकर्ता के डिफ़ॉल्ट वेब ब्राउज़र पर रीडायरेक्ट करता है.
कस्टम यूआरएल मैनेज करना
WebView
, कस्टम यूआरएल स्कीम का इस्तेमाल करने वाले लिंक को हल करने और संसाधनों का अनुरोध करने पर पाबंदियां लागू करता है. उदाहरण के लिए, अगर आपने shouldOverrideUrlLoading()
या shouldInterceptRequest()
जैसे कॉलबैक लागू किए हैं, तो WebView
सिर्फ़ मान्य यूआरएल के लिए उन्हें लागू करता है.
उदाहरण के लिए, WebView
इस तरह के लिंक के लिए, आपकी shouldOverrideUrlLoading()
विधि को कॉल नहीं कर सकता:
<a href="showProfile">Show Profile</a>
पिछले उदाहरण में दिखाए गए यूआरएल जैसे अमान्य यूआरएल को WebView
में अलग-अलग तरीके से हैंडल किया जाता है. इसलिए, हमारा सुझाव है कि आप सही फ़ॉर्मैट वाले यूआरएल का इस्तेमाल करें.
अपनी कंपनी के कंट्रोल वाले डोमेन के लिए, कस्टम स्कीम या एचटीटीपीएस यूआरएल का इस्तेमाल किया जा सकता है.
पिछले उदाहरण की तरह, लिंक में सामान्य स्ट्रिंग का इस्तेमाल करने के बजाय, यहां दिए गए उदाहरण की तरह कस्टम स्कीम का इस्तेमाल किया जा सकता है:
<a href="example-app:showProfile">Show Profile</a>
इसके बाद, इस यूआरएल को shouldOverrideUrlLoading()
तरीके से मैनेज किया जा सकता है. जैसे:
this:
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()
एपीआई का मुख्य मकसद, खास यूआरएल के लिए इंटेंट लॉन्च करना है. इसे लागू करते समय, पक्का करें कि WebView
जिन यूआरएल को मैनेज करता है उनके लिए false
वापस आ जाए. हालांकि, आपके पास सिर्फ़ इंटेंट लॉन्च करने का विकल्प नहीं होता. ऊपर दिए गए कोड के सैंपल में, लॉन्चिंग इंटेंट को अपनी पसंद के मुताबिक किसी भी व्यवहार से बदला जा सकता है.
वेब पेज के इतिहास पर नेविगेट करना
जब 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()
कुछ नहीं करेंगे.
डिवाइस के कॉन्फ़िगरेशन में हुए बदलावों को हैंडल करना
डिवाइस के कॉन्फ़िगरेशन में बदलाव होने पर, रनटाइम के दौरान ऐक्टिविटी की स्थिति में बदलाव होते हैं. जैसे, जब उपयोगकर्ता डिवाइस को घुमाते हैं या इनपुट मेथड एडिटर (आईएमई) को खारिज करते हैं. इन बदलावों की वजह से, WebView
ऑब्जेक्ट की गतिविधि खत्म हो जाती है और एक नई गतिविधि बन जाती है. इससे एक नया WebView
ऑब्जेक्ट भी बनता है, जो खत्म हो चुके ऑब्जेक्ट का यूआरएल लोड करता है. अपनी गतिविधि के डिफ़ॉल्ट व्यवहार में बदलाव करने के लिए, orientation
को हैंडल करने के तरीके में बदलाव किया जा सकता है. रनटाइम के दौरान कॉन्फ़िगरेशन में होने वाले बदलावों को हैंडल करने के बारे में ज़्यादा जानने के लिए, कॉन्फ़िगरेशन में होने वाले बदलावों को हैंडल करना लेख पढ़ें.
विंडो मैनेज करना
डिफ़ॉल्ट रूप से, नई विंडो खोलने के अनुरोधों को अनदेखा किया जाता है. ऐसा तब भी होता है, जब उन्हें JavaScript या लिंक में मौजूद target एट्रिब्यूट से खोला जाता है. आपके पास WebChromeClient
को अपनी पसंद के मुताबिक बनाने का विकल्प होता है. इससे एक साथ कई विंडो खोलने के लिए, अपनी पसंद के मुताबिक व्यवहार सेट किया जा सकता है.
अपने ऐप्लिकेशन को ज़्यादा सुरक्षित रखने के लिए, पॉप-अप और नई विंडो को खुलने से रोकना सबसे अच्छा तरीका है. इस व्यवहार को लागू करने का सबसे सुरक्षित तरीका यह है कि "true"
को setSupportMultipleWindows()
में पास किया जाए. हालांकि, onCreateWindow()
तरीके को ओवरराइड न करें, जो setSupportMultipleWindows()
पर निर्भर करता है. इस लॉजिक से, target="_blank"
का इस्तेमाल करने वाले किसी भी पेज को लोड होने से रोका जाता है.