वेब से कनेक्ट होने वाले डिवाइसों की क्षमता, आज पहले के मुकाबले ज़्यादा हो गई है. यह वेब ऐप्लिकेशन किसी महंगे डेस्कटॉप कंप्यूटर पर काम करता है, लेकिन इसे कम क्षमता वाले फ़ोन, स्मार्टवॉच या टैबलेट पर भी इस्तेमाल किया जा सकता है. साथ ही, ऐसा अनुभव देना काफ़ी मुश्किल हो सकता है जो किसी भी डिवाइस पर आसानी से काम करे.
डिवाइस मेमोरी एपीआई एक नई वेब प्लैटफ़ॉर्म सुविधा है. इसका मकसद, आधुनिक डिवाइस लैंडस्केप का इस्तेमाल करने में वेब डेवलपर की मदद करना है. यह navigator ऑब्जेक्ट, navigator.deviceMemory में रीड-ओनली प्रॉपर्टी जोड़ता है. इससे पता चलता है कि डिवाइस की गीगाबाइट में कितनी रैम है. इसे दो की नजदीकी पावर तक पूर्णांकित किया जाता है. इस एपीआई में एक
क्लाइंट हिंट हेडर,
Device-Memory भी होता है, जो एक ही वैल्यू के बारे में बताता है.
Device Memory API से डेवलपर दो मुख्य काम कर सकते हैं:
- डिवाइस की मेमोरी की वैल्यू के आधार पर, रनटाइम के दौरान तय करें कि कौनसे संसाधन इस्तेमाल करने हैं. जैसे, कम मेमोरी वाले डिवाइस का इस्तेमाल करने वाले लोगों को किसी ऐप्लिकेशन का "लाइट" वर्शन दिखाना.
- विश्लेषण करने वाली किसी सेवा को इस वैल्यू की रिपोर्ट करें. इससे आपको बेहतर तरीके से यह समझने में मदद मिलेगी कि डिवाइस की मेमोरी, उपयोगकर्ता के व्यवहार, कन्वर्ज़न या आपके कारोबार के लिए ज़रूरी अन्य मेट्रिक के साथ कैसे जुड़ी है.
डिवाइस की मेमोरी के आधार पर, कॉन्टेंट को डाइनैमिक तौर पर तैयार करना
अगर आपका खुद का वेब सर्वर चल रहा है और आपके पास संसाधनों को दिखाने वाले लॉजिक में बदलाव करने की अनुमति है, तो Device-Memory क्लाइंट हिंट हेडर वाले अनुरोधों का जवाब, शर्त के साथ दिया जा सकता है.
GET /main.js HTTP/1.1
Host: www.example.com
Device-Memory: 0.5
Accept: */*
इस तकनीक की मदद से, अपनी ऐप्लिकेशन स्क्रिप्ट के एक या एक से ज़्यादा वर्शन बनाए जा सकते हैं. साथ ही, Device-Memory हेडर में सेट की गई वैल्यू के आधार पर क्लाइंट के अनुरोधों का जवाब दिया जा सकता है. इन वर्शन में पूरी तरह से अलग कोड की ज़रूरत नहीं होती (क्योंकि इसे मैनेज करना मुश्किल होता है). ज़्यादातर मामलों में,
"लाइट" वर्शन में सिर्फ़ वे सुविधाएं शामिल नहीं की जातीं जो महंगी हों और उपयोगकर्ता अनुभव के लिए ज़रूरी न हों.
क्लाइंट हिंट हेडर का इस्तेमाल करना
Device-Memory हेडर को चालू करने के लिए, अपने दस्तावेज़ के <head> में क्लाइंट हिंट <meta> टैग जोड़ें:
<meta http-equiv="Accept-CH" content="Device-Memory">
इसके अलावा, सर्वर के Accept-CH रिस्पॉन्स हेडर में "डिवाइस की मेमोरी" शामिल करें:
HTTP/1.1 200 OK
Date: Thu Dec 07 2017 11:44:31 GMT
Content-Type: text/html
Accept-CH: Device-Memory, Downlink, Viewport-Width
इससे ब्राउज़र को मौजूदा पेज के लिए, सभी सब-रिसॉर्स अनुरोधों के साथ Device-Memory हेडर भेजने के लिए कहा जाता है.
दूसरे शब्दों में, अपनी वेबसाइट के लिए ऊपर दिए गए विकल्पों में से किसी एक को लागू करने के बाद, अगर कोई उपयोगकर्ता 0.5 जीबी रैम वाले डिवाइस पर विज़िट करता है, तो इस पेज से किए गए सभी इमेज, सीएसएस, और JavaScript अनुरोधों में Device-Memory हेडर शामिल होगा. इसकी वैल्यू "0.5" पर सेट की जाएगी. साथ ही, सर्वर आपके हिसाब से ऐसे अनुरोधों का जवाब दे सकता है.
उदाहरण के लिए, अगर Device-Memory हेडर सेट है और उसकी वैल्यू 1 से कम है, तो यह एक्सप्रेस रूट स्क्रिप्ट का "लाइट" वर्शन दिखाता है. अगर ब्राउज़र Device-Memory हेडर पर काम नहीं करता है या वैल्यू 1 या इससे बड़ी है, तो यह "फ़ुल" वर्शन दिखाता है:
app.get('/static/js/:scriptId', (req, res) => {
// Low-memory devices should load the "lite" version of the component.
// The logic below will set `scriptVersion` to "lite" if (and only if)
// `Device-Memory` isn't undefined and returns a number less than 1.
const scriptVersion = req.get('Device-Memory') < 1 ? 'lite' : 'full';
// Respond with the file based on `scriptVersion` above.
res.sendFile(`./path/to/${req.params.scriptId}.${scriptVersion}.js`);
});
JavaScript API का इस्तेमाल करना
कुछ मामलों में (जैसे कि स्टैटिक फ़ाइल सर्वर या सीडीएन के साथ), आप एचटीटीपी हेडर के आधार पर अनुरोधों का जवाब नहीं दे पाएंगे. इन मामलों में, अपने JavaScript कोड में शर्तों के साथ अनुरोध करने के लिए, JavaScript API का इस्तेमाल किया जा सकता है.
नीचे दिया गया लॉजिक, ऊपर दिए गए एक्सप्रेस रूट जैसा ही है. हालांकि, यह क्लाइंट-साइड लॉजिक में स्क्रिप्ट यूआरएल को डाइनैमिक तौर पर तय करता है:
// Low-memory devices should load the "lite" version of the component.
// The logic below will set `componentVersion` to "lite" if (and only if)
// deviceMemory isn't undefined and returns a number less than 1.
const componentVersion = navigator.deviceMemory < 1 ? 'lite' : 'full';
const component = await import(`path/to/component.${componentVersion}.js`);
component.init();
डिवाइस की क्षमताओं के आधार पर, एक ही कॉम्पोनेंट के अलग-अलग वर्शन को शर्त के साथ दिखाना अच्छी रणनीति होती है. हालांकि, कभी-कभी किसी कॉम्पोनेंट को दिखाना और न करना बेहतर होता है.
कई मामलों में, कॉम्पोनेंट में सिर्फ़ सुधार किया जाता है. वे अनुभव को बेहतर बनाते हैं, लेकिन ऐप्लिकेशन के मुख्य फ़ंक्शन के लिए ये ज़रूरी नहीं हैं. ऐसे मामलों में, इस तरह के कॉम्पोनेंट को पहली बार में लोड न करना बेहतर हो सकता है. अगर उपयोगकर्ता अनुभव को बेहतर बनाने के मकसद से बनाया गया कोई कॉम्पोनेंट, ऐप्लिकेशन को धीमा या खराब कर देता है, तो इसका मतलब है कि उस कॉम्पोनेंट का मकसद पूरा नहीं हो रहा है.
उपयोगकर्ता अनुभव पर असर डालने वाले किसी भी फ़ैसले के लिए, यह ज़रूरी है कि आप उसके असर को मापें. यह भी ज़रूरी है कि आपको इस बात की साफ़ तौर पर जानकारी हो कि आपका ऐप्लिकेशन आज कैसा परफ़ॉर्म कर रहा है.
आपके ऐप्लिकेशन के मौजूदा वर्शन के लिए, उपयोगकर्ता के व्यवहार से डिवाइस की मेमोरी कैसे जुड़ी होती है, इस बारे में समझने से आपको बेहतर जानकारी मिलेगी. इससे आपको एक बेसलाइन मिलेगी, जिससे आने वाले समय में होने वाले बदलावों की सफलता का आकलन किया जा सकेगा.
आंकड़ों की मदद से डिवाइस की मेमोरी ट्रैक करना
Device Memory API नया है और आंकड़े देने वाली ज़्यादातर कंपनियां, इसे डिफ़ॉल्ट रूप से ट्रैक नहीं कर रही हैं. अच्छी बात यह है कि आंकड़ों की सेवा देने वाली ज़्यादातर कंपनियां, आपको कस्टम डेटा ट्रैक करने का तरीका उपलब्ध कराती हैं (उदाहरण के लिए, Google Analytics में कस्टम डाइमेंशन नाम की एक सुविधा होती है). इसका इस्तेमाल, अपने उपयोगकर्ताओं के डिवाइस की मेमोरी ट्रैक करने के लिए किया जा सकता है.
कस्टम डिवाइस मेमोरी डाइमेंशन का इस्तेमाल करना
Google Analytics में कस्टम डाइमेंशन का इस्तेमाल करने की प्रोसेस दो चरणों में होती है.
- Google Analytics में कस्टम डाइमेंशन सेट अप करें.
- अभी-अभी बनाए गए कस्टम डाइमेंशन के लिए, अपने ट्रैकिंग कोड को
setडिवाइस की मेमोरी की वैल्यू पर अपडेट करें.
कस्टम डाइमेंशन बनाते समय, इसे "डिवाइस की मेमोरी" नाम दें और "सेशन" का स्कोप चुनें, क्योंकि उपयोगकर्ता के ब्राउज़िंग सेशन के दौरान वैल्यू में बदलाव नहीं होगा:
अब अपना ट्रैकिंग कोड अपडेट करें. यहां एक उदाहरण दिया गया है कि यह कैसा दिख सकता है. ध्यान दें कि जिन ब्राउज़र में Device Memory API काम नहीं करता उनकी डाइमेंशन वैल्यू "(not set)" होगी.
// Create the tracker from your tracking ID.
// Replace "UA-XXXXX-Y" with your Google Analytics tracking ID.
ga('create', 'UA-XXXXX-Y', 'auto');
// Set the device memory value as a custom dimension on the tracker.
// This will ensure it gets sent with all future data to Google Analytics.
// Note: replace "XX" with the index of the custom dimension you created
// in the Google Analytics admin.
ga('set', 'dimensionXX', navigator.deviceMemory || '(not set)');
// Do any other other custom setup you want...
// Send the initial pageview.
ga('send', 'pageview');
डिवाइस की मेमोरी से जुड़े डेटा की रिपोर्टिंग
ट्रैकर ऑब्जेक्ट पर डिवाइस का मेमोरी डाइमेंशन
set होने पर, Google Analytics को भेजे जाने वाले पूरे डेटा में यह वैल्यू शामिल होगी.
इसकी मदद से, डिवाइस मेमोरी के हिसाब से किसी भी मेट्रिक (जैसे कि पेज लोड होने में लगने वाला समय, लक्ष्य पूरा होने की दर वगैरह) को अलग-अलग करके देखा जा सकता है. इससे यह पता लगाया जा सकता है कि इनके बीच कोई संबंध है या नहीं.
डिवाइस की मेमोरी, बिल्ट-इन डाइमेंशन के बजाय एक कस्टम डाइमेंशन होती है. इसलिए, आपको यह किसी भी स्टैंडर्ड रिपोर्ट में नहीं दिखेगा. इस डेटा को ऐक्सेस करने के लिए, आपको एक कस्टम रिपोर्ट बनानी होगी. उदाहरण के लिए, डिवाइस की मेमोरी के हिसाब से लोड होने में लगने वाले समय की तुलना करने वाली कस्टम रिपोर्ट का कॉन्फ़िगरेशन कुछ ऐसा दिख सकता है:
साथ ही, इससे जनरेट होने वाली रिपोर्ट कुछ इस तरह दिख सकती है:
डिवाइस का मेमोरी डेटा इकट्ठा कर लेने और इस बात की बेसलाइन तय कर लेने के बाद कि उपयोगकर्ता आपके ऐप्लिकेशन को मेमोरी स्पेक्ट्रम की सभी रेंज पर किस तरह इस्तेमाल कर रहे हैं, तब अलग-अलग उपयोगकर्ताओं को अलग-अलग संसाधन दिखाने की कोशिश की जा सकती है. इसके लिए, ऊपर दिए गए सेक्शन में बताई गई तकनीकों का इस्तेमाल करें. इसके बाद, आप नतीजे देखकर यह देख पाएंगे कि उनमें सुधार हुआ है या नहीं.
रैप कर रहा है
इस पोस्ट में बताया गया है कि अपने ऐप्लिकेशन में डिवाइस को उपयोगकर्ताओं के डिवाइस के मुताबिक बनाने के लिए, वह Device Memory API का इस्तेमाल कैसे करें. इसमें यह भी बताया गया है कि इन उपयोगकर्ताओं को आपके ऐप्लिकेशन का अनुभव कैसा मिलता है.
इस पोस्ट में Device Memory API के बारे में जानकारी दी गई है, लेकिन यहां बताई गई ज़्यादातर तकनीकें, ऐसे किसी भी एपीआई पर लागू की जा सकती हैं जो डिवाइस की क्षमताओं या नेटवर्क की स्थितियों की जानकारी देता हो.
डिवाइस में नेटवर्क की पहुंच लगातार बढ़ रही है. इसलिए, अब यह पहले से ज़्यादा ज़रूरी हो गया है कि वेब डेवलपर अपने अनुभव पर असर डालने वाले फ़ैसले लेते समय, उपयोगकर्ताओं की सभी ज़रूरतों को ध्यान में रखें.