नेटवर्क की स्थितियों के आधार पर, वेबसाइट लोड होने का अनुभव बहुत अलग हो सकता है. आम तौर पर, तेज़ स्पीड वाले नेटवर्क पर सब कुछ बिना रुकावट के आसान हो जाता है. लेकिन जब आप कभी भी, कहीं भी सीमित डेटा प्लान और खराब कनेक्शन के साथ काम कर रहे होते हैं या कॉफ़ी की दुकान वाले धीमे वाई-फ़ाई पर लैपटॉप के साथ अटक जाते हैं, तो यह बिलकुल अलग बात है.
इससे निपटने का एक तरीका यह है कि उपयोगकर्ताओं के कनेक्शन की क्वालिटी के आधार पर उन्हें वे एसेट दिखाएं जो आप उन्हें दिखा रहे हैं. अब नेटवर्क इन्फ़ॉर्मेशन एपीआई की मदद से, वेब ऐप्लिकेशन उपयोगकर्ता के नेटवर्क की जानकारी ऐक्सेस कर सकते हैं.
इस्तेमाल
उपयोगकर्ता अनुभव को बेहतर बनाने के लिए, नेटवर्क की इस जानकारी का इस्तेमाल कई तरीकों से किया जा सकता है:
- उपयोगकर्ता के नेटवर्क के आधार पर, हाई-डेफ़िनिशन और लो-डेफ़िनिशन कॉन्टेंट के बीच स्विच करना.
- यह तय करें कि संसाधनों को पहले से लोड करना है या नहीं.
- जब उपयोगकर्ताओं के पास धीमा इंटरनेट कनेक्शन हो, तब अपलोड और डाउनलोड को रोकना.
- अगर नेटवर्क की क्वालिटी, ऐप्लिकेशन को लोड करने और सुविधाओं का इस्तेमाल करने के हिसाब से अच्छी नहीं है, तो ऑफ़लाइन मोड चालू करें.
- उपयोगकर्ताओं को चेतावनी दें कि मोबाइल इंटरनेट का इस्तेमाल करके कुछ करने (उदाहरण के लिए, वीडियो देखना) पर, उन्हें पैसे चुकाने पड़ सकते हैं.
- अपने आंकड़ों में इसका इस्तेमाल करके, अपने उपयोगकर्ताओं के नेटवर्क की क्वालिटी का डेटा इकट्ठा करें.
कई ऐप्लिकेशन पहले से ही कुछ ऐसा ही कर रहे हैं. उदाहरण के लिए, YouTube, Netflix, और ज़्यादातर अन्य वीडियो (या वीडियो कॉलिंग) सेवाएं, स्ट्रीमिंग के दौरान रिज़ॉल्यूशन को अपने-आप अडजस्ट कर लेती हैं. जब Gmail लोड होता है, तब यह उपयोगकर्ताओं को "बेसिक एचटीएमएल लोड करें (धीमे कनेक्शन के लिए)" का लिंक देता है.
यह कैसे काम करता है
navigator.connection
ऑब्जेक्ट में क्लाइंट के कनेक्शन के बारे में जानकारी होती है. टेबल में इसकी सभी प्रॉपर्टी के बारे में बताया गया है.
प्रॉपर्टी | जानकारी |
---|---|
downlink |
बैंडविथ का अनुमान, मेगाबिट प्रति सेकंड में. |
effectiveType |
यह कनेक्शन का असरदार टाइप है, जिसकी वैल्यू 'slow-2g' , '2g' , '3g' या '4g' हो सकती है. इसमें 4g और इससे ज़्यादा वैल्यू शामिल होती हैं. इसका पता दोतरफ़ा यात्रा के समय और डाउनलिंक की स्पीड के कॉम्बिनेशन के आधार पर लगाया जाता है. उदाहरण के लिए, ज़्यादा इंतज़ार के समय के साथ तेज़ डाउनलिंक का इस्तेमाल करने पर, इंतज़ार के समय की वजह से, effectiveType कम होगा. |
onchange |
कनेक्शन की जानकारी में बदलाव होने पर ट्रिगर होने वाला इवेंट हैंडलर. |
rtt |
कनेक्शन के अनुमानित राउंड-ट्रिप इंतज़ार का समय, मिलीसेकंड में. |
saveData |
यह एक बूलियन वैल्यू है, जो यह तय करती है कि उपयोगकर्ता ने कम डेटा खर्च करने वाले मोड का अनुरोध किया है या नहीं. |
ब्राउज़र के कंसोल में इसे चलाने पर, यह ऐसा दिखता है:
effectiveType
की वैल्यू, क्लाइंट हिंट के ज़रिए भी उपलब्ध होती हैं. इनकी मदद से, ब्राउज़र के कनेक्शन टाइप के बारे में सर्वर को बताया जा सकता है.
onchange
इवेंट लिसनर की मदद से, नेटवर्क क्वालिटी में होने वाले बदलावों के हिसाब से डाइनैमिक तौर पर बदलाव किया जा सकता है. अगर आपने खराब नेटवर्क की वजह से अपलोड या डाउनलोड को रोक दिया है, तो नेटवर्क की बेहतर स्थिति का पता चलने पर, ट्रांसफ़र को फिर से शुरू करने के लिए इवेंट लिसनर का इस्तेमाल किया जा सकता है. नेटवर्क क्वालिटी में बदलाव होने पर उपयोगकर्ताओं को इसकी सूचना देने के लिए भी इसका इस्तेमाल किया जा सकता है. उदाहरण के लिए, अगर किसी व्यक्ति का वाई-फ़ाई सिग्नल बंद हो जाता है और वह सेल्युलर नेटवर्क पर स्विच कर देता है, तो डेटा का अनचाहा ट्रांसफ़र (और शुल्क 💸) रोका जा सकता है.
onchange
इवेंट लिसनर का इस्तेमाल, किसी अन्य इवेंट लिसनर की तरह करें:
navigator.connection.addEventListener('change', doSomethingOnChange);
नतीजा
नेटवर्क की जानकारी देने वाले एपीआई के कई फ़ायदे हैं. खास तौर पर, धीमे नेटवर्क और ज़्यादा बैंडविड्थ वाले ऐप्लिकेशन का इस्तेमाल करने वाले लोगों के लिए. सबसे अच्छी बात यह है कि इसका इस्तेमाल, प्रगतिशील बेहतर बनाने की तकनीक के तौर पर किया जा सकता है.