Использование API видимости страниц

Ernest Delgado

Введение

Как веб-разработчики, мы склонны восхищаться новыми технологиями, которые позволяют нам создавать еще более привлекательные интерактивные веб-страницы. 3D-графика с WebGL? Абсолютно. Расширенные возможности звука с помощью WebAudio? Конечно. Приложения для совместной работы в реальном времени с использованием веб-камеры и микрофона? Подпишите меня!

Менее интересными, хотя и не менее важными, являются технологии, которые позволяют нам создавать приложения, которые работают более эффективно и обеспечивают лучший общий пользовательский опыт. Здесь на помощь приходит такой API, как PageVisibility.

API видимости страницы выполняет простую, но важную функцию — он сообщает вашему приложению, когда страница видна пользователю. Эта базовая информация позволяет создавать веб-страницы, которые ведут себя по-разному, когда их не просматривают. Рассмотрим несколько примеров:

• Веб-страница, получающая информацию с сервера, может замедлить цикл обновления, если ее не просматривают активно.
• Страница, на которой отображается вращающаяся карусель изображений или видео/аудиоконтент, может быть приостановлена, пока пользователь не откроет страницу снова.
• Приложение может принять решение отображать уведомления пользователю только тогда, когда оно скрыто от просмотра.

На первый взгляд этот API может показаться не очень полезным, если не считать удобства пользователя, но, учитывая огромный рост количества просмотров веб-страниц с мобильных устройств, все, что помогает экономить заряд батареи устройства, становится очень важным. Используя API PageVisibility, ваш сайт может помочь устройству пользователя потреблять меньше энергии и работать дольше.

Спецификация API, которая на момент написания этой статьи находится на стадии «Кандидат в рекомендацию», предоставляет как свойства для определения состояния видимости документа, так и событие для реагирования на изменения видимости.

В этом уроке я расскажу об основах API и покажу, как применить его к некоторым практическим примерам (не стесняйтесь переходить к ним, если вы нетерпеливы).

Свойства видимости документа

Текущая версия спецификации PageVisibilityAPI определяет два свойства документа: логическое значение « hidden и перечисление visibilityState . Свойство VisibilityState в настоящее время имеет четыре возможных значения: hidden , visible , prerender и unloaded .

Как и следовало ожидать, атрибут скрытый возвращает значение true, когда документ вообще не виден. Обычно это означает, что документ либо свернут, либо находится на фоновой вкладке, либо включен экран блокировки ОС и т. д. Атрибуту присваивается значение 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";
   }
}

Краткое содержание

Создание отличного веб-приложения предполагает гораздо больше, чем просто использование потрясающих, привлекательных функций, которые пользователи могут видеть и с которыми могут взаимодействовать. По-настоящему хорошее приложение требует бережного использования ресурсов и внимания пользователя, и API видимости страниц является важной частью этой головоломки. Чтобы узнать больше о создании ресурсоемких веб-приложений, прочтите другие наши статьи, посвященные производительности .

Внешние ссылки

• Спецификация API PageVisibility W3C
• Рабочая группа по веб-производительности
• Пример PageVisibility в IE10
• Visibility.js — полифилл для PageVisibility.
• isVis — еще один полифил PageVisibility.