detect if your website run in background

Question

is there a way to detect if my website runing in background , for example : my website is open in browser but the user standing on the other tab youtube for example.

Answer 1

ifvisible.js, demo

Crossbrowser & lightweight way to check if user is looking at the page or interacting with it.

Use Page Visibility API, demo

The Page Visibility API lets you know when a webpage is visible or in focus. With tabbed browsing, there is a reasonable chance that any given webpage is in the background and thus not visible to the user. When the user minimizes the webpage or moves to another tab, the API sends a visibilitychange event regarding the visibility of the page. You can detect the event and perform some actions or behave differently. For example, if your web app is playing a video, it would pause the moment the user looks at another browser, and plays again when the user returns to the tab. The user does not lose their place in the video and can continue watching.