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

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

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

javascript
1// если true, значит вкладка работает в фоне
2document.hidden // true
3
4// вкладка открыта на весь экран
5document.hidden // false
6

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

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

javascript
1document.addEventListener("visibilitychange", function() {
2    if (document.hidden) {
3        console.log("Вкладка неактивна")
4    } else {
5        console.log("Вкладка активна")
6    }
7})
8
9

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

Зачем это можно использовать? Да абсолютное множество применений:

• дополнительно сохранять данные на закрытие вкладки
• выключать аудио/видео при скрытии вкладки
• сбор аналитики
• и куча всего ещё