Page Visibility API: активная и скрытая вкладка

Назначение

Page Visibility API позволяет учитывать, виден ли документ пользователю в данный момент. Это помогает приостанавливать необязательные обновления интерфейса, не полагаясь только на потерю фокуса окна.

Как это работает

Свойство document.visibilityState содержит текущее состояние, а visibilitychange сообщает о смене. В собственной странице создайте абзац id visibility-note. Код обновляет его сразу и затем при событиях.

Пример

const note = document.querySelector("#visibility-note");
function updateVisibility() {
  note.textContent = document.hidden ? "Документ скрыт" : "Документ видим";
  console.log(document.visibilityState);
}
document.addEventListener("visibilitychange", updateVisibility);
updateVisibility();

Что должно получиться

При переключении на другую вкладку состояние обычно становится hidden, при возврате — visible. Сообщение в самой странице можно прочитать после возврата, а историю смен — в консоли.

Граница применения и частая ошибка

Visible не означает, что человек смотрит на конкретный блок или прочитал материал. Таймеры фоновых вкладок могут ограничиваться браузером, поэтому счётчик времени нельзя строить на предположении о точных интервалах. Не связывайте сохранность важных данных только с поздним событием ухода.

Самостоятельная проверка

Сравните переключение вкладки, сворачивание окна и перевод фокуса между двумя видимыми окнами. Запишите различия с blur. Если добавите периодическое обновление, проверьте его остановку и однократное возобновление.

Связанные материалы

• Коллекции DOM
• Очистка обработчиков
• Безопасное обновление страницы