Как определить, активна ли вкладка у пользователя?

Если вам нужно узнать, активна ли вкладка в браузере у пользователя, существует несколько простых методов для этого

Во-первых, у объекта document есть свойство hidden, которое указывает открыта ли вкладка на экране пользователя в конкретный момент времени:

// если true, значит вкладка работает в фоне
document.hidden // true 

// вкладка открыта на весь экран
document.hidden // false

Это может быть полезно для определения состояния в моменте, хотя пригождается достаточно редко

Чаще всего используется второй способ, а именно отслеживание события visibilitychange:

document.addEventListener("visibilitychange", function() {
  if (document.hidden) {
    console.log("Вкладка неактивна")
  } else {
    console.log("Вкладка активна")
  }
})

Тут мы отслеживанием фокус вкладки и выполняем какие-то действия на уже при изменении состояния. Особенно полезен такой способ будет где нибудь в React и прочих либах

Зачем это можно использовать? Да абсолютное множество применений:
— дополнительно сохранять данные на закрытие вкладки
— выключать аудио/видео при скрытии вкладки
— сбор аналитики
— и куча всего ещё

Спасибо за прочтение, это важно для меня ❤️

@prog_way_blog — чат — #code #web #theory #javascript