Page Visibility API 사용

Ernest Delgado
Ernest Delgado
X

소개

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

그만큼 흥미롭지는 않지만 마찬가지로 중요한 것은 애플리케이션을 더 효율적으로 실행하고 전반적으로 더 나은 사용자 환경을 제공하는 기술입니다. 이때 PageVisibility와 같은 API가 필요합니다.

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

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

처음에는 이 API가 사용자 편의성 외에는 그다지 유용하지 않은 것처럼 보일 수 있지만, 모바일 웹 브라우징이 크게 증가함에 따라 기기의 배터리 전원을 절약하는 데 도움이 되는 모든 것이 매우 중요해졌습니다. PageVisibility API를 사용하면 사이트에서 사용자의 기기가 전력을 적게 소모하고 더 오래 지속되도록 도울 수 있습니다.

Browser Support

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

Source

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

이 튜토리얼에서는 API의 기본 사항을 다루고 이를 몇 가지 실제 예시에 적용하는 방법을 보여줍니다 (성격이 급한 분들은 바로 예시로 넘어가셔도 됩니다).

문서 공개 상태 속성

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

예상할 수 있듯이, 문서가 전혀 보이지 않을 때 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는 이 퍼즐의 중요한 부분입니다. 리소스에 민감한 웹 애플리케이션을 빌드하는 방법에 대해 자세히 알아보려면 다른 성능 관련 도움말을 확인하세요.

외부 참조