वेब बीकन एपीआई का उपयोग करते हुए गतिविधि लॉगिंग

बीकन एपीआई इसके लिए एक जावास्क्रिप्ट-आधारित इंटरफ़ेस है:

प्रतिक्रिया की प्रतीक्षा किए बिना, ब्राउज़र से सर्वर को थोड़ी मात्रा में डेटा भेजना। इस लेख में, हम इस बात पर विचार करेंगे कि बीकन एपीआई किन मामलों में उपयोगी होगा, यह एक ही उद्देश्य के लिए XMLHTTPRequest (Ajax) का उपयोग करने से कैसे भिन्न होता है और इसका उपयोग कैसे किया जाता है।

हमें दूसरे API की आवश्यकता क्यों है?

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

पोस्टकार्ड के साथ एक रूपक, ये कार्ड हैं जो लोग एक दूसरे को भेजते हैं / भेजते हैं। एक नियम के रूप में, उन्होंने उन पर एक छोटा पाठ लिखा ("आप कहां हैं? और मैं समुद्र में लोलुप हूं।", "यहां मेरा बहुत अच्छा मौसम है, आपके कार्यालय की तरह नहीं"), उन्होंने उन्हें मेल में फेंक दिया और भूल गए। किसी को भी इस तरह के जवाब की उम्मीद नहीं थी जैसे "मैं आपके लिए पहले से ही चला गया था," "यह मेरे कार्यालय में अद्भुत है।"

ऐसे कई मामले हैं जहां "भेजना और भूल जाना" दृष्टिकोण उचित होगा।

सांख्यिकी ट्रैकिंग और विश्लेषणात्मक जानकारी

यह पहली बात है जो दिमाग में आती है। Google Analytics जैसे बड़े समाधान बुनियादी चीज़ों का एक अच्छा अवलोकन प्रदान कर सकते हैं। लेकिन अगर हम कुछ और अनुकूलित चाहते हैं? हमें पेज पर क्या हो रहा है, यह पता लगाने के लिए कुछ कोड लिखने की आवश्यकता है (उपयोगकर्ता घटकों के साथ कैसे बातचीत करते हैं, कितनी दूर तक स्क्रॉल करते हैं, कौन से पृष्ठ पहली बिक्री से पहले प्रदर्शित किए गए थे), फिर उपयोगकर्ता को पृष्ठ छोड़ने पर इस डेटा को सर्वर पर भेजें। बीकन इस तरह के कार्य के लिए आदर्श रूप से अनुकूल है, क्योंकि हम केवल डेटा भेजते हैं और हमें सर्वर से प्रतिक्रिया की आवश्यकता नहीं होती है।

डिबग और लॉगिंग

एक अन्य एप्लिकेशन जावास्क्रिप्ट कोड से जानकारी लॉग कर रहा है। एक स्थिति की कल्पना करें जब आपके पास अमीर यूआई / यूएक्स के साथ एक बड़ा आवेदन है। सभी परीक्षण हरे हैं, और त्रुटि समय-समय पर उस प्रो पर पॉप अप हो जाती है जिसके बारे में आप जानते हैं, लेकिन जानकारी की कमी के कारण आप ऐसा नहीं कर सकते। इस मामले में, आप निदान के लिए बीकन का उपयोग कर सकते हैं।

वास्तव में, लॉगिंग के साथ किसी भी कार्य को बीकॉन का उपयोग करके हल किया जा सकता है। यह गेम में सेव पॉइंट्स का निर्माण, नई कार्यक्षमता के उपयोग के बारे में जानकारी एकत्र करना, परीक्षा परिणाम रिकॉर्ड करना और इसी तरह हो सकता है। यदि यह कुछ ऐसा है जो ब्राउज़र में होता है और आप सर्वर को इसके बारे में जानना चाहते हैं, तो बीकन वह है जो आपको चाहिए।

क्या हमने ऐसा पहले नहीं किया था?

मुझे पता है कि तुम क्या सोच रहे हो। इसमें से कोई भी नया नहीं है? हम 10 से अधिक वर्षों के लिए XMLHTTPRequest के माध्यम से उत्तर के साथ संचार कर रहे हैं। हमने हाल ही में Fetch API का उपयोग शुरू किया है, जो वास्तव में नए प्रोमिस इंटरफेस के साथ ही करता है। तो हमें एक और बीकन एपीआई की आवश्यकता क्यों है?

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

सी बीकन एपीआई को सीपीयू नेटवर्क के लिए सबसे अच्छे पल का इंतजार करने की जरूरत नहीं है। बस बीकन का उपयोग करके कतार में एक अनुरोध जोड़ना व्यावहारिक रूप से बेकार है।

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

यह आमतौर पर unload या beforeunload unload पर किया जाता है। ऐसा कोड निष्पादन को रोक सकता है, और यदि पृष्ठ में देरी हो रही है, तो अगले पृष्ठ की लोडिंग में भी देरी हो रही है। यह सबसे अच्छा UX नहीं की ओर जाता है।

क्या आप समझते हैं कि HTTP अनुरोध कितने धीमे हैं? और आखिरी चीज जो आप चाहते हैं, वह संक्रमणों के बीच HTTP अनुरोध को धकेलना है।

बीकन एपीआई की कोशिश कर रहा है

मूल उपयोग उदाहरण बहुत सरल है:

 let result = navigator.sendBeacon(url, data); 

result बूलियन मूल्य है। यदि ब्राउज़र ने कतार में अनुरोध जोड़ दिया है - true , यदि false नहीं false ।

नाविक का उपयोग करना

navigator.sendBeacon दो मापदंडों को स्वीकार करता है। पहला URL है जिसमें अनुरोध भेजा जाएगा, दूसरा वह डेटा है जिसे भेजा जाना चाहिए। अनुरोध में HTTP POST ।

data - यह पैरामीटर कई डेटा स्वरूपों को स्वीकार कर सकता है, जिनमें से सभी Fetch API के साथ काम करता है। यह Blob, BufferSource, FormData या URLSearchParams, आदि हो सकते हैं।

मुझे सरल की-वैल्यू डेटा के लिए फॉर्मडाटा का उपयोग करना पसंद है, यह एक जटिल और उपयोग करने में आसान क्लास नहीं है।

 // URL    let url = '/api/my-endpoint'; //   FormData let data = new FormData(); data.append('hello', 'world'); let result = navigator.sendBeacon(url, data); if (result) { console.log('  !'); } else { console.log('.'); } 

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

इस एपीआई के लिए समर्थन काफी ठोस है। एकमात्र ब्राउज़र जो समर्थन नहीं करता है वह है इंटरनेट एक्सप्लोरर (मुझे इसकी उम्मीद नहीं थी) और ओपेरा मिनी। लेकिन एज में सब कुछ काम करता है। ज्यादातर मामलों में, समर्थन है, लेकिन केवल मामले में जांच करना बेहतर है:

 if (navigator.sendBeacon) { // Beacon  } else { //  XHR? } 

उदाहरण: पृष्ठ पर खर्च किया गया लॉगिंग समय

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

चूंकि हम केवल पृष्ठ पर बिताए गए समय में रुचि रखते हैं, और वर्तमान में नहीं, हम पृष्ठ लोड करते समय आधार टाइमस्टैम्प प्राप्त करने के लिए performance.now() का उपयोग कर सकते हैं:

 let startTime = performance.now(); 

आइए एक आसान-से-उपयोग फ़ंक्शन में तर्क का एक छोटा सा टुकड़ा लपेटें:

 let logVisit = function() { // Test that we have support if (!navigator.sendBeacon) return true; // URL to send the data to, eg let url = '/api/log-visit'; // Data to send let data = new FormData(); data.append('start', startTime); data.append('end', performance.now()); data.append('url', document.URL); // Let's go! navigator.sendBeacon(url, data); }; 

अंत में, उपयोगकर्ता को पेज छोड़ने पर हमें इस फ़ंक्शन को कॉल करना होगा। पहला विचार unload का उपयोग करना था, लेकिन मैक ऑन सफारी सुरक्षा कारणों से अनुरोध को अवरुद्ध करता है। इसलिए, पहले से beforeunload करना बेहतर है:

 window.addEventListener('beforeunload', logVisit); 

जब पृष्ठ अनलोड किया जाता है (या पहले), तो हमारा logVisit() फ़ंक्शन को बुलाया जाएगा और, यदि ब्राउज़र बीकन एपीआई का समर्थन करता है, तो यह सर्वर को एक अनुरोध भेजेगा।

कुछ बिंदु

चूंकि अधिकांश समस्याओं के लिए बीकन एपीआई का उपयोग गतिविधि ट्रैकिंग के चारों ओर घूमने के लिए किया जाएगा, इसलिए इस पूरे रसोईघर के सामाजिक और कानूनी हिस्से पर ध्यान देना महत्वपूर्ण होगा।

GDPR

बस इसके बारे में याद रखें।

DNT: ट्रैक नहीं है

इसके अलावा, ब्राउज़रों के पास एक विकल्प है जो उपयोगकर्ताओं को यह इंगित करने की अनुमति देता है कि वे नहीं चाहते हैं कि उनकी गतिविधि को ट्रैक किया जाए। Do Not Track एक HTTP शीर्ष लेख भेजता है जो इस तरह दिखता है:

 DNT: 1 

यदि आप डेटा को ट्रैक कर रहे हैं जो उपयोगकर्ता को इंगित कर सकता है और अनुरोध हेडर में DNT: 1 , तो उपयोगकर्ता को सुनना और किसी भी डेटा को सहेजना बेहतर है। उदाहरण के लिए, PHP का उपयोग करते हुए, इसे निम्नानुसार सत्यापित किया जा सकता है:

 if (!empty($_SERVER['HTTP_DNT'])) { //  ,   } 

निष्कर्ष में

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