답장을 기다릴 필요 없이 웹페이지에서 웹 서버로 일부 데이터를 전송하는 것이 편리한 경우가 있습니다. 예를 들어 사용자가 페이지를 종료하기 전에 분석 또는 진단 데이터를 제출할 수 있습니다.
일반적으로 종료 전에 데이터를 전송하려면 unload 이벤트를 수신 대기해야 합니다.그보다 일찍 요청을 전송하면 데이터가 불완전해질 수 있기 때문입니다. 예를 들어 종료 직전에 발생한 클릭을 놓칠 수 있습니다.
단점은 대부분의 브라우저가 일반적으로 언로드 핸들러에서 이루어진 비동기 XMLHttpRequest를 무시하므로 언로드 핸들러에서 전송된 요청이 동기식이어야 한다는 점입니다.
이 접근 방식은 새 페이지를 렌더링하기 전에 요청이 다시 수신될 때까지 사용자가 기다려야 하므로 탐색 속도가 느려집니다.
Beacon API는 페이지의 언로드 이벤트에서 다른 코드를 지연시키거나 다음 페이지 탐색의 성능에 영향을 주지 않고도 작은 데이터 페이로드가 포함된 HTTP 요청을 브라우저에서 웹 서버로 비동기식으로 전송할 수 있도록 하여 이 문제를 해결합니다.
navigator.sendBeacon() 메서드는 브라우저에서 최대한 빨리 전송할 데이터를 큐에 추가하지만 탐색 속도를 느리게 하지는 않습니다.
브라우저가 전송할 데이터를 성공적으로 대기열에 추가할 수 있으면 true를 반환합니다. 그렇지 않으면 false을 반환합니다.
다음 주소의 페이지에서 비콘 데이터를 수신할 수 있는 서버 엔드포인트가 있다고 가정해 보겠습니다.
https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop
pagehide 이벤트 핸들러에 sendBeacon() 메서드를 추가하면 사용자가 페이지에서 벗어나면 엔드포인트에서 데이터를 수신합니다.
로그 보존 체크박스가 선택된 상태에서 Chrome DevTools의 네트워크 탭을 검사하면 페이지에서 나가면 위의 엔드포인트로 전송되는 HTTP POST 요청이 표시됩니다.
또는 PutsReq 검사 페이지를 방문하여 비콘 데이터가 수신되었는지 확인할 수 있습니다.
비콘 데이터를 전송할 수 있는 Polymer 맞춤 요소인 <beacon-send>도 있습니다. ebidel.github.io/beacon-send에서 확인해 보세요.