Why?
The Page Visibility API assists you in detecting when a web page is visible. It could be useful when your website is using one of many browser tabs in a users browser window.
When?
You can use the Page Visibility API to do certain things when a user navigates to a different tab.
- Pause video and audio 🎵
- Pause animations 🎞
- Stop any network requests being made 📞
- Any other things you might want to do when the user navigates away to another tab. For example, you might change the
- document.title or play a sound 🔈
JavaScript Code
const handleChange = (e) => {
document.title = document.hidden ? 'Come back' : 'Welcome Back'
}
document.addEventListener("visibilitychange", handleChange);
