वेब से कनेक्ट करने वाले डिवाइसों की क्षमता आज पहले से ज़्यादा है आज पहले से कहीं ज़्यादा है. वह वेब ऐप्लिकेशन जो ज़्यादा सेवाओं पर काम करता है डेस्कटॉप कंप्यूटर को कम पावर वाले फ़ोन, स्मार्टवॉच या टैबलेट पर भी इस्तेमाल किया जा सकता है, और ऐसे शानदार अनुभव बनाना बहुत मुश्किल हो सकता है जो लोगों की किसी भी डिवाइस पर आसानी से इस्तेमाल किया जा सकता है.
Device Memory API एक नया वेब है
यह प्लैटफ़ॉर्म सुविधा का मकसद, आधुनिक डिवाइस का इस्तेमाल करने में वेब डेवलपर की मदद करना है
लैंडस्केप. यह 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 हेडर को चालू करने के लिए, क्लाइंट हिंट <meta> टैग जोड़ें
अपने दस्तावेज़ के <head> को कॉपी करें:
<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 हेडर या वैल्यू एक या उससे बड़ी है:
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 के बारे में बताया गया है. हालांकि, इसमें ज़्यादातर तकनीकों का इस्तेमाल करने के बारे में भी बताया गया है यहां दिए गए विषयों को ऐसे किसी भी एपीआई पर लागू किया जा सकता है जो डिवाइस की क्षमताओं की रिपोर्ट करता है या नेटवर्क की शर्तों के मुताबिक हो.
डिवाइस का दायरा लगातार बढ़ रहा है, इसलिए यह पहले से ज़्यादा ज़रूरी हो गया है वेब डेवलपर यह फ़ैसला लेते समय लोगों के पूरे स्पेक्ट्रम को ध्यान में रखते हैं अनुभव पर असर डाल सकते हैं.