How to detect inactive users with Idle Detection API

This post is a summary of a web.dev article.

What is the Idle Detection API?

Idle Detection API is one of Chrome's origin trials, which means it is a feature in progress planned for a release.

Idle Detection API can be used to detect user inactivity based on a variety of measurements such as a mouse or keyboard inactivity, screensaver activation, or locking the screen. The threshold is defined by the developer, based on the desired result.

Usage of the Idle Detection API

Check if idleDetector is available:

const hasDetectorAPI = 'IdleDetector' in window;

Request permission for idleDetector:

await IdleDetector.requestPermission();

Starting the idleDetector:

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

const detector = new IdleDetector();

detector.addEventListener('change', () => {
  console.log(detector.userState); // idle | active
  console.log(detector.screenState); // locked | unlocked
});

await detector.start({
    threshold: 60000,
    signal,
});

Use cases of Idle Detection API

Some examples where Idle Detection API can be utilized:

• Apps with expensive computation (to put halt to computation)
• Chatrooms (to handle activity status)
• Forms / Documents (to autosave on user inactivity)

... and many other use cases.

Support Idle Detection API release

If you wish to see and use this API, check out this link on how to support its release.

Comments

[Ian]

Actually a pretty cool API. Hope it makes it to release. It basically takes away manually checking for mouse movement and focus events and puts it in a tidy API. Nice find