Как узнать что пользователь перешел на другую вкладку или свернул браузер

В случаях когда пользователь свернул окно браузера или перешел на другую вкладку, есть смысл отключить ненужные сетевые запросы, динамическое обновление контента или остановить воспроизведение аудио/видео.

Для этих целей есть Page Visibility API, который позволяет узнать, находится ли страница в активной вкладке браузера или нет.

Свойство document.visibilityState может принимать следующие значения:

console.log(document.visibilityState);

Свойство document.hidden принимает значение true, если браузер свернули или перешли на другую вкладку и false — если любая часть страницы видна пользователю.

console.log(document.hidden);

Также в составе Page Visibility есть событие visibilitychange, которе срабатывает при изменении этих свойств.

Пример использования:

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

Результат:

Как определить, что окно браузера было свернуто или потеряло фокус?

Функции Page Visibility не работает если пользователь снял фокус с окна браузера, в таком случаи помогут события onfocus и onblur.

window.onfocus = function(){
	console.log('Вкладка активна');
}

window.onblur = function(){
	console.log('Вкладка не активна');
}

JQuery:

$(window).on("focus", function(){
	console.log('Вкладка активна');
});

$(window).on("blur", function(){
	console.log('Вкладка не активна');
});

Результат: