It seems there is a Page Visibility API that will let us trigger actions based on the page tab begging active or not.
How it works:
const onVisibilityChange = () => {
console.log("The current page is now:" + document.hidden);
// document.hidden will return true or false
}
document.addEventListener("visibilitychange", onVisibilityChange);
For example, a nice application for it will be to play a background sound only when the user is on our page.
let backgroundSound = new Audio('/assets/background.mp3');
const onVisibilityChange = () => {
const video = document.getElementById("my-video");
return document.hidden
? backgroundSound.pause()
: backgroundSound.play();
}
document.addEventListener("visibilitychange", onVisibilityChange);
The is also the document.visibilityState
that will return 'hidden'
, 'visible'
or 'prerender'
(when the website is still loading).
It's quite an old feature (added somewhere around 2011) but only now I've found about it.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.