IdleDetector
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Secure context: This feature is available only insecure contexts (HTTPS), in some or allsupporting browsers.
Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.
Note: This feature is available inDedicated Web Workers.
TheIdleDetector interface of theIdle Detection API provides methods and events for detecting user activity on a device or screen.
This interface requires a secure context.
Constructor
IdleDetector()ExperimentalCreates a new
IdleDetectorobject.
Instance properties
IdleDetector.userStateRead onlyExperimentalReturns a string indicating whether the users has interacted with either the screen or the device within the threshold provided to
start(), one of"active"or"idle". This attribute returnsnullbeforestart()is called.IdleDetector.screenStateRead onlyExperimentalReturns a string indicating whether the screen is locked, one of
"locked"or"unlocked". This attribute returnsnullbeforestart()is called.
Events
changeExperimentalCalled when the value of
userStateorscreenStatehas changed.
Static methods
IdleDetector.requestPermission()ExperimentalReturns a
Promisethat resolves when the user has chosenwhether to grant the origin access to their idle state. Resolves with"granted"on acceptance and"denied"on refusal.
Instance methods
IdleDetector.start()ExperimentalReturns a
Promisethat resolves when the detector starts listening forchanges in the user's idle state.userStateandscreenStateare giveninitial values. This method takes an optionaloptionsobject with thethresholdinmilliseconds where inactivity should be reported andsignalfor anAbortSignalto abort the idle detector.
Examples
The following example shows creating a detector and logging changes to theuser's idle state. A button is used to get the necessary user activation beforerequesting permission.
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.");});Specifications
| Specification |
|---|
| Idle Detection API # api-idledetector |