Observer Instead of Detector/Start/Abort

[jimbo2150]

They way this API is presented is confusing.

An IdleDetector object is understandable but then using start is non-standard and outside of what most developers think of. Then, instead of doing IdleDetector.stop() it requires the use of a signal that uses AbortController which makes no sense. In a fetch request, the AbortController is uses to abort or stop fetching a resource. In this context it, and upon first reading the spec, I thought it was a way to prevent the user from going idle (like preventing screen saver). It was confusing to think that abort was the way to stop watching for an idle user.

Instead, I propose going the Intersection Observer API route since it is not confusing to think that you are observing when a user is or is not idle.

if ((await navigator.permissions.query({name: 'notifications'})).state !== 'granted') {
    console.log('Notifications permission not granted.');
    // Request permission
}

if ((await navigator.permissions.query({name: 'notifications'})).state == 'granted')
    var idleObs = new UserIdleObserver((states, observer) => {
        // states.user UserIdleState
        // states.screen ScreenIdleState
    }, { threshold: 60000 });

    idleObs.observe();

    // Done observing?
    window.setTimeout(() => {
        idleObs.unobserve();
    }, 120000);
}

Where the observe() can either contain no parameters or one (the global object). No parameter defaults to the global object.

At the very least I don't feel using AbortController is necessary (at least externally) and is confusing.

const idleDetector = new IdleDetector();
idleDetector.addEventListener('change', () => {
  console.log(`Idle change: ${idleDetector.userState}, ${idleDetector.screenState}.`);
});    
await idleDetector.start({
  threshold: 60000,
});
window.setTimeout(() => {
  await idleDetector.stop();
  console.log('IdleDetector is stopped.');
}, 120000);

[tomayac]

I thought it was a way to prevent the user from going idle (like preventing screen saver).

This is what the Screen Wake Lock API is for.

I don't feel using AbortController is necessary

I'm not a fan of AbortController myself, but it's one of the W3C TAG design principles to use it.

That being said, personally I like the observer pattern that you outline.

[reillyeon]

I don't have a strong opinion about the various options discussed here and on #10. This is the design that was reviewed in w3ctag/design-reviews#336 and so I am hesitant to change it given all the proposals are functionally equivalent.