Limited support Limited browser support. Check compatibility before use.

Idle detection

The IdleDetector interface of the Idle Detection API provides methods and events for detecting user activity on a device or screen.

This interface requires a secure context.

EventTarget IdleDetector

Devices and Sensors

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
IdleDetector
Experimental
94
114
94
HTML attribute
allow (idle-detection)
Experimental
94
94
94
DOM API
change_event
Experimental

The change event of the IdleDetector interface fires when the value of userState or screenState has changed.
94
114
94
IdleDetector
Experimental

The IdleDetector() constructor creates a new IdleDetector object which provides events indicating when the user is no longer interacting with their device or the screen has locked.
94
114
94
requestPermission_static
Experimental

The requestPermission() static method of the IdleDetector interface returns a Promise that resolves with a string when the user has chosen whether to grant the origin access to their idle state. Resolves with "granted" on acceptance and "denied" on refusal.
94
114
94
screenState
Experimental

The screenState read-only property of the IdleDetector interface returns a string indicating whether the screen is locked, one of "locked" or "unlocked".
94
114
94
start
Experimental

The start() method of the IdleDetector interface returns a Promise that resolves when the detector starts listening for changes in the user's idle state. This method takes an optional options object with the threshold in milliseconds where inactivity should be reported and signal for an AbortSignal to abort the idle detector.
94
114
94
userState
Experimental

The userState read-only property of the IdleDetector interface returns a string indicating whether the user has interacted with the device since the call to start().
94
114
94
Other
idle-detection
Experimental

The HTTP Permissions-Policy header idle-detection directive controls whether the current document is allowed to use the Idle Detection API to detect when users are interacting with their devices, for example to report "available"/"away" status in chat applications.
94
94
94
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Removed
  • This feature was removed in a later browser version (96)
Notes 1 item(s)
Removed
  • This feature was removed in a later browser version (96)
Notes 1 item(s)
Removed
  • This feature was removed in a later browser version (96)
Notes 1 item(s)
Removed
  • This feature was removed in a later browser version (96)
Notes 1 item(s)
Removed
  • This feature was removed in a later browser version (96)
Notes 1 item(s)
Removed
  • This feature was removed in a later browser version (96)
Notes 1 item(s)
Removed
  • This feature was removed in a later browser version (96)

Syntax

JAVASCRIPT 
const controller = new AbortController();
const signal = controller.signal;

startButton.addEventListener("click", async () => {
  if ((await IdleDetector.requestPermission()) !== "granted") {
    console.error("Idle detection permission denied.");
    return;
  }

  try {
    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: 60_000,
      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);
  }
});

stopButton.addEventListener("click", () => {
  controller.abort();
  console.log("IdleDetector is stopped.");
});

Use cases

  • Using Idle detection

    The IdleDetector interface of the Idle Detection API provides methods and events for detecting user activity on a device or screen.

Cautions

  • Limited browser support. Check compatibility before use.

Implementation notes

  • Some APIs require a secure context (HTTPS) or user activation. Check the requirements before use.

Related links