"sendBeacon"이란 무엇입니까?
프로그레시브 웹 앱과 같이 클라이언트에서 요청을 할 때 사용하는 두 가지 옵션인 XMLHttpRequest 또는 최신 "가져오기"를 알고 있을 것입니다. 그러나 분석 데이터와 같은 매우 작은 데이터 청크를 전송하도록 특별히 설계된 세 번째 옵션이 있다는 것을 알고 계셨습니까? "내비게이터" 개체에서 최신 브라우저에서 사용할 수 있는 "sendBeacon"이라는 기능입니다.
"sendBeacon" 사용 방법
작은 데이터 청크에 대해 특별히 제작된 이 요청 기능을 사용하는 것은 정말 간단합니다. "내비게이터"와 내비게이터의 "sendBeacon" 기능을 모두 사용할 수 있는 한 보낼 페이로드와 URL을 제공하기만 하면 됩니다.
다음 유형의 데이터를 보낼 수 있습니다.
- 배열 버퍼
- 배열버퍼뷰
- 얼룩
- DOMString
- 양식 데이터
- URL검색 매개변수
"sendBeacon"의 모든 호출은 지정된 끝점에 POST 요청을 전송합니다.
async function track(payload: TrackPayload){
// We're using 'optional property access'
// for a simple and clean implementation.
//
// You could of course also use nested if(){ ... }.
await navigator?.sendBeacon?.('/track', payload);
}
// The following example is taken directly
// from the MDN page, linked in the addendum
// at the end of this page.
//
// It demonstrates the usage with the
// 'visibilitychange'-event when the user
// could close your web app.
document.addEventListener('visibilitychange', function logData() {
if (document.visibilityState === 'hidden') {
navigator.sendBeacon('/log', analyticsData);
}
});
다른 점
"sendBeacon"의 주요 이점은 요청이 실제로 에이전트에 의해 대기열에 있다는 것입니다. 즉, 현재 클라이언트가 로드된 브라우저를 의미합니다. 네트워크 연결을 사용할 수 있는 한 데이터가 전송됩니다. 사용할 수 있는 데이터가 없거나 사용자가 웹 앱을 닫는 경우(요청이 전송되기 전에) 브라우저는 결국 요청이 전송되도록 보장합니다.
다른 일반적인 요청 기능은 사용자가 웹 앱을 닫을 때(예를 들어 탭을 닫음으로써) 요청이 전송될 것이라고 보장하지 않습니다. "sendBeacon"은 또한 완전히 비동기식이며 사용자의 페이지 기록에 대한 분석 데이터를 계속 전송하면서 웹 앱의 다른 페이지로 이동할 때 지연을 도입하지 않습니다.
웹 앱을 점진적으로 향상
분석 데이터에 대한 사용자 지정 엔드포인트가 있는 경우 이 새로운 API를 반드시 사용해 보십시오. 사용자가 API를 지원하지 않는 브라우저에서 웹 앱을 호출할 수 있다는 점을 명심하십시오(이는 가능성이 거의 없음). 따라서 사용하기 전에 지원 여부를 간단히 확인하여 앱을 점진적으로 개선할 수 있습니다.
