Эта страница переведена с помощью Cloud Translation API.

Обнаруживайте неактивных пользователей с помощью API обнаружения простоя

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

Thomas Steiner

Что такое API обнаружения простоя?

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

Предлагаемые варианты использования API обнаружения простоя

Примеры сайтов, которые могут использовать этот API:

Приложения чата или сайты социальных сетей могут использовать этот API, чтобы сообщать пользователю, доступны ли его контакты в данный момент.
Публично доступные киоск-приложения, например в музеях, могут использовать этот API для возврата к «домашнему» виду, если никто больше не взаимодействует с киоском.
Приложения, требующие дорогостоящих вычислений, например для рисования диаграмм, могут ограничивать эти вычисления моментами, когда пользователь взаимодействует со своим устройством.

Текущее состояние

Шаг	Положение дел
1. Создайте объяснитель	Полный
2. Создайте первоначальный проект спецификации.	Полный
3. Соберите отзывы и доработайте дизайн	В ходе выполнения
4. Пробная версия происхождения	Завершенный
5. Запуск	Хром 94

Как использовать API обнаружения простоя

Обнаружение функций

Чтобы проверить, поддерживается ли API обнаружения простоя, используйте:

if ('IdleDetector' in window) {
  // Idle Detector API supported
}

Концепции API обнаружения простоя

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

Состояние простоя пользователя: active или idle : пользователь взаимодействовал или не взаимодействовал с пользовательским агентом в течение некоторого периода времени.
Состояние ожидания экрана: locked или unlocked : в системе имеется активная блокировка экрана (например, заставка), предотвращающая взаимодействие с пользовательским агентом.

Чтобы отличить active режим от idle , требуются эвристики, которые могут различаться в зависимости от пользователя, пользовательского агента и операционной системы. Это также должен быть достаточно грубый порог (см. Безопасность и разрешения ).

Модель намеренно формально не различает взаимодействие с конкретным контентом (то есть веб-страницей на вкладке с использованием API), пользовательским агентом в целом или операционной системой; это определение остается на усмотрение пользовательского агента.

Использование API обнаружения простоя

Первым шагом при использовании API обнаружения простоя является предоставление разрешения на 'idle-detection' . Если разрешение не предоставлено, вам необходимо запросить его через IdleDetector.requestPermission() . Обратите внимание, что для вызова этого метода требуется жест пользователя.

// Make sure 'idle-detection' permission is granted.
const state = await IdleDetector.requestPermission();
if (state !== 'granted') {
  // Need to request permission first.
  return console.log('Idle detection permission not granted.');
}

Вторым шагом будет создание экземпляра IdleDetector . Минимальный threshold — 60 000 миллисекунд (1 минута). Наконец, вы можете запустить обнаружение простоя, вызвав метод start() IdleDetector . В качестве параметров принимается объект с желаемым threshold простоя в миллисекундах и дополнительный signal с AbortSignal для прекращения обнаружения простоя.

try {
  const controller = new AbortController();
  const signal = controller.signal;

  const idleDetector = new IdleDetector();
  idleDetector.addEventListener('change', () => {
    const userState = idleDetector.userState;
    const screenState = idleDetector.screenState;
    console.log(`Idle change: ${userState}, ${screenState}.`);
  });

  await idleDetector.start({
    threshold: 60000,
    signal,
  });
  console.log('IdleDetector is active.');
} catch (err) {
  // Deal with initialization errors like permission denied,
  // running outside of top-level frame, etc.
  console.error(err.name, err.message);
}

Вы можете прервать обнаружение простоя, вызвав метод abort() AbortController .

controller.abort();
console.log('IdleDetector is stopped.');

Поддержка инструментов разработчика

Начиная с Chromium 94, вы можете эмулировать события простоя в DevTools , фактически не находясь в режиме ожидания. В DevTools откройте вкладку «Датчики» и найдите «Emulate Idle Detector state» . Различные варианты вы можете увидеть на видео ниже.

Эмуляция состояния детектора простоя в DevTools.

Поддержка кукольников

Начиная с версии Puppeteer 5.3.1, вы можете эмулировать различные состояния простоя , чтобы программно проверить, как меняется поведение вашего веб-приложения.

Демо

Вы можете увидеть API обнаружения простоя в действии с помощью демонстрации Ephemeral Canvas , которая стирает свое содержимое после 60 секунд бездействия. Вы можете себе представить, что это установлено в универмаге, где дети могут рисовать.

Демонстрация эфемерного холста

Полифиллинг

Некоторые аспекты API обнаружения простоя являются полизаполняемыми, и существуют библиотеки обнаружения простоя, такие как Idle.ts , но эти подходы ограничены собственной областью содержимого веб-приложения: библиотеке, работающей в контексте веб-приложения, необходимо проводить дорогостоящий опрос входных событий или прислушивайтесь к изменениям видимости. Однако с более строгими ограничениями сегодня библиотеки не могут определить, когда пользователь бездействует за пределами своей области содержимого (например, когда пользователь находится на другой вкладке или вообще вышел из своего компьютера).

Безопасность и разрешения

Команда Chrome разработала и внедрила API-интерфейс обнаружения простоя, используя основные принципы, определенные в разделе «Управление доступом к мощным функциям веб-платформы» , включая пользовательский контроль, прозрачность и эргономику. Возможность использования этого API контролируется разрешением 'idle-detection' . Чтобы использовать API, приложение также должно работать в безопасном контексте верхнего уровня .

Контроль пользователей и конфиденциальность

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

Обратная связь

Команда Chrome хочет услышать о вашем опыте работы с API обнаружения простоя.

Расскажите нам о дизайне API

Что-то в API работает не так, как вы ожидали? Или вам не хватает методов или свойств, необходимых для реализации вашей идеи? У вас есть вопрос или комментарий по модели безопасности? Сообщите о проблеме спецификации в соответствующем репозитории GitHub или добавьте свои мысли к существующей проблеме.

Сообщить о проблеме с реализацией

Вы нашли ошибку в реализации Chrome? Или реализация отличается от спецификации? Сообщите об ошибке на сайте new.crbug.com . Обязательно укажите как можно больше деталей, простые инструкции по воспроизведению и введите Blink>Input в поле «Компоненты» . Glitch отлично подходит для быстрого и простого обмена репродукциями.

Показать поддержку API

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

Поделитесь, как вы планируете его использовать, в теме обсуждения WICG .
Отправьте твит @ChromiumDev , используя хэштег #IdleDetection , и сообщите нам, где и как вы его используете.

Полезные ссылки

Благодарности

API Idle Detection был реализован Сэмом Гото . Поддержку DevTools добавил Максим Садым . Благодарим Джо Медли , Кейси Басков и Рейли Гранта за рецензии на эту статью. Изображение героя создано Фернандо Эрнандесом на Unsplash .