Раніше ми не мали браузерів, які працювати з багатьма вкладками. Але вже

багато часу всі переглядачі пропонують нам цю функцію. Нам важко уявити, як це, працювати тільки з однією вкладкою. Зараз кожен користувач в середньому має 10-15 відкритих вкладок, а іноді - 25-30.

Чому це API?

Раніше було неможливо визначити яка вкладка активна, але з допомогою HTML5 Visibility API, ми можемо легко дізнатися, чи переглядає відвідувач нашу веб- сторінку.

У цьому уроці ми будемо розбирати роботу з HTML5 Visibility API.

Перевірка стану видимості сторінки

З появою цього API, ми отримали дві нові властивості документа, які виконують різні функції. Перший - document.visibilityState, другий - document.hidden.

document.visibilityState може мати чотири різних значення:

• hidden: сторінки не має на екрані;
• prerender: сторінка завантажена за межами екрану, але її не переглядає користувач;
• visible: сторінку переглядають;
• unloaded: користувач виходить з поточної сторінки;

document.hidden \- це логічна властивість, яке має значення false, якщо сторінка переглядається, і true, якщо сторінка прихована.

Тепер ми можемо контролювати, як наш сайт буде поводити себе, коли він прихований від користувача.

Настав час дізнатися про подію, з допомогою якої ми можемо бути повідомлені про новий стан видимості сторінки. Це робиться через visibilitychange.

    document.addEventListener('visibilitychange', function(event) {
      if (!document.hidden) {
        // Сторінка активна.
      } else {
       // Сторінка прихована. 
      }
    });

Цей код - базовий приклад використання події для визначення поточного стану веб-сторінки. Але ви повинні знати, що обидві ці властивості і методи повинні бути використані разом з префіксом постачальника, оскільки ці події та властивості мають спеціальний префікс в деяких браузерах. Тепер ми будемо бачити один і той же код в різних браузерах:

    // Отримуємо префікс браузера.
    function getBrowserPrefix() {
       
      // Перевіряємо властивості без префікса.
      if ('hidden' in document) {
        return null;
      }
     
      // Всі можливі префікси.
      var browserPrefixes = ['moz', 'ms', 'o', 'webkit'];
     
      for (var i = 0; i < browserPrefixes.length; i++) {
        var prefix = browserPrefixes[i] + 'Hidden';
        if (prefix in document) {
          return browserPrefixes[i];
        }
      }
     
      // API не підтримується браузером.
      return null;
    }
     
    // Отримуємо від конкретного браузера значення hidden.
    function hiddenProperty(prefix) {
      if (prefix) {
        return prefix + 'Hidden';
      } else {
        return 'hidden';
      }
    }
     
    // Отримуємо від конкретного браузера значення visibility.
    function visibilityState(prefix) {
      if (prefix) {
        return prefix + 'VisibilityState';
      } else {
        return 'visibilityState';
      }
    }
     
    // Отримуємо подію від конкретного браузера.
    function visibilityEvent(prefix) {
      if (prefix) {
        return prefix + 'visibilitychange';
      } else {
        return 'visibilitychange';
      }
    }

У нас є всі префіксовані властивості, подія готова до застосування. Тепер ми змінимо наш попередній код відповідно.

    // Отримуємо префікс браузера
    var prefix = getBrowserPrefix();
    var hidden = hiddenProperty(prefix);
    var visibilityState = visibilityState(prefix);
    var visibilityEvent = visibilityEvent(prefix);
     
    document.addEventListener(visibilityEvent, function(event) {
      if (!document[hidden]) {
        // Сторінка активна.
      } else {
       // Сторінка прихована. 
      }
    });

Де ми можемо використовувати це API?

Існує ряд різних сценаріїв, де ми можемо розглянути можливість використання цього API.

1. Уявіть, що на вашому сайті, дані підтягуються з допомогою RSS або API з певною періодичністю, наприклад 2 хвилини. Ми можемо призупинити оновлення, якщо сторінка недоступна користувачу.

2. Слайдер зображень. Ми можемо обмежити рух слайдера зображень, коли сторінка прихована.

3. Аналогічним чином, ми можемо показати повідомлення тільки тоді, коли сторінку бачить користувач.

До цього ми бачили код, щоб використовувати HTML5 Page Visibility API, настав час для деяких дій відразу.

Демонстрація

• Демо 1: Тут представлена демонстрація використання Page Visibility API, щоб змінити заголовок сторінки. Переглянути Демо.

• Демо 2: це демо показує, як ми можемо обмежити запит даних з сервера, коли сторінка знаходиться в неактивному стані.

У цій демо-версії, ми будемо досліджувати, як ми можемо обмежити запит нової інформації з сервера, але тільки тоді, коли користувач переглядає сторінку. Я припускаю, що jQuery вже включена у Вашу сторінку.

HTML

    <h1 id="valueContainer">0</h1>

JavaScript

    <script type="text/javascript">
         
        // Отримуємо префікс браузера
        var prefix = getBrowserPrefix();
        var hidden = hiddenProperty(prefix);
        var visibilityState = visibilityState(prefix);
        var visibilityEvent = visibilityEvent(prefix);
         
        var timer = null;
         
        function increaseVal() {
            var newVal = parseInt($('#valueContainer').text()) + parseInt(1);
            $('#valueContainer').text(newVal);
            document.title = newVal + ': Running'; 
             
            timer = setTimeout(function() {
                increaseVal();
            }, 1);
        }
         
        // Зміна Visibility 
        document.addEventListener(visibilityEvent, function(event) {
              if (document[hidden]) {
                  clearTimeout(timer);
                  var val = parseInt($('#valueContainer').text());
                  document.title = val + ': Pause'; 
              } else {
                  increaseVal();  
              }
        });
         
        increaseVal();
         
    </script>

Переглянути Демо.

Браузерна підтримка

Ми маємо дуже хорошу підтримку цього API практично у всіх великих і останніх версіях браузерів. Детальніше про підтримку.

Висновок

Це дуже корисне API, яке включає лише дві властивості і тільки одну подію. HTML5 Visibility API допомагає нам більш продуктивно використовувати можливості нашого сайту і це безперечно великий плюс.