logo

document.visibilityState

document.visibilityState를 이용한 페이지의 상태를 확인하는 방법

웹 페이지가 현재 사용자에게 보이는지 아닌지를 확인하는 방법이 있다.

document.visibilityState를 사용하면 페이지가 현재 사용자에게 보이는지 아닌지를 확인할 수 있다.

document.visibilityState는 다음과 같은 상태를 가진다.

  • 'visible' : 페이지 내용은 적어도 부분적으로 보일 수 있다. 실제로 이는 페이지가 최소화 되지 않은 창(브라우저)에서의 선택된 탭 을 의미

  • 'hidden' : 페이지 내용은 사용자에게 표시되지 않는다. 실제로 이는 document가 background-tap(다른 탭)이거나, 최소화 된 창의 일부이거나, OS 화면 잠금이 활성 상태임을 의미

if (document.visibilityState === 'visible') {
    // 페이지가 사용자에게 보이는 상태
} else {
    // 페이지가 사용자에게 보이지 않는 상태
}

import { useEffect } from 'react';

interface UseVisibilityChangeProps {
  onVisible: () => void;
  onHidden: () => void;
  dependencies?: unknown[];
}

const useVisibilityChange = ({
  onVisible,
  onHidden,
  dependencies = [],
}: UseVisibilityChangeProps) => {
  useEffect(() => {
    const onVisibilityChange = () => {
      document.visibilityState === 'visible' ? onVisible() : onHidden();
    };

    document.addEventListener('visibilitychange', onVisibilityChange);
    return () => {
      document.removeEventListener('visibilitychange', onVisibilityChange);
    };
  }, [onHidden, onVisible, ...dependencies]);
};

export default useVisibilityChange;

웹 페이지 이탈을 감지할 수 있고, 모바일 웹뷰에서 앱의 백그라운드 상태나 전환을 감지할 수 있다.