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

Ernest Delgado
Ernest Delgado
X

परिचय

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

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

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

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

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

Browser Support

  • Chrome: 33.
  • Edge: 12.
  • Firefox: 18.
  • Safari: 7.

Source

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

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

दस्तावेज़ दिखने से जुड़ी प्रॉपर्टी

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

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

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

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

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

एक्सटर्नल रेफ़रंस