पृष्ठ दृश्यता API और दृश्यता। Js

पृष्ठ दृश्यता एपीआई जावास्क्रिप्ट में एक नया एपीआई है जो आपको यह पता लगाने की अनुमति देता है कि क्या कोई उपयोगकर्ता आपकी साइट को देखता है या, उदाहरण के लिए, एक और टैब खोला है।

यह एपीआई हमारे वेब फ्रेंडली और अधिक आरामदायक कैसे बना सकता है? वैसे सबसे स्पष्ट:

• साइट को अधिक उपयोगकर्ता के अनुकूल बनाने के लिए, "प्रयोज्य को बढ़ाने के लिए"। उदाहरण के लिए, स्लाइड शो को बंद करें या जब आप किसी अन्य टैब पर जाते हैं तो वीडियो रोकें (उदाहरण के लिए, आप YouTube पर एक वीडियो देखते हैं और आपको एक आवश्यक ईमेल प्राप्त होता है)।
• अतिरिक्त संसाधनों का उपभोग न करें। अनावश्यक तर्क बंद करें जब इसकी आवश्यकता न हो, क्योंकि उपयोगकर्ता साइट नहीं देखता है। उदाहरण के लिए, पृष्ठभूमि टैब में, जटिल जेएस गणना को अक्षम करें या AJAX का उपयोग करके नए संदेशों के लिए कम बार जांचें।
• अधिक सटीक आँकड़े पढ़ें। उदाहरण के लिए, उन उपयोगकर्ताओं की गणना न करें जिन्होंने आपकी साइट को एक नए टैब में खोला है और इसे बिना देखे बंद कर दिया है।
• Google Chrome से नई रेंडरिंग तकनीक का समर्थन करें , जब ब्राउज़र तुरंत खोलने के लिए निर्दिष्ट पृष्ठ को प्री लोड करता है और प्रस्तुत करता है। उदाहरण के लिए, Google खोज में, SERP का पहला परिणाम पूर्व-प्रसंस्करण के लिए चिह्नित किया जाएगा।
• एक Schrodinger बिल्ली एमुलेटर (चित्रण में) बनाएं जो एक जीवित या मृत बिल्ली को केवल तभी प्रदर्शित करता है जब उपयोगकर्ता पृष्ठभूमि में लोड टैब को खोलता है।

पेज विजिबिलिटी एपीआई के साथ काम करना अधिक सुविधाजनक बनाने के लिए, मैंने ( ईविल मार्टियंस की महिमा के लिए) विजिबिलिटी.जेएस लाइब्रेरी विकसित की। यह आपको वेंडर उपसर्गों के बारे में भूल जाने की अनुमति देता है और शॉर्ट क्लीन कोड लिखने के लिए उच्च-स्तर के कार्यों में "चीनी" जोड़ता है (उदाहरण के लिए, Visibility.every का एक एनालॉग है, लेकिन केवल तभी काम करता है यदि साइट एक खुले टैब में है)।

वीडियो प्लेयर का एक अच्छा उदाहरण जो पेज के अदृश्य होने पर वीडियो को रोकता है (Google Chrome 13 में खुला)।

ब्राउज़र का समर्थन

पेज विजिबिलिटी एपीआई अब Google Chrome 13 और IE 10 में समर्थित है। फ़ायरफ़ॉक्स 5 और उच्चतर के लिए, Private_face से एक मोजविज़ीबिलिटी हैक है जो पेज विज़िबिली एपीआई का अनुकरण करता है (यह हैक विजिबिलिटी .js से पहले पृष्ठ में जुड़ा होना चाहिए)।

डब्लू 3 सी पेज विजिबिलिटी एपीआई मानक का एक मसौदा पहले से ही है, इसलिए अन्य ब्राउज़रों में समर्थन समय की बात है।

लेकिन यह बिल्कुल भी आवश्यक नहीं है कि आपके सभी उपयोगकर्ताओं के ब्राउज़र इस एपीआई का समर्थन करते हैं - यह केवल एक सुधार है, नई कार्यक्षमता का जोड़ नहीं है, जैसे <video> । यदि समर्थन है, तो यह उपयोगकर्ता के लिए अधिक सुविधाजनक होगा, यदि नहीं, तो साइट नियमित साइटों की तरह काम करेगी और सोचती है कि उपयोगकर्ता हमेशा साइट देखता है। Visibility.js में उच्च-स्तरीय फ़ंक्शन विशेष रूप से बनाए गए हैं ताकि डेवलपर इस बारे में नहीं सोच सके कि एपीआई के लिए समर्थन है या नहीं।

राज्यों

वर्तमान में मानक में 4 संभावित पृष्ठ दृश्यता राज्य हैं:

• visible - उपयोगकर्ता अब पृष्ठ देखता है।
• hidden - पृष्ठ उपयोगकर्ता को दिखाई नहीं देता है, चूंकि ब्राउज़र में एक और टैब खुला है, ब्राउज़र विंडो कम से कम है या ओएस ने स्क्रीन को पूरी तरह से अवरुद्ध कर दिया है। सच है, वास्तव में, क्रोम केवल यह जांचता है कि वर्तमान टैब खुला है या नहीं, ब्राउज़र को कम करने से यह प्रभावित नहीं होता है।
• prerender - ब्राउज़र ने पृष्ठ को पहले से लोड और प्रस्तुत किया है ताकि इसे उपयोगकर्ता को तुरंत प्रदर्शित किया जा सके। यही है, अब उपयोगकर्ता पृष्ठ नहीं देखता है, अनावश्यक गणना और मल्टीमीडिया को हटा दिया जाना चाहिए, और आंकड़ों में इस तरह के देखने को अभी तक नहीं माना जाना चाहिए। सभी तकनीक केवल Google Chrome में समर्थित हैं, हालांकि यह पहले से ही मानक में है।
• preview - साइट एक छोटी पूर्वावलोकन विंडो में खुली है। उदाहरण के लिए, एक नए टैब में अक्सर खोली गई साइटों की पहेली में। मानक से सैद्धांतिक संपत्ति, क्योंकि यह अभी तक किसी भी ब्राउज़र द्वारा समर्थित नहीं है।

और जब किसी अन्य राज्य को मानक में जोड़ा जाता है, तो क्या होगा और आपको यह जांचना होगा कि साइट उपयोगकर्ता के लिए ही दिखाई दे रही है या नहीं। ऐसा करने के लिए, एक document.hidden है। document.hidden संपत्ति (विक्रेता के उपसर्गों के बारे में मत भूलो, क्रोम में यह विज़ुअलाइज़ेशन किया जाएगा Visibility.hidden() ) या Visibility.hidden() में Visibility.hidden() विधि। यदि आपको यह जांचने की आवश्यकता है कि साइट दिखाई दे रही है, तो इस संपत्ति का उपयोग करें, और राज्य के नाम की "hidden" साथ तुलना न करें।

Visibility.js

विक्रेता उपसर्गों के चेक के एक समूह के साथ एक निम्न-स्तरीय कोड से डरने के लिए नहीं, मैं दिखाऊंगा कि विज़िबिलिटी.जेएस के उदाहरण के साथ पृष्ठ विजिबिलिटी एपीआई के साथ तुरंत कैसे काम करना है, और लेख के अंत में मैं एपीआई मानक से निम्न-स्तरीय विधियों के बारे में बात करूंगा।

पुस्तकालय कोड पूरी तरह से यूनिट परीक्षणों द्वारा कवर किया गया है, प्रलेखित है और पुस्तकालय पहले से ही रूसी ग्रुपन में सफलतापूर्वक उपयोग किया जाता है। संपीड़ित संस्करण में, इसका वजन केवल 1 KB है, लेकिन यह आपको अतिरिक्त कोड के एक समूह से बचाता है।

Visibility.every

Visibility.every(interval, callback) setInterval(callback, interval) Visibility.every(interval, callback) का एक एनालॉग है, लेकिन callback तभी शुरू होता है जब उपयोगकर्ता अब पेज देखता है।

उदाहरण के लिए, हम उलटी गिनती को केवल तभी दिखाएंगे जब उपयोगकर्ता पृष्ठ देखता है:

 Visibility.every(1000, function() { updateCountdownAnimation(); }); 

Visibility.every(visible, hidden, callback) 2 समय का अंतराल ले सकती है - visible का उपयोग तब किया जाएगा जब पृष्ठ उपयोगकर्ता को दिखाई दे, और hidden - जब छिपा हुआ हो।

उदाहरण के लिए, आप हर मिनट नए संदेशों की जांच कर सकते हैं जब कोई उपयोगकर्ता कोई साइट खोलता है (यानी, यह उसके लिए महत्वपूर्ण है)। और जब उपयोगकर्ता साइट नहीं देखता है (किसी अन्य पेज को पढ़ता है) तो हम उसका ट्रैफ़िक बचाएंगे और हर 5 मिनट में मेल चेक करेंगे:

 var minute = 60 * 1000; Visibility.every(minute, 5 * minute, function () { checkForEmail(); }); 

लेकिन आम तौर पर मिलीसेकंड में समय का संकेत मिलता है - एक व्यक्ति का मजाक। इसलिए, Visibility.js jQuery के Chrono प्लगइन के साथ एकीकरण का समर्थन करता है (आपको Visibility.js से पहले इसे कनेक्ट करने की आवश्यकता है)। कोड स्पष्ट और मधुर रूप से कैंडिड हो जाता है:

 Visibility.every('minute', '5 minutes', function () { checkNewMails(); }); 

Visibility.every का उपयोग करते हुए टाइमर को बंद करने के लिए, आपको Visibility.stop(timerID) ( clearInterval काम नहीं करेगा Visibility.stop(timerID) का उपयोग करने की आवश्यकता है:

 var slideshow = Visibility.every(5 * 1000, function () { nextSlide(); }); $('.stopSlideshow').click(function () { Visibility.stop(slideshow); }); 

यदि ब्राउज़र पेज विजिबिलिटी एपीआई का समर्थन नहीं करता है, तो Visibility.every मान लेगी कि उपयोगकर्ता हमेशा साइट को देखता है (अर्थात, यह सेट setInterval का पूरा एनालॉग बन जाता है, लेकिन कुछ भी बुरा नहीं होता है)।

Visibility.onVisible

एक अन्य मानक स्थिति तब होती है जब हम उपयोगकर्ता द्वारा साइट को देखने तक प्रतीक्षा करते हैं (उदाहरण के लिए, क्योंकि हमने पृष्ठभूमि टैब में लिंक खोला था)। ऐसा करने के लिए, Visibility.onVisible(callback) । Visibility.onVisible(callback) विधि है, जो केवल पृष्ठ दिखाई देने पर कोड निष्पादित करती है। यदि पृष्ठ पहले से ही दिखाई दे रहा है, तो callback तुरंत कहा callback ।

उदाहरण के लिए, साइटों पर जाते समय, हम किसी प्रकार की सूचना दिखाते हैं और 10 सेकंड के बाद उसे खूबसूरती से छिपाते हैं। लेकिन अगर उपयोगकर्ता पृष्ठभूमि टैब में तुरंत साइट खोलता है, तो वह अधिसूचना को छोड़ सकता है। उपयोगकर्ता द्वारा साइट को वास्तव में देखे जाने के बाद 10 सेकंड का समय दें:

 Visibility.onVisible(function () { setTimeout(function() { Notification.hide(); }, 10 * 1000); }); 

यदि ब्राउज़र पेज विजिबिलिटी एपीआई का समर्थन नहीं करता है, तो Visibility.onVisible(callback) callback तुरंत कॉल करेगा।

Visibility.afterPrerendering

फ़ायरफ़ॉक्स है rel="prefetch" rel="prefetch" लिंक के लिए जो ब्राउज़र को बताता है कि उपयोगकर्ता इस लिंक को बाद में खोलने की संभावना है, इसलिए ब्राउज़र अपनी सामग्री को लोड करता है। यह आवश्यक है, उदाहरण के लिए, लेख के अगले अध्याय को डाउनलोड करने के लिए या खोज परिणामों में पहली बार।

Google Chrome ने आगे और किया rel="prerender" rel="prerender" - यह न केवल लोड करता है, बल्कि इसे तुरंत खोलने के लिए पृष्ठ को भी प्रस्तुत करता है (उदाहरण के लिए Google से वीडियो )।

हालांकि, कई प्रतिबंध हैं जब पृष्ठ का प्रतिपादन नहीं किया जाएगा। AJAX अनुरोध करना, ऑडियो या वीडियो पोस्ट करना, पॉपअप खोलना, भारी गणना करना निषिद्ध है। इसके अलावा, यह सलाह दी जाती है कि जब तक वह वास्तव में साइट को नहीं खोलेगा तब तक उपयोगकर्ता को आंकड़ों में नहीं लेना चाहिए।

इन सभी कार्यों के लिए, Visibility.afterPrerendering(callback) , जो केवल एक callback निष्पादित करेगा जब पृष्ठ वास्तव में खुलता है (अर्थात, यह पूर्व-रेंडरिंग स्थिति से बाहर निकल जाएगा) या callback ठीक से निष्पादित करेगा यदि पृष्ठ सामान्य रूप से तुरंत खोला गया था। callback आप AJAX के माध्यम से ऑटो-अपडेट को सक्षम कर सकते हैं, <video> पृष्ठ में जोड़ें और उपयोगकर्ता को आंकड़ों में गिनें।

 Visibility.afterPrerendering(function () { Statistics.countVisitor(); }); 

यदि ब्राउज़र पेज विजिबिलिटी एपीआई या प्री-रेंडरिंग का समर्थन नहीं करता है, तो Visibility.afterPrerendering(callback) callback तुरंत कॉल करेगा।

निम्न स्तर के कार्य

यदि आप यह समझना चाहते हैं कि ऊपर दिए गए उदाहरणों से सभी "चीनी" किस पर काम करते हैं, या यदि आप कुछ अधिक जटिल करना चाहते हैं, तो आपको विजिबिलिटी.जेएस के निम्न-स्तरीय कार्यों की आवश्यकता होगी। तुरंत मैं दिखाऊंगा कि पेज विजिबिलिटी एपीआई कैसे काम करता है।

यदि दृश्यता पृष्ठ दृश्यता API का समर्थन करती true तो Visibility.isSupported() true है। एक ब्राउज़र जो पेज विजिबिलिटी एपीआई का समर्थन नहीं करता है, उसे आसानी से पहचाना जा सकता है - इसमें document.hidden होगा। undefined , और true या false (बस याद रखें कि कोई वेंडर उपसर्ग है, उदाहरण के लिए, document.webkitHidden . document.webkitHidden )।

Visibility.state() राज्य का नाम ( "visible" , "hidden" या "prerenderer" ) देता है। यह विधि केवल document.visibilityState में दिखती है। document.visibilityState प्रॉपर्टी, वेंडर प्रीफिक्स को ध्यान में रखते हुए (उदाहरण के लिए, document.webkitVisibilityState )। पिन करने के लिए एक छोटा सा उदाहरण:

 if( Visibility.isSupported() ) { if ( 'hidden' == Visibility.state() ) { Statistics.userOpenPageInBackgroundTab(); } if ( 'prerender' == Visibility.state() ) { Statistics.pageIsPrerendering(); } }) 

यदि आपको केवल यह जांचने की आवश्यकता है कि उपयोगकर्ता पृष्ठ देखता है या नहीं, तो Visibility.hidden() का उपयोग करना बेहतर है। Visibility.hidden() (चूंकि राज्यों की सूची भविष्य में फिर से भरी जा सकती है)। यह सिर्फ document.hidden में दिखता है। निम्न उदाहरण वीडियो के ऑटो-प्ले को तभी सक्षम बनाता है जब पेज सक्रिय टैब में तुरंत खुलता है (और नई पृष्ठभूमि में नहीं):

 $(document).load(function () { if ( !Visibility.hidden() ) { VideoPlayer.play(); } }); 

किसी पृष्ठ की स्थिति की निगरानी करने के लिए, document में एक visibilitychange webkitvisibilitychange (Chrome में, webkitvisibilitychange ) है। Visibility.change(callback) में एक छोटा तरीका है - Visibility.change(callback) विधि ईवेंट हैंडलर को ही लटका देती है और हर बार पेज दृश्यता में परिवर्तन होने पर callback करता है। callback का पहला तर्क ईवेंट ऑब्जेक्ट होगा, और दूसरा राज्य का नाम है। एक उदाहरण:

 Visibility.change(function (e, state) { Statistics.trackChangeVisibility(state); }); 

स्थापना

• यदि आप रूबी का उपयोग रेल 3.1 पर करते हैं, तो सबसे आसान तरीका आपके लिए है। दृश्यताज मणि को मणिभ से जोड़ें:
  

   gem 'visibilityjs' 

  
  और app/assets/javascripts/application.js.coffee में पुस्तकालय कनेक्ट करें:
  

   #= require visibility 

  
  
• यदि आप किसी प्रकार के स्थिर संग्राहक का उपयोग करते हैं, उदाहरण के लिए, जममिट , तो अपनी परियोजना के public/javascripts/lib में lib / visual.js डाउनलोड करें और config/assets.yml में पैकेज सेटिंग्स में Visibility.js config/assets.yml :
  

   javascripts: application: - public/javascripts/lib/visibility.js 

• यदि किसी कारण से आप क्लाइंट ऑप्टिमाइज़ेशन के बारे में नहीं सोचते हैं और आगे के संपीड़न के लिए प्रोजेक्ट की सभी JS-files को संयोजित नहीं करते हैं, तो आप Visibility.js के पहले से ही संपीड़ित संस्करण को डाउनलोड कर सकते हैं - दृश्यता .min.js ।

संदर्भ

• Google द्वारा अच्छा पृष्ठ दृश्यता API
• ड्राफ्ट विनिर्देशों W3C से
• पृष्ठ दृश्यता API को अच्छा और सुखद बनाने के लिए Visibility.js लाइब्रेरी