Détecter les utilisateurs inactifs avec l'API Idle Detection

Utilisez l'API Idle Detection pour savoir quand l'utilisateur n'utilise pas activement son appareil.

Thomas Steiner

Qu'est-ce que l'API Idle Detection ?

L'API Idle Detection avertit les développeurs lorsqu'un utilisateur est inactif, et indique par exemple l'absence interaction avec le clavier, la souris, l'écran, l'activation d'un économiseur d'écran, le verrouillage de l'écran, ou en passant à un autre écran. Un seuil défini par le développeur déclenche la notification.

Cas d'utilisation suggérés pour l'API Idle Detection

Voici quelques exemples de sites qui peuvent utiliser cette API:

• Les applications de chat ou les sites de réseaux sociaux en ligne peuvent utiliser cette API pour indiquer à l'utilisateur si ses contacts sont actuellement joignables.
• Les applications kiosque exposées de manière publique, par exemple dans les musées, peuvent utiliser cette API pour revenir à la page d'accueil afficher si plus personne n'interagit avec le kiosque.
• Les applications qui nécessitent des calculs coûteux, comme dessiner des graphiques, peuvent limiter ces calculs aux moments où l'utilisateur interagit avec son appareil.

État actuel

Utiliser l'API Idle Detection

Détection de caractéristiques

Pour vérifier si l'API Idle Detection est compatible, utilisez:

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

Concepts de l'API Idle Detection

L'API Idle Detection suppose qu'il existe un certain niveau d'engagement entre l'utilisateur, le user-agent (c'est-à-dire le navigateur) et le système d'exploitation de l'appareil utilisé. Ceci est représenté dans deux dimensions:

• État d'inactivité de l'utilisateur: active ou idle: l'utilisateur a ou n'a pas a interagi avec le user-agent pendant un certain temps.
• État d'inactivité de l'écran: locked ou unlocked: le système dispose d'un verrouillage d'écran actif (comme un économiseur d'écran) qui empêche avec le user-agent.

Distinguer active de idle nécessite des heuristiques qui peuvent varier selon l'utilisateur, le user-agent et le système d'exploitation. Ce seuil doit aussi être relativement approximatif (voir Sécurité et autorisations).

Le modèle ne fait pas explicitement de distinction entre une interaction avec un contenu particulier (page Web dans un onglet utilisant l'API), le user-agent dans son ensemble ou le système d'exploitation ; cette définition revient au user-agent.

Utiliser l'API Idle Detection

Lorsque vous utilisez l'API Idle Detection, la première étape pour vous assurer que l'autorisation 'idle-detection' est accordée. Si l'autorisation n'est pas accordée, vous devez demandez-le via IdleDetector.requestPermission(). Notez que l'appel de cette méthode nécessite un geste de l'utilisateur.

// 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.');
}

La deuxième étape consiste ensuite à instancier IdleDetector. La valeur minimale de threshold est de 60 000 millisecondes (1 minute). Vous pouvez enfin lancer la détection d'inactivité en appelant la méthode La méthode start() de IdleDetector. Il prend un objet avec l'threshold inactif souhaité en millisecondes. et un signal facultatif avec un AbortSignal pour annuler la détection d'inactivité en tant que paramètres.

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);
}

Vous pouvez annuler la détection d'inactivité en appelant la méthode AbortController abort() .

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

Compatibilité avec les outils de développement

À partir de Chromium 94, vous pouvez émuler des événements d'inactivité dans les outils de développement sans être réellement inactifs. Dans les outils de développement, ouvrez l'onglet Sensors (Capteurs), puis recherchez Emulate Idle Detector state (Émuler l'état du détecteur d'inactivité). Vous pouvez découvrir les différentes options dans la vidéo ci-dessous.

Assistance Puppeteer

À partir de la version 5.3.1 de Puppeteer, vous pouvez Émuler les différents états d'inactivité pour tester de manière programmatique l'évolution du comportement de votre application Web.

Démo

Vous pouvez voir l'API Idle Detection en action grâce à la démonstration Ephemeral Canvas, qui efface son contenus après 60 secondes d'inactivité. On peut imaginer le déploiement dans un service sur lequel les enfants peuvent dessiner.

Polyremplissage

Certains aspects de l'API Idle Detection sont polyfillables. Il existe des bibliothèques de détection d'inactivité, telles que idle.ts, mais ces approches sont limitées au domaine de contenu d'une application Web: Bibliothèque exécutée dans le contexte de l'application Web doit interroger les événements d'entrée ou écouter les changements de visibilité coûteux. De manière plus restrictive, cependant, les bibliothèques ne peuvent pas signaler aujourd'hui quand un utilisateur devient inactif en dehors de sa zone de contenu (lorsqu'un utilisateur se trouve dans un autre onglet, par exemple). ou déconnecté de son ordinateur).

Sécurité et autorisations

L'équipe Chrome a conçu et implémenté l'API Idle Detection selon les principes fondamentaux défini dans l'article Contrôler l'accès aux fonctionnalités puissantes de la plate-forme Web, y compris le contrôle de l'utilisateur, la transparence et l'ergonomie. La possibilité d'utiliser cette API est contrôlée par Autorisation 'idle-detection'. Pour que vous puissiez utiliser l'API, une application doit également s'exécuter dans un contexte sécurisé de niveau supérieur.

Contrôle et confidentialité des données utilisateur

Nous tenons toujours à empêcher les acteurs malveillants d'utiliser les nouvelles API de manière abusive. Des sites Web apparemment indépendants, mais qui sont contrôlés par la même entité, peuvent obtenir des informations sur l'inactivité de l'utilisateur et corréler les données pour identifier les utilisateurs uniques d'une origine à l'autre. Pour limiter ce type d'attaques, l'API Idle Detection limite la précision des événements d'inactivité signalés.

Commentaires

L'équipe Chrome aimerait connaître votre avis sur votre expérience avec l'API Idle Detection.

Présentez-nous la conception de l'API

Y a-t-il un aspect de l'API qui ne fonctionne pas comme prévu ? Ou manque-t-il des méthodes ou les propriétés dont vous avez besoin pour mettre en œuvre votre idée ? Vous avez une question ou un commentaire sur le modèle de sécurité ? Signalez un problème de spécification dans le dépôt GitHub correspondant : ou ajouter vos réflexions à un problème existant.

Signaler un problème d'implémentation

Avez-vous détecté un bug dans l'implémentation de Chrome ? Ou l'implémentation est-elle différente des spécifications ? Signalez un bug sur new.crbug.com. Veillez à inclure autant de détails que possible, des instructions simples pour le reproduire et saisissez Blink>Input dans la zone Composants. Glitch est idéal pour partager des répétitions rapidement et facilement.

Apportez votre soutien à l'API

Prévoyez-vous d'utiliser l'API Idle Detection ? Votre assistance publique aide l'équipe Chrome à hiérarchisent les fonctionnalités et montre aux autres fournisseurs de navigateurs à quel point il est essentiel de les prendre en charge.

• Expliquez comment vous prévoyez de l'utiliser dans le fil de discussion du discours de WiCG.
• Envoyez un tweet à @ChromiumDev en utilisant le hashtag. #IdleDetection et n'hésitez pas à nous dire où et comment vous l'utilisez.

Liens utiles

• Explication publique
• Spécifications préliminaires
• Démonstration de l'API Idle Detection | Source de la démonstration de l'API Idle Detection
• Bug de suivi
• Entrée ChromeStatus.com
• Composant Blink: Blink>Input

Remerciements

L'API Idle Detection a été implémentée par Sam Goto. La compatibilité avec les outils de développement a été ajoutée par Maksim Sadym. Merci à Joe Medley, Kayce Basques Reilly Grant pour son avis sur cet article. L'image héros est de Fernando Hernandez sur Unsplash.