JavaScript's Page Visibility API

I don’t want to listen to your promo video when I switch tabs 🐒

For those not familiar, the Page Visibility API enables you to detect when a page is visible. This is useful when your site is using one of many browser tabs in a users browser window.

For those in camp TL;DR, use the Page Visibility API to do things like pause media when a user navigates to another tab. This has the major benefit of saving resources on a users machine so that they don’t close your app in haste.

Why? permalink

The main reason is to save resources on a users machine whilst they’re not using a page. Not doing so, might prompt a user to close your site in haste assuming it’s the culprit slowing down their browser 👎

When? permalink

Use the Page Visibility API to do certain things when a user navigates to another 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 🔈

How? permalink

We need to bind an event listener for the visibilitychange event. When this event fires, we can then check the value of document.hidden. Be aware that older versions of browser will update document.msHidden and document.webkitHidden.

Let’s put together a basic example. Consider this tongue in cheek site user retention strategy I tweeted recently 😜

            javascript
            Copy
          const handleChange = e => {
  document.title = document.hidden ? '😭 Come back! 😭' : 'Awesome Site! 👍'
}
document.addEventListener('visibilitychange', handleChange)

Might not be the most effective use of the Page Visibility API but shows how easy it is to put something together.

You could update the document.title with something useful when the tab is inactive. Notifications is one use case that springs to mind. Updating a sports score for a user if they are following text commentary could be another use case.

You’re not limited to updating the document.title. You could do many things. You could pause a video, mute some audio or even bring your site to a complete halt ⏱

If you're daring, you might even do something to grab your users attention. However, please be wary of performance and not annoying your users.

            javascript
            Copy
          const audio = new Audio('since-youve-been-gone.mp3')
const handleChange = e => {
  document.title = document.hidden ? '😭 Come back! 😭' : 'Awesome Site! 👍'
  audio[document.hidden ? 'play' : 'pause']()
}
document.addEventListener('visibilitychange', handleChange)

For example, this demo plays party music when the user changes tab. Turn your speaker volume down!

Check out this pen by Jhey (@jh3y) on CodePen.

That’s it! permalink

It’s a short article today. In my view the Page Visibility API is often overlooked. It can be a nice touch to your sites and apps. In some cases, this small feature can add significant value to the user experience of your site.

You can read a little more in depth about the Page Visibility API on the MDN website here.

And here’s a demo!

Check out this pen by Jhey (@jh3y) on CodePen.