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