지연된 내비게이션 줄이기
일반적으로 페이지나 앱에는 사용자가 페이지를 닫을 때 분석 또는 기타 데이터가 제출되지 않습니다. 일부 사이트에서는 데이터 손실을 방지하기 위해 XMLHttpRequest()의 동기 호출을 사용하여 데이터가 서버에 전달될 때까지 페이지나 앱을 열어 둡니다. 데이터를 저장하는 더 좋은 방법이 있을 뿐만 아니라 이 기법을 사용하면 최대 몇 초 동안 페이지 닫기가 지연되어 사용자 환경이 저하됩니다.
이 관행은 변경되어야 하며 브라우저가 응답합니다. XMLHttpRequest() 사양은 이미 지원 중단 및 삭제될 예정입니다. Chrome 80에서는 첫 번째 단계로, 여러 이벤트 핸들러, 특히 beforeunload, unload, pagehide, visibilitychange가 닫기에서 실행될 때 내부에서 동기 호출을 허용하지 않습니다. WebKit도 최근에 동일한 동작 변경사항을 구현하는 커밋을 도입했습니다.
이 도움말에서는 사이트를 업데이트하는 데 시간이 필요한 사용자를 위한 옵션과 XMLHttpRequest()의 대안을 간략하게 설명합니다.
일시적인 선택 해제
Chrome은 단순히 XMLHttpRequest()에서 플러그를 당기려고 하지 않기 때문에 몇 가지 일시적인 선택 해제 옵션을 사용할 수 있습니다. 인터넷 사이트의 경우 오리진 트라이얼을 사용할 수 있습니다.
이렇게 하면 동기 XMLHttpRequest() 호출을 사용 설정하는 출처별 토큰을 페이지 헤더에 추가할 수 있습니다. 이 옵션은 Chrome 89가 출시되기 직전인
2021년 3월에 종료됩니다. 엔터프라이즈 Chrome 고객은 동시에 종료되는 AllowSyncXHRInPageDismissal 정책 플래그를 사용할 수도 있습니다.
대안
데이터를 서버로 다시 보내는 방법에 관계없이 모든 데이터를 한 번에 전송하기 위해 페이지 로드 취소까지 기다리지 않는 것이 좋습니다. 로드 취소는 최신 브라우저에서 사용자 환경이 저하될 뿐만 아니라
문제가 발생하면 데이터가 손실될 수
있습니다. 특히 언로드 이벤트는 모바일 브라우저에서 실행되지 않는 경우가 많습니다. 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()가 삭제될 예정입니다. 브라우저 공급업체는 제거해야 한다는 데 동의하지만 시간이 걸립니다. 최악의 사용 사례 중 하나를 지원 중단하는 것은 모든 사용자의 사용자 환경을 개선하는 첫 번째 단계입니다.