사용자가 페이지나 앱을 닫을 때 제출되지 않은 애널리틱스 또는 기타 데이터가 있는 경우가 많습니다. 데이터 손실을 방지하기 위해 일부 사이트에서는 동기 호출을 XMLHttpRequest()에 사용하여 데이터가 서버에 전달될 때까지 페이지나 앱을 열어 둡니다. 데이터를 저장하는 더 나은 방법이 있을 뿐만 아니라 이 기술은 페이지 닫기를 최대 몇 초까지 지연시켜 사용자 환경을 저하시킵니다.
이러한 관행은 바뀌어야 하며 브라우저가 이에 대응하고 있습니다. XMLHttpRequest() 사양은 이미 지원 중단 및 삭제 예정입니다. Chrome 80에서는 몇 가지 이벤트 핸들러, 특히 닫을 때 실행되는 beforeunload, unload, pagehide, visibilitychange 내에서 동기 호출을 허용하지 않는 첫 번째 단계를 취합니다. WebKit에서도 최근에 동일한 동작 변경사항을 구현하는 커밋이 적용되었습니다.
사이트를 업데이트하는 데 시간이 필요한 사용자를 위해 옵션을 간략하게 설명하고 XMLHttpRequest()의 대안을 간략하게 설명하겠습니다.
임시 선택 해제
Chrome은 개발자가 XMLHttpRequest()에 대한 의존성을 삭제할 시간을 제공하고자 임시 선택 해제 옵션을 제공했습니다.
오리진 트라이얼에 참여합니다. 이렇게 하면 동기 XMLHttpRequest() 호출을 지원하는 출처별 토큰이 페이지 헤더에 추가됩니다. 이 옵션은 2021년 3월에 Chrome 89가 출시되기 직전에 종료됩니다. 엔터프라이즈 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()가 웹 플랫폼에서 삭제될 것으로 예상됩니다. 브라우저 공급업체는 삭제에 동의하지만 시간이 걸립니다. 가장 심각한 사용 사례 중 하나를 지원 중단하는 것은 모든 사용자의 사용자 경험을 개선하는 첫 번째 단계입니다.