वेब डेवलपर के लिए वेबव्यू ऐप्लिकेशन

पब्लिश करने की तारीख: 28 फ़रवरी, 2014

नया Android प्रोजेक्ट बनाने, वेबव्यू जोड़ने, रिमोट यूआरएल लोड करने, और लोकल एचटीएमएल पेज लोड करने का तरीका जानें.

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

Android Studio इंस्टॉल करना

इस ट्यूटोरियल में, Android Studio का इस्तेमाल किया गया है. यह Android के लिए, डिज़ाइन और बिल्ड करने वाला IDE है.

नया Android प्रोजेक्ट बनाना

Android Studio इंस्टॉल होने के बाद, सेटअप विज़र्ड लॉन्च होता है.

नया प्रोजेक्ट बनाने के लिए:

1. नया प्रोजेक्ट पर क्लिक करें.
2. अपने प्रोजेक्ट के लिए, बिना ऐक्टिविटी वाला टेंप्लेट चुनने के लिए उस पर क्लिक करें. टेंप्लेट, प्रोजेक्ट का स्ट्रक्चर बनाते हैं. साथ ही, Android Studio को आपका प्रोजेक्ट बनाने के लिए ज़रूरी फ़ाइलें भी देते हैं.
3. नया प्रोजेक्ट डायलॉग खोलने के लिए, आगे बढ़ें पर क्लिक करें.
4. अपना प्रोजेक्ट कॉन्फ़िगर करें. अपने ऐप्लिकेशन का नाम, पैकेज का नाम, और टारगेट किए गए SDK डालें. इसके बाद आगे बढ़ें पर क्लिक करें.
5. SDK टूल का कम से कम ज़रूरी वर्शन को एपीआई 24: Android 7.0 (Nougat) पर सेट करें.
6. पूरा करें पर क्लिक करें

Android Studio, नया प्रोजेक्ट खोलता है.

प्रोजेक्ट का स्ट्रक्चर

Android Studio से बनाए गए शुरुआती प्रोजेक्ट में, आपके ऐप्लिकेशन को सेट अप करने के लिए, बोइलरप्लेट कोड होता है. कुछ और इंपोर्ट फ़ोल्डर में ये शामिल हैं:

• src/main/java. Android Java सोर्स कोड.
• src/main/res. ऐप्लिकेशन के इस्तेमाल किए गए संसाधन.
• src/main/res/drawable. ऐप्लिकेशन में इस्तेमाल की गई इमेज के रिसॉर्स.
• src/main/res/xml. एक्सएमएल लेआउट फ़ाइलें, जो यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट के स्ट्रक्चर के बारे में बताती हैं.
• src/main/res/values. डाइमेंशन, स्ट्रिंग, और अन्य वैल्यू, जिन्हें शायद आपको अपने ऐप्लिकेशन में हार्ड-कोड नहीं करना हो.
• src/main/AndroidManifest.xml. मेनिफ़ेस्ट फ़ाइल से यह तय होता है कि ऐप्लिकेशन में क्या शामिल है. जैसे, गतिविधियां, अनुमतियां, और थीम.

वेबव्यू जोड़ना

इसके बाद, मुख्य गतिविधि के लेआउट में WebView जोड़ें.

1. अगर activity_main.xml फ़ाइल पहले से खुली नहीं है, तो src/main/res/xml डायरेक्ट्री में जाकर उसे खोलें. (आपको fragment_main.xml फ़ाइल भी दिख सकती है. इसे अनदेखा किया जा सकता है, क्योंकि इस ट्यूटोरियल के लिए इसे ज़रूरी नहीं है.)

   एक्सएमएल मार्कअप देखने के लिए, activity_main.xml एडिटर के सबसे नीचे मौजूद टेक्स्ट टैब को चुनें.

   यह फ़ाइल आपकी मुख्य गतिविधि के लेआउट के बारे में बताती है. साथ ही, झलक पैनल में गतिविधि की झलक दिखती है. खाली गतिविधि लेआउट में कोई बच्चा शामिल नहीं होता. आपको वेबव्यू जोड़ना होगा.

2. एक्सएमएल पैनल में, FrameLayout एलिमेंट के आखिर से अपने-आप बंद होने वाला स्लैश हटाएं. साथ ही, <WebView> एलिमेंट और नया क्लोज़िंग टैग जोड़ें, जैसा कि यहां दिखाया गया है:

   <FrameLayout xmlns:android="https://schemas.android.com/apk/res/android"
       xmlns:tools="https://schemas.android.com/tools"
       android:id="@+id/container"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       tools:context=".MainActivity">
       tools:ignore="MergeRootFrame">
   
       <WebView
         android:id="@+id/activity_main_webview"
         android:layout_width="match_parent"
         android:layout_height="match_parent" />
   </FrameLayout>
   

3. वेबव्यू का इस्तेमाल करने के लिए, आपको गतिविधि में इसका रेफ़रंस देना होगा. src/main/java/<PackageName> डायरेक्ट्री में, मुख्य गतिविधि MainActivity.java के लिए Java सोर्स फ़ाइल खोलें.

   बोल्ड में दिखाई गई लाइनें जोड़ें.

   public class MainActivity extends Activity {
   
       private WebView mWebView;
   
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
   
           mWebView = (WebView) findViewById(R.id.activity_main_webview);
   

   onCreate तरीके में मौजूद कोड, ऐक्टिविटी को लेआउट से जोड़ने का काम करता है. जोड़ी गई लाइनों से, वेब व्यू का रेफ़रंस देने के लिए, एक नया सदस्य वैरिएबल mWebView बनता है.

   यह कोड हटाएं:

   if (savedInstanceState == null) {
     getSupportFragmentManager().beginTransaction()
       .add(R.id.container, new PlaceholderFragment())
       .commit();
   }
   

   वेबव्यू की पहचान, संसाधन आईडी से की जाती है. यह आईडी, लेआउट फ़ाइल में इस लाइन से तय होता है:

   android:id="@+id/activity_main_webview"
   

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

   तुरंत ठीक करने की सुविधा को स्वीकार करने के लिए, Alt + Enter (Mac पर Option + Enter) दबाएं.

   वेबव्यू को सेट अप करने और उसमें दिलचस्प वेब कॉन्टेंट लोड करने के लिए, आगे बढ़ें.

JavaScript सक्षम करें

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

// Enable Javascript
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

रिमोट यूआरएल लोड करना

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

1. src/res डायरेक्ट्री में AndroidManifest.xml फ़ाइल खोलें. </manifest> टैग के बंद होने से पहले, लाइन को बोल्ड में जोड़ें.

   <?xml version="1.0" encoding="utf-8"?>
   <manifest ...>
   ...
    
     </application>
     <uses-permission android:name="android.permission.INTERNET" />
   </manifest>
   

2. अगला चरण, वेबव्यू पर loadUrl तरीके को कॉल करना है. onCreate तरीके के आखिर में, यह लाइन जोड़ें.

   mWebView.loadUrl("[https://beta.html5test.com/][8]");
   

   अब प्रोजेक्ट चलाने की कोशिश करें. अगर आपके पास कोई डिवाइस नहीं है, तो टूल > Android > AVD मैनेजर पर जाकर, एमुलेटर (AVD या Android वर्चुअल डिवाइस) बनाया जा सकता है.

नेविगेशन को हैंडल करना

लोड किए जा रहे यूआरएल को https://www.css-tricks.com/ में बदलकर, अपने ऐप्लिकेशन को फिर से चलाएं. आपको कुछ अजीब दिखेगा.

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

इवेंट का क्रम यहां दिया गया है:

1. वेबव्यू, रिमोट सर्वर से ओरिजनल यूआरएल को लोड करने की कोशिश करता है. इसके बाद, उसे नए यूआरएल पर रीडायरेक्ट कर दिया जाता है.
2. वेबव्यू यह जांच करता है कि सिस्टम, यूआरएल के लिए व्यू इंटेंट को मैनेज कर सकता है या नहीं. अगर ऐसा है, तो सिस्टम यूआरएल नेविगेशन को मैनेज करता है. अगर ऐसा नहीं है, तो वेबव्यू नेविगेट करता है. उदाहरण के लिए, अगर उपयोगकर्ता के डिवाइस पर कोई ब्राउज़र इंस्टॉल नहीं है.
3. सिस्टम, https:// यूआरएल स्कीम को मैनेज करने के लिए, उपयोगकर्ता का पसंदीदा ऐप्लिकेशन चुनता है. इसका मतलब है कि उपयोगकर्ता का डिफ़ॉल्ट ब्राउज़र. अगर आपने एक से ज़्यादा ब्राउज़र इंस्टॉल किए हैं, तो आपको इस दौरान एक डायलॉग दिख सकता है.

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

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

WebViewClient को डिफ़ॉल्ट रूप से लागू करने पर, कोई भी यूआरएल वेबव्यू में खुलता है:

// Force links and redirects to open in the WebView instead of in a browser
mWebView.setWebViewClient(new WebViewClient());

यह एक अच्छा कदम है. हालांकि, अगर आपको ब्राउज़र में अन्य यूआरएल खोलते समय, सिर्फ़ अपनी साइट के लिंक मैनेज करने हैं, तो क्या होगा?

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

नई कक्षा बनाने के लिए:

1. अपने ऐप्लिकेशन के पैकेज के नाम पर राइट क्लिक करें और नया > Java क्लास चुनें
2. क्लास के नाम के तौर पर MyAppWebViewClient डालें और ठीक है पर क्लिक करें

3. नई MyAppWebViewClient.java फ़ाइल में, यह कोड जोड़ें (बदलाव बोल्ड में दिखाए गए हैं):

   public class MyAppWebViewClient extends WebViewClient {
     @Override
     public boolean shouldOverrideUrlLoading(WebView view, String url) {
       if(Uri.parse(url).getHost().endsWith("css-tricks.com")) {
         return false;
       }
                  
       Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
       view.getContext().startActivity(intent);
       return true;
     }
   }
   

   नया कोड, MyAppWebViewClient को WebViewClient के सबक्लास के तौर पर परिभाषित करता है और shouldOverrideUrlLoading तरीका लागू करता है.

   जब भी वेबव्यू कोई यूआरएल लोड करने वाला होता है, तब shouldOverrideUrlLoading तरीके को कॉल किया जाता है. इस लागू करने की सुविधा, यूआरएल के होस्टनेम के आखिर में स्ट्रिंग "css-tricks.com" की जांच करती है. अगर स्ट्रिंग मौजूद है, तो यह तरीका गलत वैल्यू दिखाता है. इससे प्लैटफ़ॉर्म को पता चलता है कि यूआरएल को बदलने के बजाय, उसे वेबव्यू में लोड करना है.

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

4. अपने नए कस्टम WebViewClient का इस्तेमाल करने के लिए, अपनी MainActivity क्लास में ये लाइनें जोड़ें:

   // Stop local links and redirects from opening in browser instead of WebView
   mWebView.setWebViewClient(new MyAppWebViewClient());
   

   अब उपयोगकर्ता, CSS Tricks के किसी भी लिंक पर क्लिक करके ऐप्लिकेशन में ही रह सकता है. हालांकि, बाहरी साइटों के लिंक ब्राउज़र में खुलते हैं.

Android के 'वापस जाएं' बटन को मैनेज करना

CSS Tricks के लेखों को पढ़ते समय, Android पर मौजूद 'वापस जाएं' बटन पर क्लिक करने से, ऐप्लिकेशन बंद हो जाता है.

वेबव्यू का तरीका canGoBack आपको बताता है कि पेज स्टैक पर कोई ऐसी चीज़ है या नहीं जिसे पॉप किया जा सकता है. 'वापस जाएं' बटन दबाने का पता लगाने और यह तय करने के लिए कि आपको वेबव्यू के इतिहास में वापस जाना है या प्लैटफ़ॉर्म को सही तरीके से काम करने की अनुमति देनी है, अपने MainActivity में onBackPressed() तरीका जोड़ें:

public class MainActivity extends Activity {

 private WebView mWebView;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
     ...
 }

    @Override
    public void onBackPressed() {
      if(mWebView.canGoBack()) {
        mWebView.goBack();
      } else {
        super.onBackPressed();
      }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
       ...
    }
}

फ़ाइल सिस्टम से एचटीएमएल लोड करना

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

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

1. main (src/main/assets/www) में assets/www डायरेक्ट्री बनाएं.

   • वेब फ़ाइलों को /assets की सबडायरेक्ट्री में रखना सबसे सही तरीका है.

2. सभी फ़ाइलों को डायरेक्ट्री में अपलोड करें.

3. सही फ़ाइल लोड करें:

   mWebView.loadUrl("file:///android_asset/www/index.html");
   

4. shouldOverrideUrlLoading को अपडेट करके, ब्राउज़र खोलने का तरीका बदलें, ताकि वह स्थानीय पेजों के बजाय, अन्य पेजों के लिए काम करे:

   public class MyAppWebViewClient extends WebViewClient {
     @Override
     public boolean shouldOverrideUrlLoading(WebView view, String url) {
       if(Uri.parse(url).getHost().length() == 0) {
         return false;
       }
   
       Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
       view.getContext().startActivity(intent);
       return true;
     }
   }
   

अब आपके पास एक बेहतरीन वेबव्यू ऐप्लिकेशन बनाने का विकल्प है.

विज़ुअल को सही तरीके से दिखाने के बारे में सलाह पाने के लिए, WebView में पिक्सल-परफ़ेक्ट यूज़र इंटरफ़ेस देखें.

अगर आपको कोई समस्या आती है, तो Chrome DevTools का इस्तेमाल करें. शुरू करने के लिए, Android पर रिमोट डीबगिंग देखें.