[WebAPI] Beacon API

Beacon API được sử dụng để gửi một async, non-blocking request đến web server và request này sẽ không có response, có nghĩa là một đi không trở lại đó.

Nghe qua thì có vẻ như là giống với với XMLHttpRequest hay Fetch API nhưng chỉ khác là không có response, ngoài ra browser sẽ luôn đảm bảo request từ Beacon API luôn được gửi đi trong một số trường hợp ví dụ như khi page unload.

Với những đặc điểm trên thì Beacon API được sẽ dụng để gửi analytics data, monitor, diagnostics client app mà không làm ảnh hưởng đến app performance.

Navigator: sendBeacon method

Sử dụng navigate.sendBeacon() để gửi một request đến web server, sendBeacon sẽ được queue và thực sự gửi đi khi browser xong những request quan trọng khác và browser sẽ đảm bảo răng request này luôn được gửi đi.

Ví dụ:

Gửi tracking event khi page unload

document.addEventListener("unload", function logData() {
    navigator.sendBeacon("/log", analyticsData);
});

Track tất cả các thẻ có tag data-tracking

function callback(e) {
   if(e.getAttribute('data-tracking')){
      sendBeacon('/clicks',e.getAttribute('data-tracking')
   }
}
document.addEventListener('click', callback, false);

That's it, từ nay khi tracking event hay monitor, diagnostics client app đừng sử dụng Fetch API hay XMLHttp request nữa nhé.

Tham khảo

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon

https://developer.mozilla.org/en-US/docs/Web/API/Beacon_API