API відображення сторінки

Переклад цієї статті ще не завершено. Будь ласка, допоможіть перекласти цю статтю з англійської мови

При перегляді сайту за допомогою вкладок існує ймовірність того, що будь-яка з веб-сторінок знаходиться в фоновому режимі і тому користувач її не бачить. API відображення сторінки надає події, які ви можете відстежити, щоб дізнатися, коли документ стає видимим або прихованим, а також дозволяє отримати поточний стан прихованості/видимості сторінки.

Примітка: API відображення сторінки є особливо корисним для економії ресурсів та підвищення продуктивності, дозволяючи сторінці уникнути виконання непотрібних завдань, коли документ не є видимим.

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

Стан видимості <iframe> збігаються зі станом батьківського документа. Приховування <iframe> за допомогою властивостей CSS (таких як display: none;) не викликає подій видимості і не змінює стан документа, що міститься в кадрі.

Випадки використання

Розглянемо декілька прикладів використання API видимості сторінки.

  • На сайті є карусель зображень, яка не повинна переходити до наступного слайду, якщо користувач не переглядає сторінку.
  • Додаток, що показує інформаційну панель, не повинен опитувати сервер на оновлення, коли сторінку не видно.
  • Сторінка хоче визначити, коли до неї мають доступ, щоб вона могла точно підрахувати кількість переглядів.
  • Сайт хоче відключити звуки, коли пристрій перебуває в режимі очікування або користувач натискає кнопку живлення, щоб вимкнути екран.

Розробники у минулому використовували недосконалі проксі для виявлення цього. Наприклад, перегляд blur і focus подій на вікні допомагає зрозуміти, коли ваша сторінка не є активною, але не говорить про те, що ваша сторінка насправді прихована для користувача. API Видимість сторінки вирішує цю проблему.

Примітка: У той час як onblur та onfocus скажуть вам, коли користувач перемикає вікно, але це не обов'язково означає, що воно приховано. Сторінки стають прихованими тільки тоді, коли користувач перемикає вкладки або згортає вікно браузера, що містить вкладку.

Політика позиціонування, як сприяння продуктивності фонової сторінки

Окремо від API відображення сторінки агенти  користувача зазвичай мають ряд власних політик для зниження впливу продуктивності фонових або прихованих вкладок. Вони можуть включати в себе:

  • Більшість браузерів припиняють посилати requestAnimationFrame () зворотні виклики на фонові або прихован вкладкиі {{{HTMLElement ("iframe")}}} для підвищення продуктивності і терміну служби акумулятора.
  • Такі таймери, як setTimeout (), гасяться в фонових і неактивних вкладках, щоб допомогти поліпшити продуктивність. Більш детальну інформацію див. у розділі  Причини затримок, що перевищують встановлені.
  • Використання фонового тайм-ауту на основі виділеного ліміту тепер доступно в сучасних браузерах (Firefox 58+, Chrome 57+), що накладає додаткові обмеження на використання процесора фонового таймера. В сучасних браузерах це працює схожим чином, докладніше про це можна прочитати нижче:
    • У Firefox, вікна в фонових вкладках мають свій власний бюджет часу у мілісекундах - максимальне і мінімальне значення +50 мс і -150 мс відповідно. Chrome дуже схожий, за виключенням того, що бюджет зазначається в секундах.
    • Вкладки підлягають гасінню через 30 секунд, з тими ж самими правилами затримки по гасінню, що і для віконних таймерів (знову ж таки, дивіться розділ Причини затримок довше, ніж зазначено).  У Chrome це значення дорівнює 10 секундам.
    • Завдання по таймеру дозволені тільки в тому випадку, якщо витрати по ньому не мають негативного значення.
    • Після закінчення виконання коду таймера, тривалість часу, зайнятого на його виконання, віднімається від часу тайм-ауту його вікна.
    • Бюджет регенерується зі швидкістю 10 мс на секунду, як в Firefox, так і у Chrome.

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

  • Вкладки, які відтворюють звук, перебувають на передньому плані і не гасяться.
  • Вкладки з кодом, що використовують мережеві з'єднання у реальному часі  (WebSockets та WebRTC) , залишаються незачепленими, щоб уникнути тимчасового закриття цих з'єднань і їх несподіваного відключення.
  • IndexedDB процеси також залишаються непорушними для уникнення тайм-аутів.

Приклад

Подивіться живий приклад (відео зі звуком).

Приклад, який призупиняє перегляд відео під час перемиканні на іншу вкладку і відтворює його знову при поверненні на цю вкладку, був створений за таким кодом:

   // Встановіть ім'я властивості hidden і події зміни для видимості.

var hidden, visibilityChange; 
if (typeof document.hidden !== "undefined") { // Opera 12.10 і Firefox 18 і більше пізніша підтримка 
  hidden = "hidden";
  visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
}
 
var videoElement = document.getElementById("videoElement");

// Якщо сторінка прихована, зупиніть відео;
// Якщо сторінка відображається, відтворіть відеозображення;

function handleVisibilityChange() {
  if (document[hidden]) {
    videoElement.pause();
  } else {
    videoElement.play();
  }
}

      // Попереджаємо, якщо браузер не підтримує addEventListener або Page Visibility API
if (typeof document.addEventListener === "undefined" || hidden === undefined) {
  console.log("Для цього демонстрування потрібен браузер, наприклад, Google Chrome або Firefox, який підтримує API для перегляду сторінок.");
} else {
      // Зміна видимості сторінки
  document.addEventListener(visibilityChange, handleVisibilityChange, false);
    
     // Коли відео призупиняється, встановлюємо назву.
     // Це свідчитеме про паузу.
  videoElement.addEventListener("pause", function(){
      document.title = 'Paused';
  }, false);
    
  // Коли відео відтворюється, встановлюємо назву.
  videoElement.addEventListener("play", function(){
      document.title = 'Playing'; 
  }, false);

}

Властивості, використані в інтерфейсі документа

API Видимість сторінки додає наступні властивості до інтерфейсу Document :

Document.hidden Read only
Повертає true , якщо сторінка знаходиться в стані, яке вважається прихованим для користувача, і false якщо навпаки.
Document.visibilityState Read only
 DOMString вказує на поточний стан видимості документа. Можливі значення:
visible
Зміст сторінки може бути, принаймні, частково видимим. На практиці це означає, що сторінка є закладкою на передньому плані немінімізірованного вікна.
hidden
Вміст сторінки не видно користувачеві або через те, що вкладка документа знаходиться в фоновому режимі, або через те, що частина вікна прихована, або через те, що екран пристрою вимкнений.
prerender
Вміст сторінки є попередніми і невидимим для користувача. Документ може буті в стані попереднього завантаження.
Примітка: Не всі браузери підтримують попереднє завантаження.
unloaded
Сторінка перебуває в процесі вивантаження з пам'яті.
Примітка: Не всі браузери підтримують це значення.
Document.onvisibilitychange
 EventListener задає код, який буде викликатися при виникненні події visibilitychange .
//startSimulation та pauseSimulation визначені в іншому місці
function handleVisibilityChange() {
  if (document.hidden) {
    pauseSimulation();
  } else  {
    startSimulation();
  }
}

document.addEventListener("visibilitychange", handleVisibilityChange, false);

Специфікації

Specification Status Comment
Page Visibility (Second Edition) Recommendation Початкове значення.

Працює з браузерами

Document.visibilityState

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
visibilityStateChrome Full support 33
Full support 33
Full support 13
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Edge Full support 12Firefox Full support 18
Full support 18
No support 10 — 52
Prefixed
Prefixed Implemented with the vendor prefix: moz
IE Full support 10Opera Full support 12.1
Notes
Full support 12.1
Notes
Notes Doesn't fire the visibilitychange event when the browser window is minimized, nor when hidden is set to true.
Safari Full support 7WebView Android Full support 4.4.3Chrome Android Full support 33
Full support 33
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Firefox Android Full support 18
Full support 18
No support 10 — 52
Prefixed
Prefixed Implemented with the vendor prefix: moz
Opera Android Full support 12.1
Notes
Full support 12.1
Notes
Notes Doesn't fire the visibilitychange event when the browser window is minimized, nor when hidden is set to true.
Safari iOS Full support 7Samsung Internet Android Full support 3.0
Full support 3.0
Full support 1.0
Prefixed
Prefixed Implemented with the vendor prefix: webkit
prerender value
DeprecatedNon-standard
Chrome Full support YesEdge Full support ≤79Firefox Full support 49IE ? Opera ? Safari ? WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 49Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

Дивись також