Прежде чем мы углубимся в детали API, полезно знать, почему он полезен для нас.

Когда страница находится в фоновом режиме, вы можете выполнять следующие действия.

  • приостановить видео и анимацию, так как пользователь все равно не смотрит на них
  • Замедлите или остановите обновления с вашего сервера, тем самым сэкономив пропускную способность пользователей и снизив нагрузку на ваши серверы.
  • Уведомляйте пользователя о событиях с помощью уведомлений, чтобы он мог вернуться на ваш сайт.
  • Отслеживайте, сколько времени пользователи на самом деле проводят на вашем сайте и страницах.

Методы API

документ.скрытый

document.hidden возвращает значение true, если вся страница в настоящий момент скрыта.

document.visibilityState

Он имеет четыре возможных значения, которые определяют более высокий уровень детализации видимости страницы.

а) Видимый — документ полностью виден

б) hidden — документ полностью виден

c) Документ загружен, но находится за пределами экрана

г) unloaded — документ не загружен

изменение видимости

Это событие, которое вы можете прослушивать и которое срабатывает при изменении видимости страницы.

Пример:

document.addEventListener("visibilitychange", function(){
    if(document.hidden == true){
        console.log('the page is now completely hidden');
    }else{
        console.log('the page is now visible');
    }
});