Web API: Определить находится страница в фокусе пользователя с помощью Page Visibility API

Page Visibility API — интерфейс браузера, который позволяет разработчикам определять, когда веб-страница находится в фокусе пользователя или скрыта из виду. Это полезно, когда требуется выполнять определенные действия или изменять поведение страницы, основываясь на состоянии видимости.

Основные методы Page Visibility API:

• document.hidden возвращает булевое значение, указывающее, является ли текущая страница скрытой (true) или видимой (false)

• document.visibilityState возвращает текущее состояние видимости страницы. Возможные значения:
  visible (видимая): страница полностью видна
  hidden (скрытая): страница полностью скрыта
  prerender (предварительная загрузка): страница находится в процессе предварительной загрузки
  unloaded (выгруженная): страница выгружена из памяти
  

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

// Обработчик изменения состояния видимости
function handleVisibilityChange()
{
	if( document.hidden )
	{		
		console.log("Страница скрыта");
		// Выполнить действия, связанные со скрытием страницы
		document.title = 'X - Страница скрыта';
	} 
	else 
	{		
		console.log("Страница видима");
		// Выполнить действия, связанные с видимостью страницы
		document.title = 'OK - Страница видима';
	}
}

// Добавляем обработчик изменения видимости страницы
document.addEventListener( "visibilitychange", handleVisibilityChange );

// Пример использования: вывод сообщения при изменении видимости страницы
handleVisibilityChange();