Использование Page Visibility API

Ernest Delgado
Ernest Delgado
X

Введение

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

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

Page Visibility 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.

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

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