Détectez les utilisateurs inactifs avec l'API de détection d'inactivité

Utilice la API de detección de inactividad para averiguar cuándo el Nom d'utilisateur no está utilizando activamente su dispositivo.

18 mai 2020
Mise à jour 2 octobre 2020

Qu'est-ce que l'API de détection d'inactivité?

L'API de détection d'inactivité avertit les développeurs lorsqu'un utilisateur est inactif, indiquant des éléments tels que le manque 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.

Cas d'utilisation suggérés pour l'API de détection d'inactivité

Voici quelques exemples de sites pouvant 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 disponibles.
• Les applications de kiosque affichées publiquement, par exemple dans les musées, 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

Comment utiliser l'API de détection d'inactivité

Activation via chrome: // flags

Pour expérimenter localement l'API de détection d'inactivité, sans jeton de test source, activez le
#enable-experimental-web-platform-features drapeau sur chrome://flags.

Activation du support pendant la phase de preuve d'origine

À partir de Chrome 84, l'API de détection d'inactivité sera disponible comme preuve d'origine. La preuve d'origine devrait se terminer sur Chrome 86.

Las pruebas de Origin le permiten probar nuevas funciones y brindar comentarios sobre su usabilidad, practicidad y efectividad a la comunidad de estándares la toile. Para obtener más información, consulte el Guide de test d'origine pour les développeurs Web. Pour vous inscrire à cette preuve d'origine ou à toute autre preuve d'origine, visitez le page d'inscription.

Inscrivez-vous pour obtenir une preuve d'origine

1. Demander un jeton par votre origine.
2. Ajoutez le jeton à vos pages. Il y a deux façons de le faire:
   • Ajouter un origine-procès balise à l'en-tête de chaque page. Par exemple, cela pourrait ressembler à ceci:
     
   • Si puede configurar su serveur, también puede agregar el token usando un Essai d'origine Encabezado HTTP. El encabezado de respuesta resultante debería verse así:
     Essai d'origine: TOKEN_GOES_HERE

Détection des fonctionnalités

Pour vérifier si l'API de détection d'inactivité est prise en charge, utilisez:

si ('IdleDetector' dans la fenêtre) {
}

Concepts de l'API de détection d'inactivité

La API de detección de inactividad asume que existe algún nivel de interacción entre el usuario, el agent utilisateur (es decir, el le navigateur) y el sistema operativo del dispositivo en uso. Esto se representa en dos dimensiones:

• L'état inactif de l'utilisateur:
  actif ou inactif- L'utilisateur a ou n'a pas interagi avec l'agent utilisateur pendant un certain temps.
• L'état inactif de l'écran:
  fermé à clé ou déverrouillé- Le système dispose d'un verrouillage d'écran actif (tel qu'un économiseur d'écran) qui empêche toute interaction avec l'agent utilisateur.

Distinctif actif depuis inactif nécessite des heuristiques qui peuvent différer selon l'utilisateur, l'agent utilisateur et le système d'exploitation. Il devrait également s'agir d'un seuil assez approximatif (voir Sécurité et autorisations).

El modelo intencionalmente no distingue formalmente entre la interacción con un Contenu particular (es decir, la página web en una pestaña que usa la API), el agente de usuario en su conjunto o el sistema operativo; esta definición se deja al agente del usuario.

Utilisation de l'API de détection d'inactivité

La première étape lors de l'utilisation de l'API de détection d'inactivité est de s'assurer que 'détection d'inactivité' l'autorisation 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.

const state = await IdleDetector.requestPermission();
if (state !== 'granted') {
return console.log('Idle detection permission not granted.');
}

La deuxième étape consiste ensuite à instancier le IdleDetector. Le minimum au seuil est de 60 000 millisecondes (1 minute). Vous pouvez enfin démarrer la détection inactive en appelant
IdleDetectorc'est démarrer () méthode. Prenez un objet avec le ralenti souhaité au seuil en millisecondes et facultatif signal avec un
AbortSignal

pour annuler la détection inactive 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.Journal(`Idle change: ${userState}, ${screenState}.`);
});
attendre idleDetector.démarrer({
au seuil: 60000,
signal,
});
console.Journal('IdleDetector is active.');
} catch (err) {
console.Erreur(err.patate douce, err.un message);
}

Vous pouvez annuler la détection inactive en appelant
AbortControllerc'est
avorter ()

méthode.

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

Prise en charge de DevTools

À partir de Chrome 86, vous pouvez émuler des événements d'inactivité dans Chrome DevTools sans être réellement inactif. Dans DevTools, ouvrez le Capteurs onglet et recherche Émuler l'état du détecteur d'inactivité. Vous pouvez voir les différentes options dans la vidéo ci-dessous.

Stand de marionnettiste

À partir de la version 5.3.1 de Puppeteer, vous pouvez
émuler les différents états inactifs
para probar mediante programmation cómo cambia el comportamiento de su aplicación web.

Manifestation

Vous pouvez voir l'API de détection d'inactivité en action avec le Démo de toile éphémère qui supprime son contenu après 60 secondes d'inactivité. Vous pouvez imaginer que cela sera implémenté dans un grand magasin pour que les enfants puissent griffonner.

Polyfilling

Certains aspects de l'API de détection d'inactivité sont des bibliothèques de détection polyvalentes et inactives telles que inactive.ts Elles 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 une interrogation coûteuse pour les événements d'entrée ou écouter les changements de visibilité. Cependant, de manière plus restrictive, les bibliothèques ne peuvent pas dire aujourd'hui quand un utilisateur reste inactif en dehors de sa zone de contenu (par exemple, lorsqu'un utilisateur se trouve sur un autre onglet ou se déconnecte de son ordinateur).

Sécurité et autorisations

L'équipe Chrome a conçu et mis en œuvre l'API Idle Detection en utilisant les principes de base définis dans Contrôlez 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 le
'détection d'inactivité' permis. Pour utiliser l'API, une application doit également être exécutée sur un
contexte sécurisé de niveau supérieur.

Contrôle de l'utilisateur et confidentialité

Nous voulons toujours empêcher les acteurs malveillants d'utiliser à mauvais escient les nouvelles API. Des sites Web apparemment indépendants, mais en fait contrôlés par la même entité, peuvent obtenir des informations inactives de l'utilisateur et corréler les données pour identifier des utilisateurs uniques dans toutes les sources. Pour atténuer ces types d'attaques, l'API de détection d'inactivité limite la granularité des événements d'inactivité signalés.

Retour

L'équipe Chrome souhaite connaître vos expériences avec l'API Idle Detection.

Parlez-nous de la conception de l'API

Y a-t-il quelque chose dans l'API qui ne fonctionne pas comme prévu? Ou vous manquez-vous 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é? Déposer un problème de spécification dans le Dépôt GitHubou ajoutez vos réflexions à un problème existant.

Signaler un problème avec le déploiement

Vous avez trouvé un bogue avec la mise en œuvre de Chrome? Ou la mise en œuvre est-elle différente de la spécification? Signaler un bogue dans new.crbug.com. Assurez-vous d'inclure autant de détails que possible, des instructions simples à reproduire et de saisir Clignotement> Entrée dans le Composants (modifier) boîte.
Échec fonctionne très bien pour un partage rapide et facile des répétitions.

Afficher la prise en charge de l'API

¿Está pensando en utilizar la API de detección de inactividad? Su soporte público ayuda al equipo de Chrome a priorizar funciones y muestra a otros proveedores de navigateurs lo importante que es brindarles soporte.

Partagez comment vous prévoyez de l'utiliser dans le Fil de discussion WICG
Envoyer un tweeter à @Cromodev avec lui #idledetection hashtag et faites-nous savoir où et comment vous l'utilisez.

Liens utiles

Merci

L'API de détection d'inactivité a été implémentée par Sam goto. La prise en charge de DevTools a été ajoutée par Maksim Sadym. Grâce à Joe medley,
Kayce Basquesy
Bourse Reilly pour leurs critiques de cet article. L'image du héros est de Fernando Hernandez au
Unsplash.