नेटवर्क की क्वालिटी के आधार पर, अडैप्टिव सर्विंग

Milica Mihajlija

नेटवर्क की स्थितियों के आधार पर, वेबसाइट लोड होने का अनुभव बहुत अलग हो सकता है. आम तौर पर, तेज़ स्पीड वाले नेटवर्क पर सब कुछ बिना रुकावट के आसान हो जाता है. लेकिन जब आप कभी भी, कहीं भी सीमित डेटा प्लान और खराब कनेक्शन के साथ काम कर रहे होते हैं या कॉफ़ी की दुकान वाले धीमे वाई-फ़ाई पर लैपटॉप के साथ अटक जाते हैं, तो यह बिलकुल अलग बात है.

इससे निपटने का एक तरीका यह है कि उपयोगकर्ताओं के कनेक्शन की क्वालिटी के आधार पर उन्हें वे एसेट दिखाएं जो आप उन्हें दिखा रहे हैं. अब नेटवर्क इन्फ़ॉर्मेशन एपीआई की मदद से, वेब ऐप्लिकेशन उपयोगकर्ता के नेटवर्क की जानकारी ऐक्सेस कर सकते हैं.

ब्राउज़र सहायता

  • Chrome: 61.
  • Edge: 79.
  • Firefox: यह सुविधा काम नहीं करती.
  • Safari: यह सुविधा काम नहीं करती.

सोर्स

इस्तेमाल

उपयोगकर्ता अनुभव को बेहतर बनाने के लिए, नेटवर्क की इस जानकारी का इस्तेमाल कई तरीकों से किया जा सकता है:

  • उपयोगकर्ता के नेटवर्क के आधार पर, हाई-डेफ़िनिशन और लो-डेफ़िनिशन कॉन्टेंट के बीच स्विच करना.
  • यह तय करें कि संसाधनों को पहले से लोड करना है या नहीं.
  • जब उपयोगकर्ताओं के पास धीमा इंटरनेट कनेक्शन हो, तब अपलोड और डाउनलोड को रोकना.
  • अगर नेटवर्क की क्वालिटी, ऐप्लिकेशन को लोड करने और सुविधाओं का इस्तेमाल करने के हिसाब से अच्छी नहीं है, तो ऑफ़लाइन मोड चालू करें.
  • उपयोगकर्ताओं को चेतावनी दें कि मोबाइल इंटरनेट का इस्तेमाल करके कुछ करने (उदाहरण के लिए, वीडियो देखना) पर, उन्हें पैसे चुकाने पड़ सकते हैं.
  • अपने आंकड़ों में इसका इस्तेमाल करके, अपने उपयोगकर्ताओं के नेटवर्क की क्वालिटी का डेटा इकट्ठा करें.

कई ऐप्लिकेशन पहले से ही कुछ ऐसा ही कर रहे हैं. उदाहरण के लिए, YouTube, Netflix, और ज़्यादातर अन्य वीडियो (या वीडियो कॉलिंग) सेवाएं, स्ट्रीमिंग के दौरान रिज़ॉल्यूशन को अपने-आप अडजस्ट कर लेती हैं. जब Gmail लोड होता है, तब यह उपयोगकर्ताओं को "बेसिक एचटीएमएल लोड करें (धीमे कनेक्शन के लिए)" का लिंक देता है.

धीमे इंटरनेट कनेक्शन पर, Gmail का बेसिक एचटीएमएल वर्शन लोड करने के लिए लिंक

यह कैसे काम करता है

navigator.connection ऑब्जेक्ट में क्लाइंट के कनेक्शन के बारे में जानकारी होती है. टेबल में इसकी सभी प्रॉपर्टी के बारे में बताया गया है.

प्रॉपर्टी जानकारी
downlink बैंडविथ का अनुमान, मेगाबिट प्रति सेकंड में.
effectiveType यह कनेक्शन का असरदार टाइप है, जिसकी वैल्यू 'slow-2g', '2g', '3g' या '4g' हो सकती है. इसमें 4g और इससे ज़्यादा वैल्यू शामिल होती हैं. इसका पता दोतरफ़ा यात्रा के समय और डाउनलिंक की स्पीड के कॉम्बिनेशन के आधार पर लगाया जाता है. उदाहरण के लिए, ज़्यादा इंतज़ार के समय के साथ तेज़ डाउनलिंक का इस्तेमाल करने पर, इंतज़ार के समय की वजह से, effectiveType कम होगा.
onchange कनेक्शन की जानकारी में बदलाव होने पर ट्रिगर होने वाला इवेंट हैंडलर.
rtt कनेक्शन के अनुमानित राउंड-ट्रिप इंतज़ार का समय, मिलीसेकंड में.
saveData यह एक बूलियन वैल्यू है, जो यह तय करती है कि उपयोगकर्ता ने कम डेटा खर्च करने वाले मोड का अनुरोध किया है या नहीं.

ब्राउज़र के कंसोल में इसे चलाने पर, यह ऐसा दिखता है:

Chrome DevTools कंसोल, जिसमें navgator.connection ऑब्जेक्ट की प्रॉपर्टी की वैल्यू दिखाई गई हों

effectiveType की वैल्यू, क्लाइंट हिंट के ज़रिए भी उपलब्ध होती हैं. इनकी मदद से, ब्राउज़र के कनेक्शन टाइप के बारे में सर्वर को बताया जा सकता है.

onchange इवेंट लिसनर की मदद से, नेटवर्क क्वालिटी में होने वाले बदलावों के हिसाब से डाइनैमिक तौर पर बदलाव किया जा सकता है. अगर आपने खराब नेटवर्क की वजह से अपलोड या डाउनलोड को रोक दिया है, तो नेटवर्क की बेहतर स्थिति का पता चलने पर, ट्रांसफ़र को फिर से शुरू करने के लिए इवेंट लिसनर का इस्तेमाल किया जा सकता है. नेटवर्क क्वालिटी में बदलाव होने पर उपयोगकर्ताओं को इसकी सूचना देने के लिए भी इसका इस्तेमाल किया जा सकता है. उदाहरण के लिए, अगर किसी व्यक्ति का वाई-फ़ाई सिग्नल बंद हो जाता है और वह सेल्युलर नेटवर्क पर स्विच कर देता है, तो डेटा का अनचाहा ट्रांसफ़र (और शुल्क 💸) रोका जा सकता है.

onchange इवेंट लिसनर का इस्तेमाल, किसी अन्य इवेंट लिसनर की तरह करें:

navigator.connection.addEventListener('change', doSomethingOnChange);

नतीजा

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