Отслеживание активности окна браузера с помощью JavaScript

Быстрый ответ

Для определения активности вкладки браузера можно использовать атрибут document.hidden и событие visibilitychange, которое отслеживает переключение вкладки из активного состояния в неактивное и обратно.

document.addEventListener('visibilitychange', () => {
    console.log(`Вкладка ${document.hidden ? 'неактивна' : 'активна'}`);
});

Page Visibility API, к которому относятся атрибут document.hidden и событие visibilitychange, поддерживается большинством современных браузеров, включая Chrome 13+, IE 10+, Firefox 10+ и Opera 12.10+. В браузерах старых версий, где данный API отсутствует, можно воспользоваться window.onblur и window.onfocus.

Поддержка кросс-браузерности и альтернативные решения

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

let hidden, visibilityChange;
if (typeof document.hidden !== "undefined") { // Opera 12.10 и выше
  hidden = "hidden";
  visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") { // IE
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") { // Webkit браузеры (Safari, Chrome)
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
}

function handleVisibilityChange() {
  if (document[hidden]) {
    console.log("Вкладка не видна."); // Страница неактивна
  } else {
    console.log("Вкладка видна."); // Страница активна
  }
}

if (typeof document.addEventListener === "undefined" || 
    typeof document[hidden] === "undefined") {
  alert("Используйте браузер, поддерживающий Page Visibility API.");
} else {
  document.addEventListener(visibilityChange, handleVisibilityChange, false);
}

Благодаря условным проверкам и префиксам этот метод обеспечивает совместимость с различными браузерами.

Реализация продвинутого обнаружения

Для более тонкого определения активности пользователя следует использовать API видимости страницы совместно с отслеживанием событий ввода, таких как движение мыши, прокрутка страницы и нажатие клавиш.

let timer, userIsActive = true;

function activityMonitor() {
  clearTimeout(timer);
  userIsActive = true;
  timer = setTimeout(() => userIsActive = false, 5000); // Пользователь считается неактивным после 5 секунд бездействия
}

document.addEventListener('mousemove', activityMonitor);
document.addEventListener('scroll', activityMonitor);
document.addEventListener('keypress', activityMonitor);
document.addEventListener('visibilitychange', function() {
  if (document.hidden) {
    clearTimeout(timer);
    userIsActive = false;
  } else {
    activityMonitor();
  }
});

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

Визуализация

Возьмём для сравнения дом с системой безопасности и браузер с его обработчиками событий. Когда владелец находится дома, дом считается активным.

window.addEventListener('focus', function() {
  console.log("Дом в \"рабочем режиме\" – владелец дома."); // Дом активен
});

Если же владелец ушел:

window.addEventListener('blur', function() {
  console.log("Дом на замке – владелец не дома."); // Дом неактивен
});

Таким образом, мы создали систему уведомлений, которая сообщает нам о статусе нашей вкладки в браузере.

Периодические проверки и другие соображения

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

setInterval(function() {
  if (!document.hidden && userIsActive) {
    // Задачи выполняются, если вкладка активна
    updateContent(); // "Пора обновить контент!"
  }
}, 10000); // Проверяем каждые 10 секунд

Не забывайте тестировать работу событий с помощью инструментов разработчика. Проведение проверки кода в разных браузерах поможет достигнуть максимальной точности результатов.

Полезные материалы

1. Page Visibility API – Web APIs | MDN — Полное руководство по API видимости страницы.
2. HTML Standard — Официальная спецификация Page Visibility API.
3. Возможно ли определить активность окна браузера в данный момент? – Stack Overflow — Различные примеры использования и опыт применения.
4. Использование Page Visibility API | web.dev — Подробная статья о практических аспектах использования данного API.
5. Введение в Page Visibility API — SitePoint — Начальное руководство по API видимости страницы.
6. Can I use... Support tables for HTML5, CSS3, etc — Информация о поддержке API видимости страницы в различных браузерах.