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 de détection d'inactivité avertit les développeurs lorsqu'un utilisateur est inactif, par exemple en cas d'absence d'interaction avec le clavier, la souris ou l'écran, d'activation d'un économiseur d'écran, de verrouillage de l'écran ou de passage à 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 publiques, par exemple dans les musées, peuvent utiliser cette API pour revenir à l'affichage "Accueil" si personne n'interagit plus avec le kiosque.
  • Les applications qui nécessitent des calculs coûteux, par exemple pour créer des graphiques, peuvent limiter ces calculs aux moments où l'utilisateur interagit avec son appareil.

État actuel

Étape État
1. Créer un message d'explication Fin
2. Créer une première ébauche de la spécification Fin
3. Recueillir des commentaires et itérer sur la conception En cours
4. Essai Origin Terminé
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 de détection d'inactivité 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 se traduit en deux dimensions:

  • État d'inactivité de l'utilisateur:active ou idle: l'utilisateur a interagi ou non avec l'user-agent pendant une certaine période.
  • É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 toute interaction avec l'agent utilisateur.

Distinguer active de idle nécessite des heuristiques qui peuvent varier en fonction de l'utilisateur, de l'agent utilisateur et du système d'exploitation. Il doit également s'agir d'un seuil raisonnablement grossier (voir la section 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 dans un onglet à l'aide de l'API), l'agent utilisateur dans son ensemble ou le système d'exploitation. Cette définition est laissée à l'agent utilisateur.

Utiliser l'API Idle Detection

La première étape à effectuer lorsque vous utilisez l'API Idle Detection 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.');
}

La deuxième étape consiste ensuite à instancier IdleDetector. La valeur threshold minimale est de 60 000 millisecondes (1 minute). Vous pouvez enfin démarrer la détection d'inactivité en appelant la méthode start() de IdleDetector. Il prend un objet avec le threshold d'inactivité souhaité en millisecondes et un signal facultatif avec un AbortSignal pour interrompre la détection d'inactivité comme 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 interrompre 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 des événements d'inactivité dans DevTools sans être réellement inactif. Dans les outils pour les développeurs, ouvrez l'onglet Capteurs, puis recherchez Emuler l'état du détecteur de veille. Vous pouvez voir les différentes options dans la vidéo ci-dessous.

Émulation de l'état du détecteur d'inactivité dans DevTools.

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 l'évolution du comportement de votre application Web.

Démo

Vous pouvez voir l'API de détection d'inactivité en action avec la démo du canevas éphémère qui efface son contenu après 60 secondes d'inactivité. Vous pouvez imaginer que cette fonctionnalité soit déployée dans un grand magasin pour que les enfants puissent dessiner dessus.

Démonstration du canevas éphémère

Polyfilling

Certains aspects de l'API de détection d'inactivité peuvent être polyfillés, et des bibliothèques de détection d'inactivité telles que idle.ts existent, mais ces approches sont limitées à la zone de contenu d'une application Web : la bibliothèque exécutée dans le contexte de l'application Web doit effectuer des requêtes coûteuses pour les événements d'entrée ou écouter les modifications de visibilité. Plus restrictivement, 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 est sur un autre onglet ou qu'il est déconnecté de son ordinateur).

Sécurité et autorisations

L'équipe Chrome a conçu et implémenté l'API Idle Detection en suivant les principes de base définis dans Controlling Access to Powerful Web Platform Features (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 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 souhaitons 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 sur l'inactivité des utilisateurs et corréler les données pour identifier les utilisateurs uniques entre les origines. Pour atténuer ce type d'attaques, l'API Idle Detection limite la précision des événements d'inactivité signalés.

Commentaires

L'équipe Chrome souhaite connaître votre expérience avec l'API Détection d'inactivité.

Parlez-nous de la conception de l'API

L'API ne fonctionne-t-elle 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 d'implémentation

Avez-vous 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 reproduire le problème et saisissez Blink>Input dans le champ Composants. Glitch est idéal pour partager des reproductions rapidement et facilement.

Afficher la compatibilité avec l'API

Prévoyez-vous d'utiliser l'API de détection d'inactivité ? 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.

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 sur cet article. L'image du héros est de Fernando Hernandez sur Unsplash.