Limited supportUse with care and provide a fallback when broad support matters.
Embedded Limited support

Idle detection

The IdleDetector API is used to notify a webpage of the user's idle, active, and locked state. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

EmbeddedInteraction

Overview

The IdleDetector API is used to notify a webpage of the user's idle, active, and locked state. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
IdleDetector
Experimental
94
114
94
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
html.elements.iframe.allow.idle-detection
Experimental
94
94
94
http.headers.Permissions-Policy.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 detector = new IdleDetector();
detector.addEventListener('change', () => {
  console.log('User:', detector.userState);  // 'active' | 'idle'
  console.log('Screen:', detector.screenState);   // 'locked' | 'unlocked'
});
await detector.start({ threshold: 60000 });

Use cases

  • Use Idle detection

    Use Idle detection when standard HTML needs a more specific platform feature, semantic signal, or browser capability.

  • Handle edge cases

    Apply Idle detection to solve a focused requirement without redesigning the whole page architecture.

Cautions

  • Test Idle detection in your target browsers and input environments before depending on it as a primary behavior.
  • Provide a fallback path or acceptable degradation strategy when support is still limited.

Accessibility

  • Make sure Idle detection supports the intended task without making the page harder to perceive, understand, or operate.

Related links

Powered by web-features