diff options
Diffstat (limited to 'files/uk/web/api/page_visibility_api/index.html')
-rw-r--r-- | files/uk/web/api/page_visibility_api/index.html | 202 |
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><iframe></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> |