Beacon API은 상대적으로 알 수 없고 경량급이며 효율적인 방식으로 웹 활동을 서버에 기록하는 데 사용된다.이것은 개발자가 브라우저에서 서버에 소량의 데이터를 보내는 데 도움을 주는 자바스크립트 API입니다. 예를 들어 정보를 분석하거나 추적하거나 디버깅하거나 진단하는 것입니다.
본고에서 우리는 Beacon API을 이해하고 이를 이용하여 일부 사용자 활동을 서버에 기록할 것이다.좋아해서 알았으면 좋겠어.

Beacon Web API

Beacon API은 비동기적이고 비차단 요청을 웹 서버로 조정합니다.신호 요청은 몇 가지 특징이 있는데,

커서 요청에 응답할 필요가 없습니다.이것은 클라이언트(브라우저)가 서버 응답을 기대하는 일반적인 XHR 또는 fetch 요청과 크게 다르다.

커서는 브라우저를 닫을 때에도 페이지를 마운트 해제하기 전에 시작할 것을 요청합니다.

커서 요청이 완료되었습니다. 요청을 막을 필요가 없습니다(예를 들어 XHR).

커서는 HTTP POST 방법을 사용할 것을 요청합니다.

일부 특징, 예를 들어 non-blocking은 response에 대한 기대가 없기 때문에 커서 요청이 페이지에서 마운트 해제될 때 매우 유용하고 서버에 데이터를 보낼 수 있다(예를 들어 브라우저 닫기, 페이지 내비게이션 등).

Beacon API는 어떻게 사용합니까?

Beacon API는 광범위한 브라우저 지원을 제공합니다.그것은 most of the browsers에 적용되지만 인터넷 익스플로러의 이전 버전은 제외됩니다.
안전을 위해서 우리는 이 간단한 검사를 사용하여 브라우저 지원을 테스트할 수 있습니다.

if (navigator.sendBeacon) {
  // Initiate a beacon request
} else {
  // May be, fallback to XHR or fetch?
}

Navigator.sendBeacon() 방법으로 서버에 커서 요청을 보냅니다.이 방법은 두 개의 매개 변수, 서버의 URL과 데이터를 채택한다.sendBeacon() 방법은 부울 값을 되돌려줍니다.대기열에 올바르게 넣으려면 true을 되돌려주십시오. 그렇지 않으면 false을 되돌려줍니다.

if (navigator.sendBeacon) {
  navigator.sendBeacon('/log-tracking', data);
} else {
  // May be, fallback to XHR or fetch?
}

data 방법의 sendBeacon() 매개 변수는 선택할 수 있으며 그 유형은 ArrayBufferView, Blob, DOMString 또는 FormData이다.FormData을 사용하여 우리의 예시를 위해 데이터를 만듭니다.

function sendAnalytics(msg) {
  if (navigator.sendBeacon) {
    let data = new FormData();
    data.append('start', startTime);
    data.append('end', performance.now());
    data.append('msg', msg);

    navigator.sendBeacon('/log-tracking', data);
  } else {
    // May be, fallback to XHR or fetch?
  }
}

위의 예시에서 우리는 사용자가 응용 프로그램에 쓴 start과 end의 시간을 보냈다.사용자가 실행할 활동 (예를 들어 단추를 누르거나 페이지 부분으로 스크롤하는 등) 을 포착하는 추적 msg도 보냈다.unload 및/또는 beforeunload 이벤트에 대한 처리 프로그램을 지정하고 sendAnalytics() 방법을 호출할 수 있습니다.

window.addEventListener('unload', function() {
  sendAnalytics(msg);
});

우리가 URL data을 사용하여 /log-tracking을 보낼 때 서버 측 코드는 어느 곳에서든 이 정보를 기록하고 이를 분석 목적으로 사용할 수 있다.
다음은 예시 express 서버 코드입니다. 이 정보를 컨트롤러에 기록합니다.우리는 파일 시스템, 데이터베이스 등에 기록할 수 있는 충분한 창의력을 가지고 있습니다. 서버는 여기에서 어떠한 응답도 돌아오지 않습니다.

app.post('/log-tracking', function(req, res) {
  console.log('**** Tracked. Now logging ****');

  let startTime = req.body.start;
  let endTime = req.body.end;
  let trackInfo = req.body.msg;

  let logMsg = '';
  let time = (endTime - startTime) / 1000;
  logMsg = `${time.toFixed(2)} seconds`;

  if (time > 60) {
      time = time / 60;
      logMsg = `${time.toFixed(2)} minutes`;
  }
  console.log('In Session for: ', logMsg);
  console.log('Tracking info: ', trackInfo);
});

프레젠테이션

다음은 Beacon 요청의 작업 원리를 보여주는 빠른 프레젠테이션(12초)이다.여기 버튼이 두 개 있어요.서버에 임시 커서 요청을 보내는 단추가 있고, 브라우저 unload 이벤트를 모의하는 단추가 있습니다.
아래에서 보듯이 서버 컨트롤러는 예시 메시지를 사용하여 시간 정보를 기록합니다.사용자가 브라우저를 닫으면 정보가 기록됩니다.
개발자 도구 (네트워크 옵션 카드) 에서 커서 요청을 보면, 서버가 응답을 보내지 않았기 때문에 요청이 pending인 것을 볼 수 있습니다.이것이 바로 우리가 브라우저 마운트 해제 이벤트에서 커서 요청을 보낼 때 더 좋은 용도로 사용할 수 있는 이유입니다.

또 다른 주의사항은 커서 요청이 XHR 요청이 아니라는 것이다.위에서 All 옵션을 선택하여 이 요청을 추적할 수 있습니다.

소스 코드

본문과 프레젠테이션에 사용된 모든 소스 코드는 아래에 언급된 GitHub repo에 있습니다.마음대로 갈라서 수정하고 사용하세요.스타로 당신의 지지를 표시합니다(⭐) 니가 이 프로젝트를 좋아하면여러분의 관심을 환영합니다.🤝 GitHub에서 계속 연락 주세요.

아타파스 / 추적기 커서api

예제를 통해 Web Beacon API를 학습합니다.이 프로젝트를 시도하여 실천 탐색을 진행하다.

🔎 Tracker-Web Beacon API 데모

Beacon API은 비동기적이고 비차단 요청을 웹 서버로 조정합니다.신호 요청은 몇 가지 특징이 있는데,

커서 요청은 일반적으로 응답할 필요가 없습니다.이것은 클라이언트(브라우저)가 서버의 응답을 기대하는 일반적인 XHR이나fetch 요청과 크게 다르다.

커서는 브라우저를 닫을 때에도 페이지를 마운트 해제하기 전에 시작할 것을 요청합니다.

커서 요청이 완료될 때까지 실행되며 요청을 막을 필요가 없습니다(예를 들어 XMLHttpRequest).

커서는 HTTP POST 방법을 사용할 것을 요청합니다.

이 프레젠테이션은 간단한 메시지로 사용자가 응용 프로그램에 소비한 시간을 기록했다.

🚀 어떻게 실행합니까?

node.js이 설치되어 있는지 확인합니다.

클론 저장소

디렉토리를 클론 항목으로 변경합니다.

은 npm install 또는 yarn을 실행합니다.

에서 터미널(또는 명령 프롬프트)을 열고 명령 node app.js을 실행합니다.

액세스...

View on GitHub

주요 용례

두 가지 주요 용례가 있는데 Beacon API을 사용할 수 있다.

사용자 활동 추적 및 분석

사용자 활동 및 비헤이비어에 대한 분석 보고서를 캡처하여 전송할 수 있습니다.이러한 활동에는 다음이 포함될 수 있습니다.

사용자가 세션에 얼마나 걸립니까?

사용자가 사용하는 사용자 인터페이스 컨트롤은 무엇입니까?

에서 포획할 다른 종류의 원격 측정 정보

우리는 구글 분석과 같은 분석 도구와 서비스를 사용하기를 원할 수도 있지만, 우리 고객, 특히 기업 응용 프로그램과 편리하게 하기 어렵다.
분석과 사용자 활동 추적에 관한 또 다른 점은 이런 기능을 사용하기 전에 최종 사용자의 동의를 얻어야 한다는 것이다.

디버깅 및 진단

당신은 일찍이 이러한 상황을 겪은 적이 있습니까? 기능은 로컬에서 일하지만 고객 환경(생산 모델)에서 예상대로 일할 수 없습니다.이것은 전형적인 상황으로 Beacon API은 하루(또는 하룻밤)를 절약할 수 있다.
이 경량급 커서 요청을 논리적으로 보내서 유용한 추적 경로 정보를 기록하고 필요에 따라 디버깅할 수 있습니다.

커서 API 데이터 제한

Beacon API를 사용하여 서버에 전송할 수 있는 데이터에는 제한이 있습니다.그러나 이 제한은 모든 브라우저와 사용자 에이전트에서 통일되지 않습니다.
규범에 따라

The user agent must restrict the maximum data size to ensure that beacon requests are able to complete quickly and in a timely manner.

w3c의 beacon API specifications을 통독하세요.org에서 더 많은 정보를 얻을 수 있습니다.

총결산

어쨌든

커서 API는 브라우저에서 서버로 소량의 데이터를 보내는 경량급 API입니다.

커서 요청은 비동기 요청입니다.서버는 커서 요청에 대한 응답을 보내고 싶지 않습니다.

커서는 페이지를 마운트 해제하기 전에 시작할 것을 요청합니다.

우리는 이를 사용자 활동, 행위 분석과 생산 시 디버깅에 사용할 수 있다.

에는 사용자 활동, 행위 분석, 로그 작성을 위한 많은 도구가 있습니다.그러나 비용과 우리 기업 사용자들이 이 응용 프로그램에 대해 우호적이지 않기 때문에 그들은 많은 경우에 실행할 수 없다.

은 기초 지식을 더욱 잘 이해하기 위해 자바스크립트가 제공하는 기능을 이해하는 것도 중요하다.

Beacon API에 대한 자세한 내용은 여기를 참조하십시오.

Beacon API from MDN

오늘 새로운 것을 배웠으면 좋겠습니다. 그리고 가능한 한 빨리 Beacon API을 시도해 보세요.너도 좋아할 수도 있지만,

10 lesser-known Web APIs you may want to use

What exactly is JavaScript Tagged Template Literal?

Explain Me Like I am Five: What are ES6 Symbols?

만약 그것이 당신에게 유용하다면, 다른 사람에게도 전달될 수 있도록 좋아하거나 나누세요.
트위터에서 @me()에 댓글을 달거나 언제든지 팔로우할 수 있다.