Idle Detection API

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 in secure contexts (HTTPS), in some or all supporting browsers.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

Note: This feature is available in Dedicated Web Workers.

The Idle Detection API provides a means to detect the user's idle status, active, idle, and locked, specifically, and to be notified of changes to idle status without polling from a script.

Concepts and Usage

Native applications and browser extensions use idle detection base user experiences on when a user is interacting with a device. For example, chat applications can show other users of an application whether someone is available. Other applications might choose to show notifications only when a user is interacting with the app. A web application could use this API for similar use cases. Additionally, a progressive web app could use idle detection to trigger a service worker update when the app isn't being used.

Interfaces

IdleDetector

Provides methods and events for detecting user activity on a device or screen.

Examples

The following example shows creating a detector and logging changes to the user's idle state. A button is used to get the necessary user activation before requesting permission.

js
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

Browser compatibility