Beacon API

에디터를 닫을 때

에디터의 Undo/Redo 구현에 필요한 데이터를 서버 메모리에 보관합니다. 에디터를 닫을 때(또는 다른 페이지로 이동할 때) 이 데이터를 지웁니다.

웹 브라우저의 unload 이벤트로 서버에 에디터가 닫혔다는 사실을 알립니다.

window.addEventListener('unload', () => {
	const xhr = new XMLHttpRequest();
    xhr.open('GET', '/close_editor', false);
    xhr.send();
});

XMLHttpRequest로 서버를 호출합니다. open 메소드의 세 번째 파라미터를 false로 해서 동기로 처리합니다. 그렇지 않으면 이 요청이 서버에 전달되지 않을 수 있습니다.

navigator.sendBeacon

이와 같은 동기 처리로 에디터가 닫힐 때 일시적인 멈춤이 있을 수 있습니다. Beacon API로 이 문제를 해결할 수 있습니다.

window.addEventListener('unload', () => {
	navigator.sendBeacon('/close_editor');
});

IE11에서는 지원하지 않습니다.

navigator.sendBeacon 메소드는 요청을 큐에 담고 바로 끝냅니다. 큐에 있는 요청을 서버에 보내는 것은 웹 브라우저가 보장합니다. 이렇게 멈춤 현상을 피할 수 있고 코드도 단순합니다.

쓰리래빗츠 북 4.0.11 버전에 적용할 예정입니다.

작은 이야기