JS - document.visibilityState или определяем активна ли сейчас | Frontender's notes [ru]

JS - document.visibilityState или определяем активна ли сейчас вкладка в браузере

Алоха товарищи фронты! Не большой шортрид о том как определить находится ли сейчас юзер на странице или нет.

Для данной задачи мы будем использовать:

Cвойство window.navigator.visibilityState, которое может быть равно или строке 'hidden' или строке 'visible'. 
А так же стандартный JS event visibilitychange, который в свою очередь будет реагировать на открытие / скрытие вкладки браузера и проверять свойство window.navigator.visibilityState

Пример кода:

const isVisibilityHiddenState = 'hidden';

const handleVisibility = () => {
 if (document.visibilityState === isVisibilityHiddenState) {
 console.log('user is on the page');
 } else {
 console.log('user is not on the page right now');
 }
}

document.addEventListener('visibilitychange', handleVisibility);

Надеюсь это было вам полезно. Удачи в экспериментах!