동기 XMLHttpRequest()에서 페이지 닫기 개선

지연된 탐색 줄이기

Joe Medley
Joe Medley

사용자가 페이지나 앱을 닫을 때 제출되지 않은 분석 또는 기타 데이터가 있는 경우가 많습니다. 데이터 손실을 방지하기 위해 일부 사이트에서는 XMLHttpRequest()에 대한 동기식 호출을 사용하여 데이터가 서버에 전달될 때까지 페이지 또는 앱을 열어 둡니다. 데이터를 저장하는 더 나은 방법이 있을 뿐만 아니라 이 기법은 페이지 닫기를 최대 몇 초까지 지연시켜 사용자 환경을 저하시킵니다.

이러한 관행은 바뀌어야 하며 브라우저가 이에 대응하고 있습니다. XMLHttpRequest() 사양은 이미 지원 중단 및 삭제될 예정입니다. Chrome 80에서는 여러 이벤트 핸들러 내에서 동기식 호출을 허용하지 않음으로써 첫 번째 단계를 수행합니다. 특히 beforeunload, unload, pagehide, visibilitychange가 닫기에서 실행될 때 WebKit에서도 최근에 동일한 동작 변경사항을 구현하는 커밋을 출시했습니다.

이 도움말에서는 사이트를 업데이트하는 데 시간이 필요한 사용자를 위한 옵션을 간단히 설명하고 XMLHttpRequest()의 대안을 간략히 설명합니다.

Chrome은 XMLHttpRequest()를 완전히 중단하고 싶지 않으므로 몇 가지 임시 선택 해제 옵션을 제공합니다. 인터넷에 있는 사이트의 경우 출처 무료 체험판을 사용할 수 있습니다. 이렇게 하면 동기식 XMLHttpRequest() 호출을 사용 설정하는 출처별 토큰이 페이지 헤더에 추가됩니다. 이 옵션은 Chrome 89가 출시되기 직전인 2021년 3월에 종료됩니다. Enterprise Chrome 고객은 동시에 종료되는 AllowSyncXHRInPageDismissal 정책 플래그도 사용할 수 있습니다.

대안

데이터를 서버로 다시 전송하는 방법과 관계없이 페이지가 언로드될 때까지 기다렸다가 모든 데이터를 한 번에 전송하지 않는 것이 좋습니다. 나쁜 사용자 환경을 만드는 것 외에도 unload는 최신 브라우저에서 안정적이지 않으며 문제가 발생하면 데이터가 손실될 위험이 있습니다. 특히 로드 취소 이벤트는 unload 이벤트가 실행되지 않고도 모바일 운영체제에서 탭이나 브라우저를 닫는 방법이 많기 때문에 모바일 브라우저에서 실행되지 않는 경우가 많습니다. XMLHttpRequest()에서는 작은 페이로드를 사용하는 것이 선택사항이었습니다. 이제는 필수사항입니다. 두 가지 대안 모두 사양에 따라 컨텍스트당 업로드 한도가 64KB입니다.

연결 유지 가져오기

Fetch API는 서버 상호작용을 처리하는 강력한 수단과 여러 플랫폼 API에서 사용할 수 있는 일관된 인터페이스를 제공합니다. 옵션 중에는 요청을 실행한 페이지가 열려 있는지 여부와 관계없이 요청이 계속 실행되도록 하는 keepalive가 있습니다.

window.addEventListener('unload', {
  fetch
('/siteAnalytics', {
    method
: 'POST',
    body
: getStatistics(),
    keepalive
: true
 
});
}

fetch() 메서드는 서버로 전송되는 항목을 더 효과적으로 제어할 수 있다는 장점이 있습니다. 이 예에서는 fetch()Response 객체로 확인되는 프로미스도 반환한다는 점을 보여주지 않습니다. 페이지의 언로드를 방해하지 않으려고 했으므로 아무것도 하지 않았습니다.

SendBeacon()

SendBeacon()는 실제로 내부적으로 Fetch API를 사용하므로 동일한 64KB 페이로드 제한이 적용되고 페이지가 언로드된 후에도 요청이 계속 실행됩니다. 이 방법의 주요 이점은 단순성입니다. 다음과 같이 한 줄의 코드로 데이터를 제출할 수 있습니다.

window.addEventListener('unload', {
  navigator
.sendBeacon('/siteAnalytics', getStatistics());
}

결론

브라우저에서 fetch()의 사용 가능 여부가 확대됨에 따라 언젠가는 XMLHttpRequest()가 웹 플랫폼에서 삭제될 수 있습니다. 브라우저 공급업체는 삭제해야 한다는 데 동의하지만 시간이 걸립니다. 가장 나쁜 사용 사례 중 하나를 지원 중단하는 것이 모든 사용자의 사용자 환경을 개선하는 첫 번째 단계입니다.

사진: 매튜 해밀턴(Unsplash 제공)