Page Visibility API 사용

Ernest Delgado
Ernest Delgado
X

소개

웹 개발자는 더욱 매력적이고 양방향적인 웹페이지를 만들 수 있는 새로운 기술에 관심을 갖는 경향이 있습니다. WebGL을 사용한 3D 그래픽 물론입니다. WebAudio를 통한 고급 오디오 기능 당연하죠. 웹 카메라와 마이크를 사용하는 실시간 공동작업 애플리케이션 모두 큰 동기부여가 됩니다.

그다지 흥미롭지는 않지만 동등하게 중요한 기술은 더 효율적으로 실행되고 전반적인 사용자 환경을 개선하는 애플리케이션을 빌드할 수 있는 기술입니다. 이때 PageVisibility와 같은 API가 사용됩니다.

페이지 가시성 API는 간단하지만 중요한 기능을 실행합니다. 즉, 페이지가 사용자에게 표시되는 시점을 애플리케이션에 알립니다. 이 기본 정보를 사용하면 페이지가 표시되지 않을 때 다르게 작동하는 웹페이지를 만들 수 있습니다. 다음 예를 살펴보세요.

  • 서버에서 정보를 가져오는 웹페이지가 활발하게 조회되지 않을 때 업데이트 주기가 느려질 수 있습니다.
  • 회전 이미지 캐러셀 또는 동영상/오디오 콘텐츠를 표시하는 페이지는 사용자가 페이지를 다시 표시할 때까지 일시중지할 수 있습니다.
  • 애플리케이션은 뷰에서 숨겨진 경우에만 사용자에게 알림을 표시할 수 있습니다.

이 API는 처음에는 사용자 편의 이외의 유용성이 없어 보일 수 있지만 모바일 웹 브라우징이 급증하는 것을 고려할 때 기기의 배터리 전원을 절약하는 데 도움이 되는 모든 것이 매우 중요합니다. 사이트에서 PageVisibility API를 사용하면 사용자의 기기에서 전력을 덜 소모하고 더 오래 사용할 수 있습니다.

Browser Support

  • Chrome: 33.
  • Edge: 12.
  • Firefox: 18.
  • Safari: 7.

Source

이 글을 작성하는 시점에서 후보 추천 단계에 있는 API 사양은 문서의 표시 상태를 감지하기 위한 속성과 표시 변경에 응답하기 위한 이벤트를 모두 제공합니다.

이 튜토리얼에서는 API의 기본사항을 다루고 이를 몇 가지 실제 예에 적용하는 방법을 보여줍니다. 참을성이 없는 편이라면 언제든지 건너뛰어도 됩니다.

문서 공개 상태 속성

PageVisibilityAPI 사양의 현재 버전은 불리언 hidden 및 열거형 visibilityState이라는 두 가지 문서 속성을 정의합니다. visibilityState 속성은 현재 hidden, visible, prerender, unloaded의 4가지 값을 가질 수 있습니다.

예상대로 문서가 전혀 표시되지 않으면 hidden 속성은 true를 반환합니다. 일반적으로 이는 문서가 최소화되었거나, 백그라운드 탭에 있거나, OS의 잠금 화면이 열려 있음을 의미합니다. 문서의 일부가 하나 이상의 디스플레이에 부분적으로라도 표시되는 경우 이 속성은 false로 설정됩니다. 또한 접근성 도구를 수용하기 위해 화면 돋보기와 같은 도구가 문서를 완전히 가리키지만 뷰를 표시하는 경우 숨김 속성을 false로 설정할 수 있습니다.

공급업체 접두사 처리

모든 공급업체별 접두사 대신 코드에 집중하기 위해 몇 가지 도우미 함수를 사용하여 브라우저별 항목을 격리하겠습니다. Android 4.4 브라우저 지원을 중단하는 즉시 이 부분을 삭제하고 표준 이름을 사용할 수 있습니다.

function getHiddenProp(){
    var prefixes = ['webkit','moz','ms','o'];

    // if 'hidden' is natively supported just return it
    if ('hidden' in document) return 'hidden';

    // otherwise loop over all the known prefixes until we find one
    for (var i = 0; i < prefixes.length; i++){
        if ((prefixes[i] + 'Hidden') in document)
            return prefixes[i] + 'Hidden';
    }

    // otherwise it's not supported
    return null;
}

문서 속성 예

이제 교차 브라우저 함수 isHidden()를 작성하여 문서가 표시되는지 확인할 수 있습니다.

function isHidden() {
    var prop = getHiddenProp();
    if (!prop) return false;

    return document[prop];
}

문서의 공개 상태를 더 세부적으로 확인하려면 visibilityState 속성을 사용하면 됩니다. 이 속성은 다음 네 가지 값 중 하나를 반환합니다.

  • hidden: 문서가 완전히 숨겨져 있습니다.
  • visible: 하나 이상의 디스플레이 기기에서 문서가 부분적으로라도 표시됨
  • prerender: 문서가 화면 밖에서 로드되어 표시되지 않습니다 (이 값은 선택사항이며 일부 브라우저에서는 지원하지 않을 수 있음).
  • unloaded: 문서가 언로드되면 이 값이 반환됩니다 (이 값은 선택사항이며 일부 브라우저에서는 반드시 지원하지는 않음).

VisibilityChange 이벤트

공개 상태 속성 외에도 문서의 공개 상태가 변경될 때마다 실행되는 visibilitychange 이벤트가 있습니다. 문서 객체에서 직접 이 이벤트의 이벤트 리스너를 등록할 수 있습니다.

이벤트 예

// use the property name to generate the prefixed event name
var visProp = getHiddenProp();
if (visProp) {
  var evtname = visProp.replace(/[H|h]idden/,'') + 'visibilitychange';
  document.addEventListener(evtname, visChange);
}

function visChange() {
   var txtFld = document.getElementById('visChangeText');

   if (txtFld) {
      if (isHidden())
         txtFld.value += "Tab Hidden!\n";
      else
         txtFld.value += "Tab Visible!\n";
   }
}

요약

우수한 웹 애플리케이션을 빌드하려면 사용자가 보고 상호작용할 수 있는 눈길을 사로잡는 멋진 기능을 사용하는 것 이상이 필요합니다. 정말 훌륭한 애플리케이션은 사용자의 리소스와 관심을 신중하게 사용하며 Page Visibility API는 이 퍼즐의 중요한 부분입니다. 리소스 절약형 웹 애플리케이션 빌드에 대해 자세히 알아보려면 기타 성능 관련 도움말을 참고하세요.

외부 참조