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, ce qui leur indique par exemple une absence d'interaction avec le clavier, la souris, l'écran, l'activation d'un économiseur d'écran, le verrouillage de l'écran ou le passage à un autre écran. Un seuil défini par le développeur déclenche la notification.

Suggestions de cas d'utilisation de l'API Idle Detection

Voici quelques exemples de sites susceptibles d'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 au public, dans les musées, par exemple, peuvent utiliser cette API pour revenir à la vue d'accueil si personne n'interagit plus avec le kiosque.
• Les applications qui nécessitent des calculs coûteux, par exemple pour dessiner des graphiques, peuvent limiter ces calculs aux moments où l'utilisateur interagit avec son appareil.

État actuel

Step	État
1. Créer une vidéo explicative	Fin
2. Créer un brouillon initial de la spécification	Fin
3. Recueillir des commentaires et itérer sur la conception	En cours
4. Phase d'évaluation	Terminée
5. Lancement	Chromium 94

Utiliser l'API Idle Detection

Détection de fonctionnalités

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é. Elle est représentée en deux dimensions:

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

Pour faire la distinction entre active et idle, vous devez appliquer des méthodes heuristiques pouvant différer selon l'utilisateur, le user-agent et le système d'exploitation. Il doit également s'agir d'un seuil raisonnablement approximatif (voir Sécurité et autorisations).

Le modèle ne fait pas de distinction formelle entre l'interaction avec un contenu particulier (c'est-à-dire la page Web d'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 consiste à vous assurer que l'autorisation 'idle-detection' est accordée. Si l'autorisation n'est pas accordée, vous devez la demander 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.');
}

Remarque:Au départ, la détection d'inactivité était limitée par l'autorisation de notification. Bien que de nombreux cas d'utilisation de cette API impliquent des notifications, mais pas tous, les éditeurs de spécifications de détection d'inactivité ont décidé de la restreindre à une autorisation dédiée de détection de l'inactivité.

La deuxième étape consiste à instancier IdleDetector. La valeur threshold minimale est de 60 000 millisecondes (1 minute). Vous pouvez enfin lancer la détection d'inactivité en appelant la méthode start() de IdleDetector. Pour annuler la détection d'inactivité en tant que paramètres, il faut un objet avec l'threshold d'inactivité souhaité en millisecondes et un signal facultatif avec un 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);
}

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

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

Compatibilité avec les outils de développement

À partir de Chromium 94, vous pouvez émuler les é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) et recherchez Emulate Idle Detector state (Émuler l'état du détecteur d'inactivité). Pour découvrir les différentes options, regardez la vidéo ci-dessous.

Émulation de l'état d'inactivité du détecteur dans les outils de développement.

Compatibilité avec 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 le changement de comportement de votre application Web.

Démonstration

Vous pouvez voir l'API Idle Detection en action avec la démo de Ephemeral Canvas qui efface son contenu après 60 secondes d'inactivité. Elle est déployée dans un grand magasin pour que les enfants puissent gribouiller.

Polyremplissage

Certains aspects de l'API Idle Detection sont polyfillables et des bibliothèques de détection d'inactivité comme idle.ts existent, mais ces approches sont limitées à la zone de contenu propre d'une application Web : la bibliothèque exécutée dans le contexte de l'application Web doit interroger de manière coûteuse les événements d'entrée ou écouter les changements de visibilité. Toutefois, de façon plus restrictive, les bibliothèques ne peuvent pas détecter à l'heure actuelle lorsqu'un utilisateur est inactif en dehors de sa zone de contenu (par exemple, lorsqu'un utilisateur se trouve dans un autre onglet ou est déconnecté de son ordinateur).

Sécurité et autorisations

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

Contrôle et confidentialité des utilisateurs

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

Commentaires

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

Décrivez-nous la conception de l'API.

Y a-t-il quelque chose dans l'API qui ne fonctionne pas comme prévu ? Ou manque-t-il des méthodes ou des 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 ajoutez vos commentaires à 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 à l'adresse new.crbug.com. Veillez à inclure autant de détails que possible, ainsi que des instructions simples pour reproduire le bug, puis saisissez Blink>Input dans la zone Composants. Glitch est idéal pour partager des reproductions simples et rapides.

Afficher la compatibilité avec l'API

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

• Indiquez comment vous prévoyez de l'utiliser dans le fil de discussion sur le WICG Discourse.
• Envoyez un tweet à @ChromiumDev avec le hashtag #IdleDetection, et indiquez-nous où et comment vous l'utilisez.

Liens utiles

• Explication publique
• Version provisoire des spécifications
• 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 et Reilly Grant pour leurs commentaires sur cet article. L'image héros est de Fernando Hernandez sur Unsplash.