वेब ऐप्लिकेशन के लिए सबसे सही तरीके

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

  1. मोबाइल डिवाइसों को अपनी वेबसाइट के मोबाइल वर्शन पर रीडायरेक्ट करें. सर्वर साइड रीडायरेक्ट का इस्तेमाल करके, ऐसा कई तरीकों से किया जा सकता है. आम तौर पर, वेब ब्राउज़र से मिली User Agent स्ट्रिंग को "स्निफ़" किया जाता है. यह तय करने के लिए कि आपकी साइट का मोबाइल वर्शन दिखाना है या नहीं, उपयोगकर्ता एजेंट में "मोबाइल" स्ट्रिंग देखें.
  2. मोबाइल डिवाइसों के लिए, HTML5 का इस्तेमाल करें. एचटीएमएल5, मोबाइल वेबसाइटों के लिए सबसे ज़्यादा इस्तेमाल की जाने वाली मार्कअप लैंग्वेज है. इस स्टैंडर्ड के तहत, मोबाइल वर्शन को पहले डेवलप करने को बढ़ावा दिया जाता है. इससे यह पक्का करने में मदद मिलती है कि वेबसाइटें अलग-अलग डिवाइसों पर काम करें. पिछली वेब भाषाओं के मुकाबले, HTML5 में <DOCTYPE> और charset डिक्लेरेशन का इस्तेमाल करना आसान है: 
    <!DOCTYPE html>
...
<meta charset="UTF-8">
  3. अपने वेब पेज का साइज़ सही तरीके से बदलने के लिए, व्यूपोर्ट मेटाडेटा का इस्तेमाल करें. अपने दस्तावेज़ <head> में, ऐसा मेटाडेटा दें जिससे यह पता चले कि आपको ब्राउज़र के व्यूपोर्ट में अपना वेब पेज कैसे रेंडर करना है. उदाहरण के लिए, व्यूपोर्ट मेटाडेटा में ब्राउज़र के व्यूपोर्ट की ऊंचाई और चौड़ाई, पेज का शुरुआती स्केल, और टारगेट स्क्रीन डेंसिटी के बारे में बताया जा सकता है.

    यहां दिए गए उदाहरण में, व्यूपोर्ट मेटाडेटा सेट करने का तरीका बताया गया है:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    Android डिवाइसों के लिए व्यूपोर्ट मेटाडेटा इस्तेमाल करने के बारे में ज़्यादा जानने के लिए, वेब ऐप्लिकेशन में अलग-अलग स्क्रीन के साथ काम करना लेख पढ़ें.

  4. वर्टिकल लीनियर लेआउट का इस्तेमाल करें. आपके पेज पर नेविगेट करते समय, उपयोगकर्ता को बाएं और दाएं स्क्रोल करने की ज़रूरत न पड़े. इससे उपयोगकर्ता के लिए ऊपर और नीचे स्क्रोल करना आसान हो जाता है. साथ ही, आपका पेज भी आसान दिखता है.
  5. लेआउट की ऊंचाई और चौड़ाई को match_parent पर सेट करें. अपने WebView ऑब्जेक्ट की ऊंचाई और चौड़ाई को match_parent पर सेट करने से, यह पक्का होता है कि आपके ऐप्लिकेशन के व्यू का साइज़ सही हो. हम ऊंचाई को wrap_content पर सेट करने का सुझाव नहीं देते, क्योंकि इससे साइज़ गलत हो जाता है. इसी तरह, लेआउट की चौड़ाई को wrap_content पर सेट करने की सुविधा उपलब्ध नहीं है. इससे आपका WebView, अपने पैरंट की चौड़ाई का इस्तेमाल करता है. इस वजह से, यह पक्का करना भी ज़रूरी है कि आपके WebView ऑब्जेक्ट के पैरंट लेआउट ऑब्जेक्ट में से किसी की भी ऊंचाई और चौड़ाई, wrap_content पर सेट न हो.
  6. एक से ज़्यादा फ़ाइलों के अनुरोध न करें. आम तौर पर, मोबाइल डिवाइसों में डेस्कटॉप कंप्यूटर की तुलना में इंटरनेट की स्पीड कम होती है. इसलिए, अपने पेज को जल्द से जल्द लोड होने लायक बनाएं. इसे तेज़ करने का एक तरीका यह है कि <head> में स्टाइलशीट और स्क्रिप्ट फ़ाइलों जैसी अतिरिक्त फ़ाइलों को लोड न करें. इसके अलावा, अपने ऐप्लिकेशन के लिए ऑप्टिमाइज़ेशन से जुड़े सुझाव पाने के लिए, Google के PageSpeed Insights की मदद से मोबाइल विश्लेषण करें.
  7. अगर आपको फ़ेविकॉन अपने-आप डाउनलोड होने की सुविधा की ज़रूरत नहीं है, तो इसे बंद करें. डिफ़ॉल्ट रूप से, WebView किसी साइट पर जाने पर, फ़ेविकॉन को अपने-आप डाउनलोड कर लेता है. WebView, डाउनलोड किए गए हर फ़ेविकॉन की दो कॉपी रखता है. एक कॉपी Java में और दूसरी नेटिव मेमोरी में. इसलिए, फ़ेविकॉन डाउनलोड करने की सुविधा बंद करने से मेमोरी बचती है. हर WebView इंस्टेंस के लिए करीब 8 केबी मेमोरी बचती है. साथ ही, बैंडविथ का इस्तेमाल भी कम होता है. अगर आपका ऐप्लिकेशन फ़ेविकॉन का इस्तेमाल नहीं करता या उन्हें नहीं दिखाता है, तो अपने-आप डाउनलोड होने की सुविधा बंद करने के लिए, Jetpack Webkit लाइब्रेरी से WebSettingsCompat.setDownloadFaviconsEnabled() का इस्तेमाल करें:

    Kotlin

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.settings, false)
}

    Java

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.getSettings(), false);
}
  8. सेव किए गए स्टेटस को मैनेज करें और लेन-देन की सीमाओं से बचें. अगर आपको लाइफ़साइकल इवेंट के दौरान WebView की स्थिति को सेव करना है, तो saveState(Bundle) का इस्तेमाल करें. साथ ही, पेलोड के साइज़ की सीमाएं लागू करने के लिए WebViewCompat.saveState() का इस्तेमाल करें, ताकि Android की 1 एमबी savedInstanceState की सीमा से ज़्यादा न हो. ज़्यादा जानकारी के लिए, WebView की स्थिति को असरदार तरीके से मैनेज करना लेख पढ़ें.
  9. अनुमान के हिसाब से यूआरएल लोड होने की सुविधा एपीआई की मदद से, नेटवर्क कनेक्शन और पेज लोड होने की स्पीड को ऑप्टिमाइज़ करें. नेविगेशन में लगने वाले समय को कम करने के लिए, Jetpack Webkit API का इस्तेमाल करके नेटवर्क कनेक्शन और कॉन्टेंट को पहले से तैयार करें. QUIC पर एचटीटीपी/3 सपोर्ट को पहले से भरने के लिए, Profile.addQuicHints को कॉल करें, ताकि WebView पहले कनेक्शन पर तुरंत QUIC का इस्तेमाल कर सके. साथ ही, नेटवर्क सॉकेट को पहले से चालू करने के लिए, Profile.preconnect का इस्तेमाल करें. जब डेस्टिनेशन यूआरएल के बारे में पता हो या उनके बारे में अनुमान लगाया जा सकता हो, तब बैकग्राउंड में पेजों को फ़ेच या रेंडर करने के लिए, Profile.prefetchUrlAsync या WebViewCompat.prerenderUrlAsync का इस्तेमाल करें. ज़्यादा जानकारी के लिए, WebView में अनुमान के हिसाब से यूआरएल लोड होने की प्रोसेस लेख पढ़ें.
  10. अगर आपको फ़ेविकॉन अपने-आप डाउनलोड होने की सुविधा की ज़रूरत नहीं है, तो इसे बंद करें. डिफ़ॉल्ट रूप से, WebView किसी साइट पर जाने पर, फ़ेविकॉन को अपने-आप डाउनलोड कर लेता है. WebView, डाउनलोड किए गए हर फ़ेविकॉन की दो कॉपी रखता है. एक कॉपी Java में और दूसरी नेटिव मेमोरी में. इसलिए, फ़ेविकॉन डाउनलोड करने की सुविधा बंद करने से मेमोरी बचती है. हर WebView इंस्टेंस के लिए करीब 8 केबी मेमोरी बचती है. साथ ही, बैंडविथ का इस्तेमाल भी कम होता है. अगर आपका ऐप्लिकेशन फ़ेविकॉन का इस्तेमाल नहीं करता या उन्हें नहीं दिखाता है, तो अपने-आप डाउनलोड होने की सुविधा बंद करने के लिए, Jetpack Webkit लाइब्रेरी से WebSettingsCompat.setDownloadFaviconsEnabled() का इस्तेमाल करें:

    Kotlin

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.settings, false)
}

    Java

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.getSettings(), false);
}
  11. सेव किए गए स्टेटस को मैनेज करें और लेन-देन की सीमाओं से बचें. अगर आपको लाइफ़साइकल इवेंट के दौरान WebView की स्थिति को सेव करना है, तो saveState(Bundle) का इस्तेमाल करें. साथ ही, पेलोड के साइज़ की सीमाएं लागू करने के लिए WebViewCompat.saveState() का इस्तेमाल करें, ताकि Android की 1 एमबी savedInstanceState की सीमा से ज़्यादा न हो. ज़्यादा जानकारी के लिए, WebView की स्थिति को असरदार तरीके से मैनेज करना लेख पढ़ें.

अन्य संसाधन