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