ब्राउज़र में एनालिटिक्स डेटा के लिए विशेष नेटवर्क फ़ंक्शन

"सेंडबीकन" क्या है

जब आप किसी क्लाइंट से अनुरोध करना चाहते हैं, जैसे आपके प्रगतिशील वेब ऐप से: या तो XMLHttpRequest या नया "fetch" आप उपयोग करने के लिए दो विकल्पों को जानते हैं। लेकिन क्या आप जानते हैं कि एक तीसरा विकल्प है, जिसे विशेष रूप से एनालिटिक्स डेटा जैसे बहुत छोटे डेटा चंक्स भेजने के लिए डिज़ाइन किया गया है? यह "sendBeacon" नामक एक फ़ंक्शन है, जो "नेविगेटर" -ऑब्जेक्ट से आधुनिक ब्राउज़रों में उपलब्ध है।

"sendBeacon" का उपयोग कैसे करें

छोटे डेटा विखंडू के लिए इस उद्देश्य-निर्मित अनुरोध-फ़ंक्शन का उपयोग करना वास्तव में सरल है। जब तक नेविगेटर पर "नेविगेटर" और साथ ही "sendBeacon" -फंक्शन दोनों उपलब्ध हैं, आपको केवल एक URL और साथ ही भेजने के लिए पेलोड प्रदान करने की आवश्यकता है।

आप निम्न प्रकार के डेटा भेज सकते हैं।

• ऐरेबफ़र
• ऐरेबफ़र व्यू
• ब्लॉब
• डोमस्ट्रिंग
• फॉर्मडाटा
• URLखोजपरम

"sendBeacon" की प्रत्येक कॉल एक POST-अनुरोध को निर्दिष्ट समापन बिंदु पर प्रेषित करेगी।

async function track(payload: TrackPayload){
  // We're using 'optional property access'
  // for a simple and clean implementation.
  //
  // You could of course also use nested if(){ ... }.
  await navigator?.sendBeacon?.('/track', payload);
}

// The following example is taken directly
// from the MDN page, linked in the addendum
// at the end of this page.
//
// It demonstrates the usage with the
// 'visibilitychange'-event when the user
// could close your web app.
document.addEventListener('visibilitychange', function logData() {
  if (document.visibilityState === 'hidden') {
    navigator.sendBeacon('/log', analyticsData);
  }
});

क्या अलग है

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

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

अपने वेब ऐप को उत्तरोत्तर उन्नत करें

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