शुरुआती जानकारी
वेब डेवलपर के रूप में, हम उन नई तकनीकों से उत्साहित होते हैं जो हमें पहले से ज़्यादा दिलचस्प, इंटरैक्टिव वेब पेज बनाने में मदद करती हैं. WebGL के साथ 3D ग्राफ़िक्स? बिलकुल. WebAudio के साथ ऑडियो की बेहतर सुविधाएं चाहिए? पक्का। रीयल-टाइम सहयोग ऐप्लिकेशन जो वेब कैमरा और माइक्रोफ़ोन का उपयोग करते हैं? मुझे साइन अप करें!
हालांकि, कम रोमांचक बात यह भी है कि ऐसी टेक्नोलॉजी हैं जो हमें ऐसे ऐप्लिकेशन बनाने में मदद करती हैं जो ज़्यादा बेहतर तरीके से काम करते हों और उपयोगकर्ताओं को बेहतर अनुभव देते हों. यहीं पर 'पेज विज़िबिलिटी' जैसा एपीआई काम करता है.
पेज विज़िबिलिटी एपीआई एक आसान और अहम काम करता है. इसकी मदद से, आपके ऐप्लिकेशन को यह पता चलता है कि उपयोगकर्ता को कोई पेज कब दिखेगा. इस बुनियादी जानकारी से, ऐसे वेब पेज बनाने में मदद मिलती है जो अलग तरह से काम करते हैं और जब उन्हें देखा नहीं जा रहा होता है. कुछ उदाहरणों पर ध्यान दें:
- सर्वर से जानकारी लेने वाला वेब पेज, सक्रिय रूप से न देखे जाने पर अपने अपडेट साइकल को धीमा कर सकता है
- रोटेटिंग इमेज कैरसेल या वीडियो/ऑडियो कॉन्टेंट दिखाने वाला पेज तब तक रुका रह सकता है, जब तक उपयोगकर्ता उस पेज को फिर से नहीं दिखाता
- कोई ऐप्लिकेशन, लोगों को सूचनाएं सिर्फ़ तब दिखा सकता है, जब वह व्यू से छिपा हो
पहली बार ऐसा हो सकता है कि यह एपीआई उपयोगकर्ताओं की सुविधा से ज़्यादा काम का न लगे, लेकिन मोबाइल वेब ब्राउज़िंग में हो रही बढ़ोतरी को देखते हुए, डिवाइस की बैटरी बचाने में मदद करने वाली कोई भी चीज़ बहुत ज़रूरी हो गई है. Page visibility API का इस्तेमाल करके, आपकी साइट उपयोगकर्ता के डिवाइस को कम बैटरी खर्च करने और ज़्यादा समय तक चलने में मदद कर सकती है.
एपीआई की खास बातें, जो जानकारी के लिए उम्मीदवार के सुझाव वाले चरण में हैं. यह दस्तावेज़ के दिखने की स्थिति का पता लगाने के लिए प्रॉपर्टी देता है. साथ ही, दिखने में होने वाले बदलावों का जवाब देने के लिए इवेंट, दोनों की जानकारी देता है.
इस ट्यूटोरियल में, मैं एपीआई की बुनियादी बातों के बारे में बताऊँगी. साथ ही, इसे कुछ व्यावहारिक उदाहरणों में लागू करने का तरीका भी बताऊँगी (अगर आप अधीर हैं, तो बेझिझक आगे जाएँ).
दस्तावेज़ किसको दिखे उसकी जानकारी
Page visibilityAPI स्पेसिफ़िकेशन के मौजूदा वर्शन से दस्तावेज़ की दो प्रॉपर्टी के बारे में पता चलता है: बूलियन hidden और इन्युमरेशन visibilityState. फ़िलहाल, visibilityState प्रॉपर्टी में चार वैल्यू हो सकती हैं: hidden, visible, prerender, और unloaded.
जैसा कि आपको उम्मीद हो सकती है, जब दस्तावेज़ बिलकुल भी नहीं दिखता है, तो छिपाया गया एट्रिब्यूट 'सही' दिखाता है. आम तौर पर, इसका मतलब यह है कि दस्तावेज़ को छोटा किया गया है, बैकग्राउंड टैब पर, ओएस की लॉक स्क्रीन ऊपर की ओर है वगैरह. अगर दस्तावेज़ का कोई भी हिस्सा कम से कम एक डिसप्ले पर दिख रहा है, तो यह एट्रिब्यूट 'गलत' पर सेट होता है. इसके अलावा, सुलभता टूल को शामिल करने के लिए, छिपे हुए एट्रिब्यूट को 'गलत' पर सेट किया जा सकता है. ऐसा तब होता है, जब स्क्रीन पर मौजूद कॉन्टेंट को बड़ा करके दिखाने की सुविधा जैसा कोई टूल, दस्तावेज़ को पूरी तरह से छिपा देता है, लेकिन उस एट्रिब्यूट का व्यू दिखा रहा होता है.
वेंडर प्रीफ़िक्स से जुड़ी समस्या
सभी वेंडर के हिसाब से शुरू होने वाले प्रीफ़िक्स के बजाय कोड पर ध्यान देने के लिए, मैं ब्राउज़र के बारे में जानकारी देने वाले कुछ हेल्पर फ़ंक्शन का इस्तेमाल करने जा रही हूं. जैसे ही आप Android 4.4 ब्राउज़र के लिए काम करना बंद करते हैं, आप इस हिस्से को हटा सकते हैं और मानक नामों पर बने रह सकते हैं.
function getHiddenProp(){
var prefixes = ['webkit','moz','ms','o'];
// if 'hidden' is natively supported just return it
if ('hidden' in document) return 'hidden';
// otherwise loop over all the known prefixes until we find one
for (var i = 0; i < prefixes.length; i++){
if ((prefixes[i] + 'Hidden') in document)
return prefixes[i] + 'Hidden';
}
// otherwise it's not supported
return null;
}
दस्तावेज़ के प्रॉपर्टी का उदाहरण
अब हम क्रॉस-ब्राउज़र फ़ंक्शन, isHidden(), लिखकर यह देख सकते हैं कि दस्तावेज़ दिख रहा है या नहीं.
function isHidden() {
var prop = getHiddenProp();
if (!prop) return false;
return document[prop];
}
दस्तावेज़ किसको दिखे, इसकी पूरी जानकारी पाने के लिए, visibilityState प्रॉपर्टी का इस्तेमाल किया जा सकता है. यह प्रॉपर्टी इन चार में से कोई एक वैल्यू दिखाती है:
hidden: दस्तावेज़ पूरी तरह से छिपा हुआ हैvisible: दस्तावेज़ कम से कम एक डिसप्ले डिवाइस पर दिख रहा हैprerender: दस्तावेज़ को ऑफ़-स्क्रीन पर लोड किया गया है और वह दिख नहीं रहा है (यह वैल्यू ज़रूरी नहीं है. ज़रूरी नहीं है कि सभी ब्राउज़र पर यह काम करे)unloaded: अगर दस्तावेज़ को अनलोड किया जाना है, तो यह वैल्यू दिखाई जाएगी (यह वैल्यू ज़रूरी नहीं है. ज़रूरी नहीं है कि सभी ब्राउज़र पर यह काम करे)
'किसे दिखे' बदलाव से जुड़ा इवेंट
'किसको दिखे' सेटिंग के अलावा, 'किसको दिखे' इवेंट भी 'किसको दिखे' इवेंट होता है, जो दस्तावेज़ के दिखने की स्थिति में बदलाव होने पर फ़ायर होता है. इस इवेंट के लिए, इवेंट लिसनर को सीधे दस्तावेज़ ऑब्जेक्ट पर रजिस्टर किया जा सकता है:
इवेंट का उदाहरण
// use the property name to generate the prefixed event name
var visProp = getHiddenProp();
if (visProp) {
var evtname = visProp.replace(/[H|h]idden/,'') + 'visibilitychange';
document.addEventListener(evtname, visChange);
}
function visChange() {
var txtFld = document.getElementById('visChangeText');
if (txtFld) {
if (isHidden())
txtFld.value += "Tab Hidden!\n";
else
txtFld.value += "Tab Visible!\n";
}
}
खास जानकारी
एक बेहतरीन वेब ऐप्लिकेशन बनाने में सिर्फ़ व्हिज़-बैंग, नज़र में आने वाली ऐसी सुविधाओं का इस्तेमाल करने से कहीं ज़्यादा ज़रूरी है जिन्हें उपयोगकर्ता देख सकते हैं और उनसे इंटरैक्ट कर सकते हैं. एक शानदार ऐप्लिकेशन, उपयोगकर्ता के संसाधनों और ध्यान खींचने का ध्यान रखते हुए चीज़ों का इस्तेमाल करता है और Page visibility API इस पहेली का एक अहम हिस्सा है. संसाधनों को ध्यान में रखकर बनाए गए वेब ऐप्लिकेशन बनाने के बारे में ज़्यादा जानने के लिए, परफ़ॉर्मेंस से जुड़े अन्य लेख देखें.