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