aboutsummaryrefslogtreecommitdiff
path: root/files/uk/web/api/page_visibility_api/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/uk/web/api/page_visibility_api/index.html')
-rw-r--r--files/uk/web/api/page_visibility_api/index.html202
1 files changed, 0 insertions, 202 deletions
diff --git a/files/uk/web/api/page_visibility_api/index.html b/files/uk/web/api/page_visibility_api/index.html
deleted file mode 100644
index 2cf8077bd9..0000000000
--- a/files/uk/web/api/page_visibility_api/index.html
+++ /dev/null
@@ -1,202 +0,0 @@
----
-title: API відображення сторінки
-slug: Web/API/Page_Visibility_API
-tags:
- - API
- - API відображення сторінки
- - visibilityState
- - visibilitychange
- - відображення сторінки
- - процеси скритої закладки
- - фоновий режим
-translation_of: Web/API/Page_Visibility_API
-original_slug: Web/API/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>