如何检测反应 web 应用程序中的空闲时间？

Question

I am developing a react web app that contains the functionality of idle time detection(small scale project). The app should detect the whole system's(OS) idle time. If the user closes the browser I mean not the case user idle for the app, but for the whole system/OS: no keyboard input, no mouse operation, no-touch even when no focus on the app or app is minimized. Is there any way to implement this?

Answer 1

Here is an example project of implementing idle-timeout in React. You can clone this project and run it on your machine.

// clone the project
git clone https://github.com/bbachi/react-idle-timeout.git
// install dependencies and start the project
npm install
npm start

This is a simple project which has two screens: login screen and dashboard screen.

When you log in with any username and password, dashboard displays with some user table. If you are idle for 5 seconds we are going to let the user know with a modal window and if the user is still idle after 5 seconds, the user will be logged out.

For details, this blog post seems to support the idea.