Chrome 39에서 비콘 데이터 전송

Ewa Gasperowicz

때로는 응답을 기다릴 필요 없이 웹페이지에서 웹 서버로 일부 데이터를 보내는 것이 편리합니다. 예를 들어 사용자가 페이지를 종료하기 전에 분석 또는 진단 데이터를 제출할 수 있습니다.

일반적으로 이탈 전에 데이터를 전송하면 unload 이벤트 수신이 수반됩니다.요청을 언제든지 일찍 전송하면 데이터가 불완전하기 때문입니다. 예를 들어 이탈 직전에 발생한 클릭을 놓쳤을 수도 있습니다. 주의할 점은 로드 취소 핸들러에서 전송된 요청은 동기식이어야 한다는 것입니다. 대부분의 브라우저는 일반적으로 로드 취소 핸들러에서 작성된 비동기 XMLHttpRequest를 무시하기 때문입니다. 이 방법은 새 페이지를 렌더링하기 전에 사용자가 요청이 돌아올 때까지 기다려야 하므로 탐색 속도가 느려집니다.

Beacon API를 사용하면 페이지의 로드 취소 이벤트에서 다른 코드를 지연시키거나 다음 페이지 탐색 성능에 영향을 미치지 않고 작은 데이터 페이로드가 포함된 HTTP 요청을 브라우저에서 웹 서버로 비동기식으로 전송할 수 있습니다.

navigator.sendBeacon() 메서드는 최대한 빨리 브라우저에서 전송할 데이터를 큐에 추가하지만 탐색 속도를 늦추지 않습니다. 브라우저가 전송할 데이터를 대기열에 성공적으로 추가할 수 있으면 true를 반환합니다. 그렇지 않으면 false를 반환합니다.

다음 주소에 있는 페이지에서 비콘 데이터를 수신하는 데 사용할 수 있는 서버 엔드포인트가 있다고 가정해 보겠습니다.

https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop

pagehide 이벤트 핸들러에 sendBeacon() 메서드를 추가하면 사용자가 페이지에서 나갈 때 엔드포인트에서 데이터를 수신합니다.

Preserve logs 체크박스를 선택하여 Chrome DevTools의 네트워크 탭을 검사하면 페이지에서 벗어날 때 위 엔드포인트로 전송되는 HTTP POST 요청이 표시됩니다.

또는 PutsReq 검사 페이지를 방문하여 비콘 데이터가 수신되었는지 확인할 수 있습니다.

비콘 데이터를 전송할 수 있는 Polymer 맞춤 요소(<beacon-send>)도 있습니다. ebidel.github.io/beacon-send에서 이를 확인해 보세요.