소개
웹 개발자들은 더욱 매력적인 대화형 웹페이지를 만들 수 있게 해주는 새로운 기술에 흥미를 보이는 경향이 있습니다. WebGL을 사용한 3D 그래픽인가요? 물론입니다. WebAudio를 통한 고급 오디오 기능 당연하죠. 웹 카메라와 마이크를 사용하는 실시간 공동작업 애플리케이션 가입하기
더 효율적으로 실행되고 전반적으로 더 나은 사용자 환경을 제공하는 애플리케이션을 빌드할 수 있게 해주는 기술이지만 그다지 흥미롭지는 않습니다. 이때 PageVisibility와 같은 API가 사용됩니다.
Page Visibility API는 간단하지만 중요한 기능을 수행합니다. 이 API를 사용하면 페이지가 사용자에게 표시될 때 애플리케이션이 이를 알 수 있습니다. 이러한 기본 정보를 통해 사용자가 보지 않을 때 다르게 동작하는 웹페이지를 만들 수 있습니다. 몇 가지 예를 살펴보겠습니다.
- 서버에서 정보를 검색하는 웹페이지는 사용자가 직접 보지 않을 때 업데이트 주기를 지연시킬 수 있습니다.
- 회전 이미지 캐러셀이나 동영상/오디오 콘텐츠를 표시하는 페이지는 사용자가 페이지를 다시 표시할 때까지 일시중지할 수 있습니다.
- 애플리케이션은 보기에서 숨겨져 있을 때만 사용자에게 알림을 표시하도록 결정할 수 있습니다.
처음에는 이 API가 사용자 편의를 넘어서는 그다지 유용하지 않을 수도 있지만, 모바일 웹 브라우징의 엄청난 증가를 고려할 때 기기의 배터리 전력을 절약하는 데 도움이 되는 모든 것이 매우 중요합니다. 사이트에서 PageVisibility API를 사용하여 사용자 기기의 전력 소비량을 줄이고 더 오래 사용할 수 있습니다.
이 문서 작성 시점에서 Candidate Recommendation 단계에 있는 API 사양은 문서의 공개 상태 감지를 위한 속성과 가시성 변경에 대한 응답을 위한 이벤트를 모두 제공합니다.
이 튜토리얼에서는 API의 기본사항을 다루고 몇 가지 실제 예제에 이를 적용하는 방법을 보여드리겠습니다. 참을성이 없는 분이라면 건너뛰어도 됩니다.
문서 공개 상태 속성
현재 버전의 PageVisibilityAPI 사양은 불리언 hidden 및 열거형 visibilityState, 이렇게 두 가지 문서 속성을 정의합니다. visibilityState 속성에는 현재 hidden, visible, prerender, unloaded의 4가지 값이 있을 수 있습니다.
예상대로 숨김 속성은 문서를 전혀 볼 수 없는 경우 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 이벤트가 있습니다. 이 이벤트에 대한 이벤트 리스너를 문서 객체에서 직접 등록할 수 있습니다.
이벤트 예
// 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는 이러한 퍼즐의 중요한 부분입니다. 리소스를 많이 사용하는 웹 애플리케이션을 빌드하는 방법에 관한 자세한 내용은 기타 성능 관련 도움말을 참고하세요.