क्लाइंट ऐप्लिकेशन के हिस्से के तौर पर, वेब ऐप्लिकेशन या वेब पेज डिलीवर करने के लिए, WebView
का इस्तेमाल करें. WebView
क्लास, Android की View
क्लास का एक एक्सटेंशन है. इसकी मदद से, गतिविधि के लेआउट के हिस्से के तौर पर वेब पेज दिखाए जा सकते हैं. इसमें पूरी तरह से डेवलप किए गए वेब ब्राउज़र की सुविधाएं शामिल नहीं होती हैं, जैसे कि नेविगेशन कंट्रोल या पता बार. डिफ़ॉल्ट रूप से, WebView
सिर्फ़ एक वेब पेज दिखाता है.
WebView
से आपको अपने ऐप्लिकेशन में ऐसी जानकारी देने में मदद मिलती है जिसे अपडेट करने की ज़रूरत पड़ सकती है. जैसे, असली उपयोगकर्ता के लिए कानूनी समझौता या इस्तेमाल के लिए गाइड. अपने Android ऐप्लिकेशन में, ऐसा Activity
बनाया जा सकता है जिसमें WebView
हो. इसके बाद, इसका इस्तेमाल करके ऑनलाइन होस्ट किया गया अपना दस्तावेज़ दिखाया जा सकता है.
WebView
तब भी मददगार हो सकता है, जब आपका ऐप्लिकेशन उपयोगकर्ता को ऐसा डेटा उपलब्ध कराता हो जिसे पाने के लिए इंटरनेट कनेक्शन की ज़रूरत होती है. जैसे, ईमेल. इस मामले में, आपको अपने Android ऐप्लिकेशन में WebView
बनाना आसान लग सकता है. यह WebView
, उपयोगकर्ता के पूरे डेटा के साथ एक वेब पेज दिखाता है. इसके लिए, नेटवर्क अनुरोध करने, डेटा को पार्स करने, और उसे Android लेआउट में रेंडर करने की ज़रूरत नहीं होती. इसके बजाय, Android डिवाइसों के लिए एक वेब पेज डिज़ाइन किया जा सकता है. इसके बाद, अपने Android ऐप्लिकेशन में ऐसा WebView
लागू किया जा सकता है जो वेब पेज को लोड करता हो.
इस दस्तावेज़ में WebView
का इस्तेमाल शुरू करने का तरीका, Android ऐप्लिकेशन में JavaScript को वेब पेज से क्लाइंट-साइड कोड पर बाइंड करने का तरीका बताया गया है. साथ ही, पेज नेविगेशन मैनेज करने और WebView
का इस्तेमाल करते समय विंडो मैनेज करने का तरीका भी बताया गया है.
Android के पुराने वर्शन पर वेबव्यू के साथ काम करें
आपका ऐप्लिकेशन जिस डिवाइस पर चल रहा है उस पर 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>
एलिमेंट शामिल करें या onCreate()
में पूरी Activity
विंडो को 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() में वेबव्यू जोड़ना
किसी गतिविधि के 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 चालू करना.- आपने जिन Android फ़्रेमवर्क के ऑब्जेक्ट को
WebView
में इंजेक्ट किया है उन्हें ऐक्सेस करने के लिए, JavaScript का इस्तेमाल करना.
वेबव्यू में 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 कोड, Dialog
दिखाने के लिए, अपने Android कोड में किसी तरीके को कॉल कर सकता है. इसके लिए, वह 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
मैसेज बनाता है.
इस क्लास को addJavascriptInterface()
के साथ, WebView
में चलने वाले JavaScript से बंधा जा सकता है, जैसा कि नीचे दिए गए उदाहरण में दिखाया गया है:
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");
इससे WebView
में चल रहे JavaScript के लिए, Android
नाम का इंटरफ़ेस बन जाता है. इस समय, आपके वेब ऐप्लिकेशन के पास 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()
फ़ंक्शन, WebAppInterface.showToast()
तरीके को कॉल करने के लिए
Android
इंटरफ़ेस का इस्तेमाल करता है.
पेज नेविगेशन को मैनेज करना
जब उपयोगकर्ता आपके WebView
में किसी वेब पेज से किसी लिंक पर टैप करता है, तो डिफ़ॉल्ट रूप से, Android एक ऐसा ऐप्लिकेशन लॉन्च करता है जो यूआरएल को हैंडल करता है. आम तौर पर, डिफ़ॉल्ट वेब ब्राउज़र खुलता है और डेस्टिनेशन यूआरएल (विज्ञापन के लैंडिंग पेज का यूआरएल) को लोड करता है. हालांकि, अपने WebView
के लिए इस सेटिंग को बदला जा सकता है, ताकि लिंक आपके WebView
में खुलें. इसके बाद, उपयोगकर्ता को अपने वेब पेज के इतिहास में, पीछे और आगे जाने की अनुमति दी जा सकती है. यह इतिहास, आपके WebView
से मैनेज किया जाता है.
उपयोगकर्ता के टैप किए गए लिंक खोलने के लिए, setWebViewClient()
का इस्तेमाल करके, अपने WebView
के लिए WebViewClient
दें.
उपयोगकर्ता जिन लिंक पर टैप करता है वे आपके 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()
तरीके में इस तरह से मैनेज किया जा सकता है:
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 से खोला गया हो या किसी लिंक में टारगेट एट्रिब्यूट का इस्तेमाल करके खोला गया हो. एक से ज़्यादा विंडो खोलने के लिए, अपने मनमुताबिक WebChromeClient
को सेट किया जा सकता है.
अपने ऐप्लिकेशन को ज़्यादा सुरक्षित रखने के लिए, पॉप-अप और नई विंडो को खुलने से रोकना सबसे अच्छा होता है. इस व्यवहार को लागू करने का सबसे सुरक्षित तरीका यह है कि "true"
को setSupportMultipleWindows()
में पास किया जाए, लेकिन setSupportMultipleWindows()
पर निर्भर रहने वाले onCreateWindow()
तरीके को बदला न जाए. इस लॉजिक की मदद से, ऐसे किसी भी पेज को लोड होने से रोका जा सकता है जो अपने लिंक में target="_blank"
का इस्तेमाल करता है.