Статьи

Введение в API видимости страницы

Ноябрь 4, 2018

Мобильный это круто. Мобильные приложения еще круче. К сожалению, в большинстве случаев мобильные соединения отстают, потому что они медленные или у вас нет неограниченной пропускной способности. Было бы здорово иметь богатые веб-приложения, которые не тратят впустую ресурсы пользователей, особенно когда они не смотрят на эту страницу. В этой статье вы узнаете, как частично решить эту и другие проблемы с помощью Page Visibility API.

За последние несколько лет было разработано несколько новых великолепных API-интерфейсов, помогающих нам в повседневной работе, таких как Geolocation API , API-интерфейс навигации и полноэкранный API . API видимости страницы определяет для разработчиков сайта средства для программного определения текущего состояния видимости страницы для разработки мощных и ресурсоемких веб-приложений . С 26 июля 2012 года это Рекомендация кандидата W3C, поэтому она считается стабильной.

Первое, что вас может удивить, это как они улучшают производительность и сохраняют пропускную способность. Представьте себе ситуацию, когда у вас есть отличное веб-приложение на основе AJAX, которое отправляет данные туда и обратно каждые пять секунд. Если пользователь отправляет вкладку браузера в фоновый режим при запуске приложения, оно будет отправлять данные каждые пять секунд, а также, если пользователь выберет вкладку на переднем плане через 10 минут. Разве не было бы замечательно, если бы приложение замедляло обновления или останавливало их, пока пользователь снова не посмотрел страницу? Вот где начинается оптимизация ресурсов и где API видимости страницы играет ключевую роль.

Как создаются API видимости страницы

Эти API довольно просты, на самом деле они имеют одно событие, называемое visibilitychangedocumenthiddenvisibilityState hiddentrue Важно отметить, что из этого правила есть некоторые исключения для инструментов доступности, которые работают в полноэкранном режиме. Вы можете узнать больше об этом, прочитав скрытые спецификации .

visibilityState

  • hidden
  • visible
  • prerender
  • unloaded

Обратите внимание, что последние два значения, prerenderunloadedявляются необязательными . Кроме того, как и hiddenhiddenимеет некоторые исключения в отношении вспомогательных технологий.

Совместимость

В настоящее время не так много браузеров, которые поддерживают эти API, и те, которые все еще используют префиксы поставщиков. Это приводит к проблемам поддержки, потому что вы должны управлять всеми префиксами, чтобы иметь рабочий код. В настоящее время настольными браузерами, поддерживающими API видимости страницы, являются Chrome 13+, Internet Explorer 10, Firefox 10+, Opera beta 12.10 . Мобильными браузерами, поддерживающими API, являются Chrome на Android 4.0+ и Opera Mobile 12.1+ на Android и Symbian (источник MobileHTML5.org — проверено мной на Android 4.0).

Слегка раздражает то, что из-за соглашения о camelCase, если свойства имеют префикс поставщика, фактическое имя свойства имеет первую букву в верхнем регистре, тогда как в нижнем регистре это не префикс. Для ясности возьмем hidden Как вы можете видеть, он начинается со строчной буквы, но если он имеет префикс, он начинается с прописной буквы «h», поэтому для проверки поддержки вы не можете написать код, похожий на следующий: 

  var browserPrefixes = ["", "webkit", "moz", "ms", "o"];
 для (var i = 0; i <browserPrefixes.length; i ++) {
   if (document [browserPrefixes [i] + "hidden"]! = undefined)
     // здесь идет код
 }

И вам нужно разделить регистры, как показано ниже, или использовать какой-то трюк против строк. 

  // Проверка версии без префикса
 if (document.hidden! == undefined)
   // здесь идет код
 еще {
   // Проверка версии с префиксом
   var browserPrefixes = ["webkit", "moz", "ms", "o"];
   для (var i = 0; i <browserPrefixes.length; i ++) {
     if (document [browserPrefixes [i] + "Hidden"]! = undefined) {
       // здесь идет код
     }
   }
 }

Как всегда, так же, как и другие API, была выпущена куча полифилов, чтобы использовать эти API в браузерах, которые их не поддерживают. Некоторые из этих полифилов — visible.js и isVis.js .

Давайте создадим рабочий пример

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

  function getPrefix () {
   префикс var = null;
   if (document.hidden! == undefined)
     префикс = "";
   еще {
     var browserPrefixes = ["webkit", "moz", "ms", "o"];
     // Проверка всех префиксов поставщиков
     для (var i = 0; i <browserPrefixes.length; i ++) {
       if (document [browserPrefixes [i] + "Hidden"]! = undefined) {
         префикс = browserPrefixes [i];
         перемена;
       }
     }
   }
   вернуть префикс;
 }

Вторая функция регистрирует состояние и увеличивает количество просмотров при отображении страницы. 

  function countView () {
   // Страница находится на переднем плане и видна
   if (document.hidden === false || document [prefix + "Hidden"] === false)
     просмотры ++;

   document.getElementById ("log"). innerHTML + = "Количество просмотров: " + views + " ." + "Текущее состояние вашей страницы: " + document [(prefix === ""? "v": prefix + "V") + "isibilityState"] + "
 «;
 }

Третья и последняя функция проверяет, поддерживает ли браузер API, и если тест имеет значение truevisibilitychange Обратите внимание, что эта функция также необходима для управления префиксами поставщика. 

  function testPageVisibilityApi () {
   if (префикс === ноль)
     document.getElementById ("log"). innerHTML = "Ваш браузер не поддерживает API видимости страницы";
   еще {
     document.addEventListener (префикс + «visibilitychange», countView);
     countView ();
   }
 }

Собираем все вместе

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

  <! DOCTYPE html>
 <HTML>
   <Голова>
     <Скрипт>
       function getPrefix () {
         префикс var = null;
         if (document.hidden! == undefined)
           префикс = "";
         еще {
           var browserPrefixes = ["webkit", "moz", "ms", "o"];
           // Проверка всех префиксов поставщиков
           для (var i = 0; i <browserPrefixes.length; i ++) {
             if (document [browserPrefixes [i] + "Hidden"]! = undefined) {
               префикс = browserPrefixes [i];
               перемена;
             }
           }
         }
         вернуть префикс;
       }

       function countView () {
         // Страница находится на переднем плане и видна
         if (document.hidden === false || document [prefix + "Hidden"] === false)
           просмотры ++;

         document.getElementById ("log"). innerHTML + = "Количество просмотров: <b>" + views +
           "</ b>." + "Текущее состояние вашей страницы: <b>" +
           document [(prefix === ""? "v": prefix + "V") + "isibilityState"] + "</ b> <br />";
       }

       function testPageVisibilityApi () {
         if (префикс === ноль)
           document.getElementById ("log"). innerHTML = "Ваш браузер не поддерживает API видимости страницы";
         еще {
           document.addEventListener (префикс + «visibilitychange», countView);
           countView ();
         }
       }

       var views = 0;
       var prefix = getPrefix ();
       window.onload = testPageVisibilityApi;
     </ Скрипт>
   </ HEAD>
   <Тело>
     <p id = "log"> </ p>
   </ Body>
 </ Html>

Некоторые другие хорошие примеры можно найти в Mozilla Developer Network .

Вывод

В этой статье я продемонстрировал, что такое API видимости страницы и как вы можете их использовать. Намерения людей в W3C помочь мобильным устройствам — а не просто сэкономить ресурсы и пропускную способность подключения — действительно достойны, и я надеюсь, что они будут широко использоваться как можно скорее.

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

Однако в настоящее время они не очень надежны из-за их слабой поддержки среди браузеров, поэтому вы должны использовать полифилл.

Если вы знакомы с API-интерфейсами JavaScript, ознакомьтесь с нашим разделом API-интерфейсов на последнем сайте в сети SitePoint… JSPro .

34
Share: