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

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

Thomas Steiner

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

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

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

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

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

Текущий статус

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

Обнаружение особенностей

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

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

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

Idle Detection 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.');

Поддержка DevTools

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

Поддержка кукловода

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

Демо

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

Полифиллинг

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

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

Команда Chrome разработала и внедрила API обнаружения простоя, используя основные принципы, определенные в Controlling Access to Powerful Web Platform Features , включая пользовательский контроль, прозрачность и эргономику. Возможность использования этого API контролируется разрешением 'idle-detection' . Для использования API приложение также должно работать в защищенном контексте верхнего уровня .

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

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

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

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

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

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

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

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

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

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

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

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

• Публичный объяснитель
• Проект спецификации
• Демо-версия API обнаружения простоя | Исходный код демо-версии API обнаружения простоя
• Ошибка отслеживания
• Запись ChromeStatus.com
• Компонент Blink: Blink>Input

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

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