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

Thomas Steiner

Publié le 18 mai 2020

Browser Support

  • Chrome: 94.
  • Edge: 114.
  • Firefox: not supported.
  • Safari: not supported.

Source

L'API Idle Detection informe les développeurs lorsqu'un utilisateur est inactif, par exemple lorsqu'il n'interagit pas avec le clavier, la souris ou l'écran, lorsqu'un économiseur d'écran est activé, lorsque l'écran est verrouillé ou lorsqu'il passe à 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 informer l'utilisateur si ses contacts sont joignables.
  • Les applications de kiosque accessibles au public, par exemple dans les musées, peuvent utiliser cette API pour revenir à la vue "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.

Utiliser l'API

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

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

Concepts de l'API

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

  • L'état d'inactivité de l'utilisateur active ou idle : l'utilisateur a interagi ou non avec l'agent utilisateur pendant un certain temps.
  • L'é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 l'interaction avec l'agent utilisateur.

La distinction entre active et idle nécessite des heuristiques qui peuvent varier selon l'utilisateur, l'agent utilisateur, et le système d'exploitation. Il doit également s'agir d'un seuil raisonnablement grossier (voir Sécurité et autorisations).

Le modèle ne fait pas formellement la distinction entre l'interaction avec un contenu particulier (c'est-à-dire la page Web d'un onglet utilisant l'API), l'agent utilisateur dans son ensemble ou le système d'exploitation ; cette définition est laissée à l'agent utilisateur.

Demander des autorisations et instancier

La première étape lors de l'utilisation de l'API Idle Detection consiste à s'assurer que l'autorisation 'idle-detection' est accordée. Si l'autorisation n'est pas accordée, vous devez la demander avec 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 à instancier IdleDetector. Le minimum threshold est de 60 000 millisecondes (1 minute). Vous pouvez enfin démarrer la détection d'inactivité en appelant la méthode IdleDetector's start(). Il prend un objet avec le threshold d'inactivité 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);
}

Arrêter la détection d'inactivité

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

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

Compatibilité avec les Outils de développement

Vous pouvez émuler des événements d'inactivité dans les Outils de développement, sans être réellement inactif. 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é). Vous pouvez voir les différentes options dans la vidéo.

Émulation de l'état du détecteur d'inactivité 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 par programmation l'évolution du comportement de votre application Web.

Démo

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

Démonstration de la toile éphémère

Polyester

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 s'exécutant 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 manière plus restrictive, les bibliothèques ne peuvent pas savoir aujourd'hui quand un utilisateur est inactif en dehors de sa zone de contenu (par exemple, lorsqu'un utilisateur se trouve dans un autre onglet ou est complètement déconnecté de son ordinateur).

Sécurité et autorisations

L'équipe Chrome a conçu et implémenté l'API Idle Detection en utilisant les principes de base définis dans 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' 'idle-detection' autorisation. Pour utiliser l'API, une application doit également s'exécuter dans un contexte sécurisé de premier niveau.

Contrôle utilisateur et confidentialité

Nous souhaitons toujours empêcher les acteurs malveillants d'utiliser de manière abusive les nouvelles API. Les sites Web apparemment indépendants, mais en réalité contrôlés par la même entité, peuvent obtenir des informations sur l'inactivité des utilisateurs et corréler les données pour identifier des utilisateurs uniques sur plusieurs origines. Pour atténuer ce type d'attaques, l'API Idle Detection limite la granularité des événements d'inactivité signalés.

Commentaires

Un aspect de l'API ne fonctionne pas comme prévu ? Ou manque-t-il des méthodes ou des propriétés dont vous avez besoin pour implémenter 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 lié à l'implémentation

Vous avez trouvé un bug dans l'implémentation de Chrome ? Ou l'implémentation est-elle différente de la spécification ? Signalez un bug sur new.crbug.com. Veillez à inclure autant de détails que possible, des instructions simples pour la reproduction et saisissez Blink>Input dans la zone Components (Composants).

Soutenir l'API

Vous prévoyez d'utiliser l'API Idle Detection ? Votre soutien public aide l'équipe Chrome à hiérarchiser 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 WICG Discourse.
  • Envoyez un tweet à @ChromiumDev avec le hashtag #IdleDetection et indiquez-nous où et comment vous l'utilisez.

Liens utiles

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.