지연된 탐색 줄이기
사용자가 페이지나 앱을 닫을 때 제출되지 않은 분석 또는 기타 데이터가 있는 경우가 많습니다. 데이터 손실을 방지하기 위해 일부 사이트에서는 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()
가 웹 플랫폼에서 삭제될 예정입니다. 브라우저 공급업체는 삭제에 동의하지만 시간이 걸립니다. 최악의 사용 사례 중 하나를 지원 중단하는 것이 모든 사용자의 사용자 환경을 개선하는 첫 번째 단계입니다.