내가 맡은 서비스 중 하나는 백그라운드 폴링을 최근 도입했는데
폴링을 도입하기 전과 후 정산 데이터가 맞지않아 확인을 요청했고, 확인해보니 백그라운드 폴링이 동일 초 중복 발생
이를 해결하기 위해 임시로 타이머 상태 플래그를 넣었더니 렌더링이 안되서 페이지 프리징 발생
사실 폴링이 중복되는 것보다 사용자에 의한 절전모드, 배터리 최적화 모두, 잠자기 모드로 인해 발생하는 브라우저 중지
그리고 그로 인한 페이지 프리징이 가장 심각한 문제였다.
임의로 다시 타이머를 걸어서 프리징을 풀 수도 있지만 정답이 아니라고 생각했고 고민고민하다가 브라우저 포커스에 대한 API가 없을까 검색했고 마침 MDN에서 Page Visibility API를 발견
API의 기준은
//startSimulation and pauseSimulation defined elsewhere
function handleVisibilityChange() {
if (document.hidden) {
pauseSimulation();
} else {
startSimulation();
}
}
document.addEventListener("visibilitychange", handleVisibilityChange, false);
hidden : 페이지 컨텐츠가 사용자에게 보이지 않는다. 실제로 이것은 document 가 뒤쪽 탭이거나 최소화된 window의 부분이거나, OS Screen 의 lock 이 활성화되어 있음을 의미한다.
나도 폴링 자체를 중단하기보다 폴링마다 document의 상태를 체크하는 방식을 택했음
hidden의 설명은 위와 같지만 실제로 사용자 포커스를 벗어나는 모든 상황에 속함