Beacon API 소개

키 테이크 아웃

Beacon API는 웹 개발자가 분석 또는 진단과 같은 소량의 데이터를 서버로 다시 보낼 수있는 솔루션을 제공합니다. 현재 페이지가 언로드되는 동안, 잠재적 인 지연 또는 귀중한 정보 손실 문제를 해결하는 동안 <.> Beacon API는 네비게이터 객체에 연결된 하나의 메소드 인 SendBeacon으로 구성됩니다. 데이터를 제출하려면 URL의 두 매개 변수와 제출할 데이터가 필요합니다. 데이터는 HTTP 사후 요청을 통해 제출되며 ArrayBufferView, Blob, Domstring 또는 FormData 객체로 보낼 수 있습니다. Beacon API는 Chrome, Firefox 및 Opera와 같은 주요 데스크탑 브라우저에서 지원하지만 IE 및 Safari의 최신 버전에는 제공되지 않습니다. 지원이없는 브라우저의 경우 개발자는 기능 감지 및 페이지 언로드에 데이터를 제출하는 오래된 방법으로의 기능 감지 및 폴백을 사용할 수 있습니다.

Beacon API를 사용하면 웹 개발자가 현재 페이지가 언로드되는 동안 서버로 비동기로 다시 분석 또는 진단 데이터와 같은 소량의 데이터를 쉽게 보낼 수 있습니다. 이 기사에서는 Beacon API가 해결하는 몇 가지 문제를 살펴보고 API 사용 방법을 보여 드리겠습니다. Beacon API가 없으면 사용자가 페이지에서 멀리 떨어질 때 데이터를 서버로 다시 전송하는 것이 보이는 것보다 까다로울 수 있습니다. 사용자의 사이트 경험에 해를 끼칠 수 있으므로 다음 페이지를로드하지 않기를 원하지 않습니다. 그러나 사이트를 개선하는 데 도움이되는 귀중한 정보를 잃고 싶지 않습니다. 데이터를 너무 일찍 보내면

가 분수를 더 오래 기다렸다면 캡처했을 수있는 귀중한 정보가 느슨해 질 수 있습니다. > 는 문서 언로드가 다음과 같이 보일 수 있으므로 분석 데이터를 서버로 보낸다.

언로드 이벤트 핸들러는 AJAX 요청을 통해 데이터를 제출합니다. 페이지 언로드 이벤트가 발사되면 데이터가 캡처 앤 알리 틱스 데이터 기능을 통해 캡처되고 AJAX 요청을 통해 서버로 전송됩니다. 참고 xhr.open의 세 번째 매개 변수는 false이며 ajax 요청이

synchronous

임을 나타냅니다. 브라우저는 일반적으로 언로드 핸들러 중 비동기 요청을 무시하므로 AJAX 요청

는

가 동기화되어 있습니다. 동기식이므로 브라우저는

전에 요청이 완료 될 때까지 기다려야합니다. 문서를 언로드하고 다음 페이지를 표시 할 수 있습니다. 이 여분의 대기 시간은 성능 저하에 대한 인식으로 이어질 수 있습니다. 동기식 Ajax 요청 대신 사용되는 다른 기술에는 언로드 핸들러에서 이미지 객체의 SRC를 설정하는 것이 포함됩니다. 브라우저는 문서를 내리기 전에 이미지가로드 될 때까지 기다립니다.이 기간 동안 데이터를 서버에 제출할 수 있습니다. 그러나 이것은 여전히 ​​동일한 문제가 있습니다. 이번에는 이미지에 대한 요청이 완료되는 동안 현재 문서의 언로드가 지연되어 성능 저하에 대한 인식으로 이어질 수 있습니다.

. Beacon API는 이러한 문제를 해결하기 위해 만들어졌습니다. 개발자가 소량의 데이터를 웹 서버

asynchronously로 보낼 수있는 인터페이스를 정의합니다. 네비게이터 객체에 연결된 하나의 방법 인 SendBeacon으로 구성됩니다. SendBeacon은 데이터를 제출하려는 URL과 제출할 데이터의 두 매개 변수를 가져옵니다. 데이터는 HTTP 사후 요청을 통해 제출되며 ArrayBufferView, Blob, Domstring 또는 FormData 객체로 보낼 수 있습니다. 브라우저는 요청을 대기하고“최대한 빨리 사용 가능한 기회로는 다른 네트워크 트래픽에 비해 데이터의 전송을 우선시 할 수 있습니다.”라고 보냅니다. (W3C 사양에 따라). 데이터가 서버에 성공적으로 제출되거나 그렇지 않으면 SendBeacon이 True를 반환합니다. Navigator의 지원. SendBeacon은 주요 데스크탑 브라우저에서 괜찮습니다. 현재 버전의 Chrome, Firefox 및 Opera에서 지원되지만 IE 및 Safari의 최신 버전에서는 지원하지 않습니다. 가용성을 보장 할 수 없으므로 페이지 언로드에 데이터를 제출하는 기존 방법 중 하나에 기능 감지 및 폴백을 사용하는 것이 가장 좋습니다. Beacon API가 작동하는 것을보기에 사용할 수있는 작은 샘플 앱을 만들었습니다. 서버를 실행하려면 Node.js가 설치되어 있어야합니다. 샘플을 실행하려면 :

zip 파일을 선택한 폴더로 다운로드하여 압축 해제하십시오. Beaconapi 터미널을 열고 1 단계에서 만든 폴더로 디렉토리를 변경하십시오. CD/PATH/TO/BEACONAPI

<span>window.addEventListener('unload', function(event) {
</span>  <span>var xhr = new XMLHttpRequest(),
</span>    data <span>= captureAnalyticsData(event);
</span>
  xhr<span>.open('post', '/log', false);
</span>  xhr<span>.send(data);
</span><span>});
</span>
<span>function captureAnalyticsData(event) {
</span>  <span>return 'sample data';
</span><span>}</span>

여전히 터미널에 있는데 NPM 설치를 입력하고 를 누릅니다. 이제 Debug = Beaconapi_demo ./bin/www를 입력하고 를 누릅니다 Beacon API를 지원하는 브라우저를 엽니 다.

당신은 다음과 같이 보이는 페이지를 볼 수 있어야합니다 :

이 예에서는 Chrome을 사용하고 있습니다. 개발 도구를 열고 네트워크 탭으로 전환 한 다음 Preserve Log Checkbox를 체크하십시오. 다른 요청 만 볼 수 있도록 결과를 필터링하십시오. 이제 언로드 버튼을 클릭하면 DEV 도구에 대한 /로그인 요청이 표시됩니다.

<span>window.addEventListener('unload', function(event) {
</span>  <span>var data = captureAnalyticsData(event);
</span>  <span>navigator.sendBeacon('/log', data);
</span><span>});</span>

결론 이 기사에서는 Beacon API를 소개했습니다. 매우 작은 API이지만 특정 틈새 시장을 채 웁니다. 잘만되면 당신은 그것을 잘 활용할 수 있기를 바랍니다.

Beacon Api

에 대한 자주 묻는 질문 (FAQ) Beacon API의 주요 기능은 무엇입니까? Beacon API는 웹 응용 프로그램이 사용자의 브라우저에서 서버로 데이터를 효율적이고 비 블로킹 방식으로 보낼 수있는 웹 API입니다. 이 API는 사용자의 탐색 경험에 영향을 미치지 않고 보낼 수있는 분석 데이터를 전송하는 데 특히 유용합니다. Beacon API는 사용자가 페이지에서 벗어나거나 브라우저를 닫더라도 데이터가 전송되도록합니다.

Beacon API가 Ajax와 어떻게 다릅니 까? API는 클라이언트에서 서버로 데이터를 보내는 데 사용되며 사용 사례와 동작이 다릅니다. Ajax는 일반적으로 서버에서 데이터를 가져오고 다시로드하지 않고 웹 페이지를 업데이트하는 데 사용됩니다. 반면, Beacon API는 사용자의 브라우징 경험을 차단하지 않고 서버, 특히 분석 데이터로 데이터를 전송하는 데 사용됩니다. Ajax와 달리 Beacon API는 사용자가 페이지에서 벗어나거나 브라우저를 닫더라도 데이터가 전송되도록합니다.

내 웹 애플리케이션에서 Beacon API를 어떻게 사용할 수 있습니까?

웹 애플리케이션에서 Beacon API를 사용하려면 Navigator.SendBeacon () 메소드를 사용할 수 있습니다. 이 메소드는 두 가지 인수, 즉 URL을 보내 데이터를 보내고 보내야 할 데이터를 사용합니다. 데이터는 FormData 객체, Blob, ArrayBufferView 또는 UrlSearchParams 객체 일 수 있습니다. 예는 다음과 같습니다.

var data = new formdata (); navigator.sendbeacon ( '/api/endpoint', data ); Beacon API를 사용하면 어떤 이점이 있습니까?
Beacon API는 웹 애플리케이션에 몇 가지 이점을 제공합니다. 먼저 차단하지 않은 방식으로 서버로 데이터를 보낼 수 있으므로 사용자의 탐색 경험에 영향을 미치지 않습니다. 둘째, 사용자가 페이지에서 벗어나거나 브라우저를 닫더라도 데이터가 전송되도록합니다. 따라서 데이터 손실을 위험에 빠뜨리지 않고 사용자 세션이 끝날 때 보낼 수있는 분석 데이터를 전송하는 데 이상적입니다. Beacon API 사용에 대한 제한 사항이나 단점이 있습니까? Beacon API의 제한은 서버가 데이터를 성공적으로 수신했는지 여부에 대한 피드백을 제공하지 않는다는 것입니다. 즉, 영수증 확인이 필요한 중요한 데이터에는 사용할 수 없습니다. 또한 Beacon API는 모든 브라우저에서 지원되지 않으므로 지원하지 않는 브라우저에 대한 낙하를 제공해야 할 수도 있습니다.

Beacon API가 어떻게 실패합니까?

Beacon API는 서버에서 데이터를 성공적으로 수신했는지 여부에 대한 피드백을 제공하지 않습니다. 예를 들어 네트워크 문제로 인해 데이터를 전송할 수없는 경우 API는 데이터를 다시 보내지 않습니다. 그렇기 때문에 영수증 확인이 필요없는 비 임계 데이터에 Beacon API를 사용하는 것이 좋습니다. Beacon API를 사용하여 다른 도메인으로 데이터를 보내려면 Beacon API를 사용하여 다른 도메인으로 데이터를 보낼 수 있습니다. 그러나 서버는 CORS (Cross-Origin 리소스 공유)를 지원해야하며 도메인에서 크로스 오리핀 요청을 수락하도록 구성되어야합니다.

모든 브라우저에서 Beacon API가 지원됩니까? Beacon API는 Chrome, Firefox, Safari 및 Edge를 포함한 대부분의 최신 브라우저에서 지원됩니다. 그러나 인터넷 익스플로러에서는 지원되지 않습니다. 내가 사용할 수있는 웹 사이트에서 현재 브라우저 지원을 확인할 수 있습니다.

Beacon API와 함께 많은 양의 데이터를 보낼 수 있습니까?

Beacon API는 소량의 데이터를 보내도록 설계되었습니다. 분석 데이터와 같은. 보낼 수있는 데이터 양에는 어려운 제한이 없지만 많은 양의 데이터를 보내면 사용자의 네트워크 성능에 영향을 줄 수 있습니다. 따라서 소량의 비 임계 데이터를 전송하기 위해 Beacon API를 사용하는 것이 좋습니다.

Beacon 요청을 취소 할 수 있습니까?
아니요. 취소. Beacon API는 Beacon 요청을 취소하거나 취소하는 방법을 제공하지 않습니다. 이것이 영수증 확인이 필요없는 비 임계 데이터에 Beacon API를 사용하는 것이 권장되는 또 다른 이유입니다.

위 내용은 Beacon API 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!