브라우저 절전모드와 백그라운드 폴링 이슈

dropKick·2022년 3월 15일
0

공부 기록

목록 보기
53/67

폴링

폴링이란

  • 타이머를 통해 서버에 일정 주기로 통신을 요청
  • 대표적으로 알림 서비스, 자동 인증 서비스 등이 여기에 해당
    예로 채팅 알림의 경우 서버와 일정 주기로 통신을 해야 채팅이 왔는지 안왔는지 사용자에게 notification을 보낼 수 있음
    따라서 백그라운드에서 데이터를 사용할 수 없는 경우 동작할 수 없음

이슈

내가 맡은 서비스 중 하나는 백그라운드 폴링을 최근 도입했는데
폴링을 도입하기 전과 후 정산 데이터가 맞지않아 확인을 요청했고, 확인해보니 백그라운드 폴링이 동일 초 중복 발생

이를 해결하기 위해 임시로 타이머 상태 플래그를 넣었더니 렌더링이 안되서 페이지 프리징 발생

자바스크립트 백그라운드 폴링 시간 간격 이슈

  • setInterval()은 콜백 실행 간격을 보장하지 않음
    setInterval()은 딜레이가 100초일 때 이전 호출이 100초 후 종료됐다면 100초의 간격을 보장하는 것이 아니라 바로 호출 됨
  • setTimeout()은 기본적으로 1회 실행
    하지만 중첩 setTimeout 설정 시 지연 간격을 보장하면서 호출 가능

안드로이드 배터리 최적화 모드(doze 모드)에서 브라우저의 동작

사실 폴링이 중복되는 것보다 사용자에 의한 절전모드, 배터리 최적화 모두, 잠자기 모드로 인해 발생하는 브라우저 중지
그리고 그로 인한 페이지 프리징이 가장 심각한 문제였다.

임의로 다시 타이머를 걸어서 프리징을 풀 수도 있지만 정답이 아니라고 생각했고 고민고민하다가 브라우저 포커스에 대한 API가 없을까 검색했고 마침 MDN에서 Page Visibility API를 발견

Page Visibility API

MDN Page Visibility API

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의 설명은 위와 같지만 실제로 사용자 포커스를 벗어나는 모든 상황에 속함

0개의 댓글