לפעמים שימושי לשלוח נתונים מסוימים מדף אינטרנט לשרת אינטרנט בלי לחכות לתשובה. לדוגמה, יכול להיות שתרצו לשלוח נתוני ניתוח או נתוני אבחון לפני שהמשתמש יוצא מדף.
בדרך כלל, שליחת נתונים לפני היציאה מחייבת הקשבה לאירוע unload, כי שליחת הבקשה בשלב מוקדם יותר תגרום לנתונים חלקיים – למשל, יכול להיות שפספסנו קליק שהתרחש ממש לפני היציאה.
החיסרון היה שהבקשות שנשלחות במטפל באירוע הטעינה החוזרת צריכות להיות סינכרוניות, כי רוב הדפדפנים בדרך כלל מתעלמים מבקשות XMLHttpRequest אסינכרניות שנשלחות במטפל באירוע הטעינה החוזרת.
הגישה הזו מאטה את הניווט, כי המשתמש צריך להמתין עד שהבקשה תוחזר כדי שאפשר יהיה להציג דף חדש.
Beacon API פותר את הבעיה הזו על ידי שליחת בקשות HTTP עם עומסי נתונים קטנים מדפדפן לשרת אינטרנט באופן אסינכררוני, בלי לעכב קוד אחר באירוע הטעינה מחדש של הדף או להשפיע על הביצועים של הניווט לדף הבא.
השיטה navigator.sendBeacon() מוסיפה את הנתונים לתור כדי שהדפדפן ישלח אותם בהקדם האפשרי, אבל היא לא מאטה את הניווט.
הפונקציה מחזירה את הערך true אם הדפדפן מצליח להוסיף את הנתונים להעברה לתור. אחרת, הפונקציה מחזירה את הערך false.
נניח שיש לנו נקודת קצה של שרת שזמינה לקבלת נתוני משואות מהדף שלנו בכתובת הזו:
https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop
אם נוסיף את השיטה sendBeacon() למטפל באירועים pagehide, נקודת הקצה תקבל את הנתונים כשהמשתמש מנווט אל מחוץ לדף:
אם בודקים את הכרטיסייה 'רשת' בכלי הפיתוח ל-Chrome כשתיבת הסימון שימור יומנים מסומנת, אפשר לראות בקשת HTTP POST שנשלחת לנקודת הקצה שלמעלה כשעוברים מדף אחר.
לחלופין, אפשר להיכנס לדף PutsReq inspect כדי לבדוק אם נתוני ה-beacon התקבלו.
יש גם רכיב מותאם אישית של Polymer שמאפשר לשלוח נתוני משואות – <beacon-send>. אפשר למצוא אותו בכתובת ebidel.github.io/beacon-send.