PageVisibility API

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

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

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

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

Спецификации API, который на момент написания статьи находится в стадии Кандидат для Рекомендации, обеспечивает свойства для определения состояния видимости документов, а также свойства на реагирование на изменение просмотра. В статье написаны основы PageVisibility API и показано, как применять их к некоторым практическим примерам ( перейти к ним , если нет терпения).

Свойства отображения документа

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

эти свойства в настоящее время в браузерах работают с префиксом, так что вы должны будете использовать префиксы: «webkitHidden» и «webkitVisibilityState».

Как и ожидалось, скрытый атрибут возвращает true , если документ не видно вообще. Как правило, это означает, что документ свернули. Если атрибут имеет значение false любая часть документа открыта. Еще для обеспечения доступности средств, атрибут скрытия может быть установлен false , когда средство экранная лупа полностью закрывает документ.

Работа с префиксами

Используйте некоторые вспомогательные функции, чтобы изолировать особенности браузера.



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 — документ полностью скрыт
  • visibility — документ, по крайней мере частично виден
  • prerender — документ загружается вне экрана но его не видно (это значение не является обязательным, не все браузеры будут это поддерживать)
  • unloaded — если документ должен быть выгружен, то это значение будет возвращено (это значение не является обязательным, не все браузеры будут это поддерживать)

Событие visibilitychange

В дополнение к свойствам просмотра, есть событие visibilitychange , которое возникает всякий раз, когда документ изменяет состояние просмотра. Вы можете зарегистрировать функцию для этого события непосредственно для объекта документа:

Пример событий



// использование свойств, имя для генерации имени событий
  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";
  }
}


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

(Если вы видите текст «PageVisibilityAPI не поддерживается!», То ваш браузер не поддерживает этот API)

Практические примеры

Воспроизведение и пауза в видео

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

Это определяется путем обращений к событиям visibilityChange, а затем происходит переключение состояния видео:



window.addEventListener("load", function vidDemo() {
  sessionStorage.initialPlay = false;
  var vidElem = document.getElementById("video-demo");

  var visProp = getHiddenProp();
  if (visProp) {
  vidElem.addEventListener("play", function() {
  sessionStorage.initialPlay = true;
  });

  var evtName = visProp.replace(/[H|h]idden/,'') + 'visibilitychange';
  document.addEventListener(evtName, startStopVideo);
  }

  function startStopVideo() {
  if (document[visProp]) {
  vidElem.pause();
  }
  else if (vidElem.paused && sessionStorage.initialPlay == "true") {
  vidElem.play();
  }
  }
  });


Показывать уведомления когда вкладка скрыта

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

Включить уведомления, нажав кнопку «Включить уведомление». Затем нажмите кнопку «Сообщить мне!», и перейдите на другую вкладку. Через 5 секунд, код проверит, скрыта вкладка если да, покажет уведомления. В противном случае, будет использоваться стандартное предупреждение.


(Сначала нажмите: « Включить уведомление » чтобы включить уведомление)

А вот код:



window.addEventListener("load", function notifyDemo() {
   var propName = "";
   var oNotify=null;
   var visProp = getHiddenProp();

   document.getElementById("notify-demo").addEventListener("click", function() {
      oNotify = null;
      if (window.webkitNotifications) {
         setTimeout(showNotification, 5000);

         if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
            oNotify = window.webkitNotifications.createNotification('', 'Уведомление', 'Вы получили уведомление на странице http://www.pixelcom.crimea.ua/pagevisibility-api.html');
         }
      }
   });

   document.getElementById("notify-enable").addEventListener("click", function() {
      window.webkitNotifications.requestPermission();
   });

   function showNotification() {
      if (document[visProp] && window.webkitNotifications && oNotify) {
         oNotify.show();
      }
      else {
         alert("Уведомление о странице http://www.pixelcom.crimea.ua/pagevisibility-api.html");
      }
   }
});


Google Analytics, если страница pre-rendered

В таких браузерах, таких как Google Chrome, есть возможность предварительного рендеринга страниц (вы можете прочитать больше о предварительной визуализации в Chrome ). Этот процесс включает в себя загрузку всех ресурсов, необходимых для отображения страницы — в том числе любые сценарии, которые подключены к странице. Многие сторонние сайты используют Google Analytics, чтобы определить, когда и сколько их страницы смотрели, но этот счет может быть искажен, если страница отказана, и никогда не просматривалась пользователем.

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



var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);


В этом случае, событие _trackPageview всегда записывается, даже если страница не отображается для пользователя. Сценарий, который определяет предварительный рендеринг будет выглядеть так:



var bHavePV = getHiddenProp();
  var bInitialShow = false;
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);

  if (bHavePV) {
  document.addEventListener("visibilityChange", handleVisEvt);
  }
  else {
  _gaq.push(['_trackPageview']); // трек просмотра страницы обычно, когда нет PageVisibility
  }

  function handleVisEvt() {
  if (document.visibilityState == "prerender") {
  _trackEvent("pagedata", "prerender"); // возможно, будет интересно отслеживать pre-rendering
  }
  if (document.visibilityState == "visible" && !bInitialShow) {
  bInitialShow = true; // не вызывать этот код еще раз
  _gaq.push(['_trackPageview']);
  }
  }


В заключение

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>