कभी-कभी जवाब के लिए इंतज़ार किए बिना ही किसी वेब पेज से वेब सर्वर पर कुछ डेटा भेजना आसान होता है. उदाहरण के लिए, उपयोगकर्ता के किसी पेज को छोड़ने से पहले, हो सकता है कि हम आंकड़े या डाइग्नोस्टिक डेटा सबमिट करना चाहें.
आम तौर पर, unload इवेंट को सुनने के लिए एग्ज़िट किए जाने से पहले डेटा भेजने पर,
क्योंकि अनुरोध भेजने से पहले, कभी भी अनुरोध भेजने पर अधूरा डेटा मिल जाएगा
- उदाहरण के लिए, हो सकता है कि हमसे एग्ज़िट हुआ क्लिक छूट गया हो.
चेतावनी यह थी कि अनलोड हैंडलर में भेजे गए अनुरोधों को सिंक्रोनस होना ज़रूरी था, क्योंकि ज़्यादातर ब्राउज़र आम तौर पर अनलोड हैंडलर में किए गए एसिंक्रोनस XMLHttpRequests को अनदेखा करते हैं.
इस तरीके से नेविगेशन धीमा हो जाता है, क्योंकि उपयोगकर्ता को
नया पेज रेंडर होने से पहले, अनुरोध के वापस आने का इंतज़ार करना पड़ता है.
Beacon API आपको किसी ब्राउज़र से वेब सर्वर पर, छोटे डेटा पेलोड वाले एसिंक्रोनस तरीके से एचटीटीपी अनुरोध भेजने की सुविधा देता है. इससे पेज के अनलोड इवेंट में दूसरे कोड को देर किए बिना या अगले पेज नेविगेशन की परफ़ॉर्मेंस पर कोई असर नहीं पड़ता.
navigator.sendBeacon() वाला तरीका, ब्राउज़र से डेटा को जल्द से जल्द ट्रांसमिट करने के लिए, डेटा को एक सूची में जोड़कर रखता है. हालांकि, इससे नेविगेशन की प्रोसेस धीमी नहीं होती.
अगर ब्राउज़र डेटा को ट्रांसफ़र के लिए सूची में लगा देता है, तो यह true दिखाता है. ऐसा न होने पर, यह false दिखाता है.
मान लें कि हमारे पास इस पते पर, हमारे पेज से बीकन डेटा पाने के लिए एक सर्वर एंडपॉइंट उपलब्ध है:
https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop
अगर हम pagehide इवेंट हैंडलर में sendBeacon() तरीका जोड़ते हैं, तो
जब उपयोगकर्ता पेज से बाहर जाएगा, तब एंडपॉइंट को डेटा मिलेगा:
अगर Chrome DevTools में नेटवर्क टैब की जांच लॉग सुरक्षित रखें चेकबॉक्स पर सेट की गई है, तो पेज से बाहर नेविगेट करने पर आपको ऊपर दिए गए एंडपॉइंट पर एचटीटीपी पोस्ट करने का एक अनुरोध दिखेगा.
इसके अलावा, पुट्सरीक जांच पेज पर जाकर भी देखा जा सकता है कि बीकन का डेटा मिला है या नहीं.
एक पॉलीमर कस्टम एलिमेंट भी मौजूद है, जो आपको बीकन डेटा - <beacon-send> भेजने की सुविधा देता है. इसे ebidel.github.io/beacon-send पर देखें.