브라우저 탭이 활성 상태인지 확인하는 방법

웹 서비스를 개발하다 보면, 사용자가 현재 페이지를 보고 있는지 여부가 중요한 경우가 있다. 

사용자가 여러개의 탭을 열어두고 사용하는 경우 사용자가 보고 있지 않은 탭에서 불필요한 리소스가 계속 사용될 수 있다.

이럴 때 사용할 수 있는 브라우저 API가 바로 Page Visibility API 이다.

 

---

💁🏻 적용 가이드

탭이 비활성 상태일 때 API 요청을 줄이고 리소스를 아끼고 싶을 때
사용자 활동을 로그로 남기고 싶을 때
탭 비활성화 중에는 애니메이션이나 알림을 중단하거나 지연하고 싶을 때

 

✅  Page Visibility

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible') {
    console.log('탭이 활성화됨');
    // API 재요청 또는 애니메이션 재개 등
  } else {
    console.log('탭이 비활성화됨');
    // 리소스 절약 또는 작업 일시 중단
  }
});

 

- visibilityState가 갖는 상태 값

visible	현재 탭이 포커스 상태
hidden	탭이 백그라운드에 있음
prerender	일부 브라우저에서 지원, 사전 렌더링 중
unloaded	페이지 언로드 중 (거의 사용 안 함)

※ 대부분의 경우는 visible 또는 hidden 두 가지 값만 사용

 

✅ 적용 예시

사용자가 탭을 보고 있지 않은 경우에도 지속적으로 api를 호출하는 것은 리소스 낭비로 이어진다.
이런 경우 탭의 활성 상태를 확인하고 interval을 on/off 할 수 있다.

let interval;
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible') {
    interval = setInterval(fetchData, 3000);
  } else {
    clearInterval(interval);
  }
});

---

 

사용자의 탭 활성 상태를 감지하고 상태에 맞게 코드를 작성하는 건 UX 향상과 성능 최적화에 좋은 방법이다.