इस पेज का अनुवाद Cloud Translation API से किया गया है.

पेज विज़िबिलिटी एपीआई का इस्तेमाल करना

Ernest Delgado

परिचय

वेब डेवलपर के रूप में, हम उन नई तकनीकों से खुश रहते हैं जो हमें ज़्यादा आकर्षक, इंटरैक्टिव वेब पेज बनाने में मदद करती हैं. क्या WebGL की मदद से 3D ग्राफ़िक्स इस्तेमाल किए जा सकते हैं? बिल्कुल. क्या WebAudio की मदद से, ऑडियो की बेहतर सुविधाएं मिल सकती हैं? पक्का। वेब कैमरे और माइक्रोफ़ोन का इस्तेमाल करके, रीयल-टाइम में साथ मिलकर काम करने की सुविधा देने वाले ऐप्लिकेशन? मुझे साइन अप करें!

हालांकि, कुछ ऐसी टेक्नोलॉजी भी हैं जो उतनी दिलचस्प नहीं हैं, लेकिन उतनी ही ज़रूरी हैं. इनकी मदद से, हम ऐसे ऐप्लिकेशन बना पाते हैं जो ज़्यादा बेहतर तरीके से काम करते हैं और लोगों को बेहतर अनुभव देते हैं. ऐसे में, PageVisibility जैसे एपीआई का इस्तेमाल किया जाता है.

पेज विज़िबिलिटी एपीआई एक आसान, लेकिन ज़रूरी फ़ंक्शन करता है – यह आपके ऐप्लिकेशन को यह बताता है कि कोई पेज उपयोगकर्ता को कब दिखता है. इस बुनियादी जानकारी की मदद से, ऐसे वेब पेज बनाए जा सकते हैं जो देखे न जाने पर अलग तरह से काम करते हैं. कुछ उदाहरणों पर विचार करें:

किसी सर्वर से जानकारी हासिल करने वाला वेब पेज, जब सक्रिय रूप से नहीं देखा जा रहा होता है, तो उसके अपडेट होने की अवधि धीमी हो सकती है
रोटेटिंग इमेज कैरसेल या वीडियो/ऑडियो कॉन्टेंट दिखाने वाले पेज को तब तक रोका जा सकता है, जब तक उपयोगकर्ता उसे फिर से नहीं दिखाता
कोई ऐप्लिकेशन, उपयोगकर्ता को सूचनाएं सिर्फ़ तब दिखा सकता है, जब वह ऐप्लिकेशन के होम स्क्रीन पर न दिख रहा हो

पहली नज़र में, यह एपीआई उपयोगकर्ताओं के लिए सुविधाजनक होने के अलावा, बहुत काम का नहीं लग सकता. हालांकि, मोबाइल वेब ब्राउज़िंग में हुई भारी बढ़ोतरी को देखते हुए, डिवाइस की बैटरी बचाने में मदद करने वाली कोई भी चीज़ बहुत ज़रूरी हो जाती है. PageVisibility API का इस्तेमाल करके, आपकी साइट से उपयोगकर्ता के डिवाइस की बैटरी कम खर्च होती है और डिवाइस ज़्यादा समय तक चलता है.

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

सोर्स

एपीआई से जुड़ी खास जानकारी, दस्तावेज़ के दिखने की स्थिति का पता लगाने के लिए, दोनों प्रॉपर्टी उपलब्ध कराती है. साथ ही, यह दस्तावेज़ के दिखने की स्थिति में होने वाले बदलावों के बारे में जानकारी देने के लिए इवेंट भी उपलब्ध कराती है. फ़िलहाल, यह दस्तावेज़ उम्मीदवार के सुझाव देने वाले चरण में है.

इस ट्यूटोरियल में, हम एपीआई के बुनियादी बातों के बारे में बताएंगे. साथ ही, कुछ व्यावहारिक उदाहरणों के साथ, इसे लागू करने का तरीका भी बताएंगे. अगर आपको इंतज़ार नहीं करना है, तो सीधे उदाहरणों पर जाएं.

दस्तावेज़ की दृश्यता से जुड़ी प्रॉपर्टी

PageVisibilityAPI स्पेसिफ़िकेशन के मौजूदा वर्शन में, दस्तावेज़ की दो प्रॉपर्टी तय की गई हैं: बूलियन hidden और एनिमरेशन visibilityState. फ़िलहाल, विज़िबिलिटी स्टेट प्रॉपर्टी में चार संभावित वैल्यू हैं: hidden, visible, prerender, और unloaded.

ध्यान दें: ये प्रॉपर्टी Android ब्राउज़र में सिर्फ़ वेंडर प्रीफ़िक्स के तौर पर होती हैं. इसके लिए आपको webkitHidden और webkitVisibilityState जैसे प्रीफ़िक्स वाले वर्शन इस्तेमाल करने होंगे. इसके साथ काम करने वाले दूसरे सभी ब्राउज़र (IE 10+, Firefox, Chrome, Safari) बिना प्रीफ़िक्स वाले वर्शन लागू करते हैं.

आपकी उम्मीद के मुताबिक, अगर दस्तावेज़ नहीं दिखता है, तो छिपे हुए एट्रिब्यूट 'सही' दिखाते हैं. आम तौर पर, इसका मतलब यह है कि दस्तावेज़ को या तो बैकग्राउंड टैब पर छोटा किया गया है, ओएस की लॉक स्क्रीन चालू है वगैरह. अगर दस्तावेज़ का कोई भी हिस्सा कम से कम एक डिसप्ले पर कम से कम कुछ हद तक दिखता है, तो यह एट्रिब्यूट 'गलत' पर सेट है. इसके अलावा, सुलभता टूल के साथ काम करने के लिए, 'छिपा हुआ' एट्रिब्यूट को 'गलत' पर सेट किया जा सकता है. ऐसा तब किया जाता है, जब स्क्रीन ज़ूम करने वाला टूल, दस्तावेज़ को पूरी तरह से छिपा देता है, लेकिन उसका व्यू दिखाता है.

वेंडर प्रीफ़िक्स इस्तेमाल करना

वेंडर के हिसाब से प्रीफ़िक्स करने के बजाय, कोड पर फ़ोकस बनाए रखने के लिए, मैं ब्राउज़र के हिसाब से अलग-अलग फ़ंक्शन का इस्तेमाल करूंगा. 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: अगर दस्तावेज़ अनलोड किया जाना है, तो यह वैल्यू दिखाई जाएगी (यह वैल्यू ज़रूरी नहीं है. यह ज़रूरी नहीं है कि सभी ब्राउज़र पर यह वैल्यू काम करे)

VisibilityChange इवेंट

'किसको दिखे' सेटिंग के साथ-साथ, विज़िबिलिटी से जुड़ा एक इवेंट भी होता है. यह इवेंट, दस्तावेज़ के दिखने की स्थिति में बदलाव होने पर ट्रिगर होता है. इस इवेंट के लिए, सीधे दस्तावेज़ ऑब्जेक्ट पर इवेंट लिसनर को रजिस्टर किया जा सकता है:

इवेंट का उदाहरण

// 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, इस पहेली का एक अहम हिस्सा है. संसाधनों का ध्यान रखते हुए वेब ऐप्लिकेशन बनाने के बारे में ज़्यादा जानने के लिए, परफ़ॉर्मेंस से जुड़े अन्य लेख पढ़ें.