initial commit

1 files changed, 201 insertions, 0 deletions

diff --git a/files/uk/web/api/api_відображення_сторінки/index.html b/files/uk/web/api/api_відображення_сторінки/index.html
new file mode 100644
index 0000000000..6675a3783b
--- /dev/null
+++ b/files/uk/web/api/api_відображення_сторінки/index.html
@@ -0,0 +1,201 @@
+---
+title: API відображення сторінки
+slug: Web/API/API_відображення_сторінки
+tags:
+  - API
+  - API відображення сторінки
+  - visibilityState
+  - visibilitychange
+  - відображення сторінки
+  - процеси скритої закладки
+  - фоновий режим
+translation_of: Web/API/Page_Visibility_API
+---
+<div>{{DefaultAPISidebar("Page Visibility API")}}</div>
+
+<div></div>
+
+<p>При перегляді сайту за допомогою вкладок існує ймовірність того, що будь-яка з веб-сторінок знаходиться в фоновому режимі і тому користувач її не бачить. API відображення сторінки надає події, які ви можете відстежити, щоб дізнатися, коли документ стає видимим або прихованим, а також дозволяє отримати поточний стан прихованості/видимості сторінки.</p>
+
+<div class="note">
+<p><strong>Примітка:</strong> API відображення сторінки є особливо корисним для економії ресурсів та підвищення продуктивності, дозволяючи сторінці уникнути виконання непотрібних завдань, коли документ не є видимим.</p>
+</div>
+
+<p>Коли користувач згортає вікно або перемикається на іншу вкладку, API посилає подію {{event("visibilitychange")}}, щоб передати слухачам інформацію про зміну стану сторінки. Ви можете виявити подію і виконати деякі дії або нічого не виконувати. Наприклад, якщо ваш веб-додаток програє відео, він може поставити відео на паузу, коли користувач переміщує вкладку у фоновий режим, і відновити відтворення, коли користувач повернеться до цієї вкладки. Користувач не втрачає миті у відео, звук відео не заважає аудіо в новій вкладці на передньому плані, і користувач не пропустить жодного моменту в них.</p>
+
+<p>Стан видимості {{HTMLElement ("iframe")}} збігаються зі станом батьківського документа. Приховування <code>&lt;iframe&gt;</code> за допомогою властивостей CSS (таких як {{cssxref ("display", "display: none;")}}) не викликає подій видимості і не змінює стан документа, що міститься в кадрі.</p>
+
+<h3 id="Випадки_використання">Випадки використання</h3>
+
+<p>Розглянемо декілька прикладів використання API видимості сторінки.</p>
+
+<ul>
+ <li>На сайті є карусель зображень, яка не повинна переходити до наступного слайду, якщо користувач не переглядає сторінку.</li>
+ <li>Додаток, що показує інформаційну панель, не повинен опитувати сервер на оновлення, коли сторінку не видно.</li>
+ <li>Сторінка хоче визначити, коли до неї мають доступ, щоб вона могла точно підрахувати кількість переглядів.</li>
+ <li>Сайт хоче відключити звуки, коли пристрій перебуває в режимі очікування або користувач натискає кнопку живлення, щоб вимкнути екран.</li>
+</ul>
+
+<p>Розробники у минулому використовували недосконалі проксі для виявлення цього. Наприклад, перегляд {{event("blur")}} і {{event("focus")}} подій на вікні допомагає зрозуміти, коли ваша сторінка не є активною, але не говорить про те, що ваша сторінка насправді прихована для користувача. API Видимість сторінки вирішує цю проблему.</p>
+
+<div class="note">
+<p><strong>Примітка:</strong> У той час як {{domxref ("GlobalEventHandlers.onblur", "onblur")}} та {{domxref ("GlobalEventHandlers.onfocus", "onfocus")}} скажуть вам, коли користувач перемикає вікно, але це не обов'язково означає, що воно приховано. Сторінки стають прихованими тільки тоді, коли користувач перемикає вкладки або згортає вікно браузера, що містить вкладку.</p>
+</div>
+
+<h3 id="Політика_позиціонування_як_сприяння_продуктивності_фонової_сторінки">Політика позиціонування, як сприяння продуктивності фонової сторінки</h3>
+
+<p>Окремо від API відображення сторінки агенти  користувача зазвичай мають ряд власних політик для зниження впливу продуктивності фонових або прихованих вкладок. Вони можуть включати в себе:</p>
+
+<ul>
+ <li>Більшість браузерів припиняють посилати {{domxref ("Window.requestAnimationFrame", "requestAnimationFrame ()")}} зворотні виклики на фонові або прихован вкладкиі {{{HTMLElement ("iframe")}}} для підвищення продуктивності і терміну служби акумулятора.</li>
+ <li>Такі таймери, як {{domxref ("WindowOrWorkerGlobalScope.setTimeout", "setTimeout ()")}}, гасяться в фонових і неактивних вкладках, щоб допомогти поліпшити продуктивність. Більш детальну інформацію див. у розділі  <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified">Причини затримок, що перевищують встановлені.</a></li>
+ <li>Використання фонового тайм-ауту на основі виділеного ліміту тепер доступно в сучасних браузерах (Firefox 58+, Chrome 57+), що накладає додаткові обмеження на використання процесора фонового таймера. В сучасних браузерах це працює схожим чином, докладніше про це можна прочитати нижче:
+  <ul>
+   <li>У Firefox, вікна в фонових вкладках мають свій власний бюджет часу у мілісекундах - максимальне і мінімальне значення +50 мс і -150 мс відповідно. Chrome дуже схожий, за виключенням того, що бюджет зазначається в секундах.</li>
+   <li>Вкладки підлягають гасінню через 30 секунд, з тими ж самими правилами затримки по гасінню, що і для віконних таймерів (знову ж таки, дивіться розділ <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified">Причини затримок довше, ніж зазначено</a>).  У Chrome це значення дорівнює 10 секундам.</li>
+   <li>Завдання по таймеру дозволені тільки в тому випадку, якщо витрати по ньому не мають негативного значення.</li>
+   <li>Після закінчення виконання коду таймера, тривалість часу, зайнятого на його виконання, віднімається від часу тайм-ауту його вікна.</li>
+   <li>Бюджет регенерується зі швидкістю 10 мс на секунду, як в Firefox, так і у Chrome.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Деякі процеси виключені з цього гасящего режиму. У цих випадках ви також можете використовувати API видимості сторінки, щоб зменшити вплив на продуктивність.</p>
+
+<ul>
+ <li>Вкладки, які відтворюють звук, перебувають на передньому плані і не гасяться.</li>
+ <li>Вкладки з кодом, що використовують мережеві з'єднання у реальному часі  (<a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a> та <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a>) , залишаються незачепленими, щоб уникнути тимчасового закриття цих з'єднань і їх несподіваного відключення.</li>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> процеси також залишаються непорушними для уникнення тайм-аутів.</li>
+</ul>
+
+<h2 id="Приклад">Приклад</h2>
+
+<p>Подивіться <a href="http://daniemon.com/tech/webapps/page-visibility/">живий приклад</a> (відео зі звуком).</p>
+
+<p>Приклад, який призупиняє перегляд відео під час перемиканні на іншу вкладку і відтворює його знову при поверненні на цю вкладку, був створений за таким кодом:</p>
+
+<pre class="brush: js">   // Встановіть ім'я властивості 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);
+
+}
+</pre>
+
+<h2 id="Властивості_використані_в_інтерфейсі_документа">Властивості, використані в інтерфейсі документа</h2>
+
+<p>API Видимість сторінки додає наступні властивості до інтерфейсу {{domxref("Document")}} :</p>
+
+<dl>
+ <dt>{{domxref("Document.hidden")}} {{ReadOnlyInline}}</dt>
+ <dd>Повертає <code>true</code> , якщо сторінка знаходиться в стані, яке вважається прихованим для користувача, і <code>false</code> якщо навпаки.</dd>
+ <dt>{{domxref("Document.visibilityState")}} {{ReadOnlyInline}}</dt>
+ <dd> {{domxref ("DOMString")}} вказує на поточний стан видимості документа. Можливі значення:
+ <dl>
+  <dt><code>visible</code></dt>
+  <dd>Зміст сторінки може бути, принаймні, частково видимим. На практиці це означає, що сторінка є закладкою на передньому плані немінімізірованного вікна.</dd>
+  <dt><code>hidden</code></dt>
+  <dd>Вміст сторінки не видно користувачеві або через те, що вкладка документа знаходиться в фоновому режимі, або через те, що частина вікна прихована, або через те, що екран пристрою вимкнений.</dd>
+  <dt><code>prerender</code></dt>
+  <dd>Вміст сторінки є попередніми і невидимим для користувача. Документ може буті в стані попереднього завантаження.
+  <div class="note"><strong>Примітка:</strong> Не всі браузери підтримують попереднє завантаження.</div>
+  </dd>
+  <dt><code>unloaded</code></dt>
+  <dd>Сторінка перебуває в процесі вивантаження з пам'яті.
+  <div class="note"><strong>Примітка:</strong> Не всі браузери підтримують це значення.</div>
+  </dd>
+ </dl>
+ </dd>
+ <dt>{{domxref("Document.onvisibilitychange")}}</dt>
+ <dd> {{domxref("EventListener")}} задає код, який буде викликатися при виникненні події {{event("visibilitychange")}} .</dd>
+</dl>
+
+<pre class="brush: js">//startSimulation та pauseSimulation визначені в іншому місці
+function handleVisibilityChange() {
+  if (document.hidden) {
+    pauseSimulation();
+  } else  {
+    startSimulation();
+  }
+}
+
+document.addEventListener("visibilitychange", handleVisibilityChange, false);
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Page Visibility API')}}</td>
+   <td>{{Spec2('Page Visibility API')}}</td>
+   <td>Початкове значення.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Працює_з_браузерами">Працює з браузерами</h2>
+
+<div>
+<h3 id="Document.visibilityState"><code>Document.visibilityState</code></h3>
+
+<div>
+
+
+<p>{{Compat("api.Document.visibilityState")}}</p>
+</div>
+</div>
+
+<h2 id="Дивись_також">Дивись також</h2>
+
+<ul>
+ <li>Опис <a href="http://blogs.msdn.com/b/ie/archive/2011/07/08/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-2.aspx" title="Page Visibility on IEBlog"> API Видимості сторінки</a> від IEBlog.</li>
+ <li>Опис <a href="http://code.google.com/chrome/whitepapers/pagevisibility.html" title="Page Visibility API by Google">API Видимості сторінки</a>  від Google</li>
+</ul>