The Page Visibility API
Recently I had an interview for a Front End Developer role with a medium sized company. One question came up that I found myself particularly void of answer for, and that was describing the purpose and benefits of the Page Visibility API. Well, unlucky for me, I was not prepared to answer this questions; and that is why I am writing this blog. So that you don’t get stuck in the same place I did!
The main purpose of the Page Visibility API is to provide events you can watch for on your web page. They can let you know if the current page is visible, which is not always the case because of tabbed browsing. A user could just as easily be browsing their favorite social media site and leave your web page open in the background if not entirely by accident.
The API sends an event whenever the window is minimized or the browser it is open on is switched to another tab. In your code, you use this event, visibilitychange to perform some action, mainly stopping or pausing a process on your page that does not need to be done if no one is on the page.
As you can probably imagine, there are many performance management uses for keeping track of a visibilitychange event. When a user navigates away from your page, you may want to pause a video or audio, stop an image carousel from advancing, or stop updating some any type of data. One of the main uses I would consider would be to keep track of how many views your page gets but tracking this event on some database or backend service.
These are just some common uses for the Page Visibility API, but you can of course use it however you like. Maybe you have a countdown doomsday clock website, but you don’t want your user to miss the fun so you stop the clock when they navigate away. Maybe you’re just a little wild and you want to have a little leprechaun pop up no one can see the page, that users will never see, but you will know its there. Whatever your reason, I will now walk you through utilizing the Page Visibility API in your applications.
Let’s say we are building a simple application that increments a counter by one every three seconds. In React, we can set something up that looks like this:
This is a React application that uses the useState and useEffect hooks to allow for state in a functional component, and the setInterval method to perform some function every certain amount of time. In this case, add the value of 1 to the num variable and display it in an h2 tag on line 12.
If you run this code and navigate away from the browser where it is running for a few seconds, and come back you’ll notice that the counter still incremented even while we weren’t on the page. The Page Visibility API allows us to change this.
Say we only want the timer to run when we are looking at the page, otherwise we should halt the counter where it left off.
By adding the above code snippet, we create a function called handleVisibilityChange that checks if the tab is hidden. If it is, it clears the interval and halts the counter on the current value of num
Below that we see we call an event listener on the entire document, we watch our for a visibility change, and we pass the handleVisibilityChange function ass a parameter. Now if we navigate away from this page and go back, the counter will have stopped right where we left off!
To Dive Deeper
The document.visibilityState property can return only four possible values: visible, prerender, hidden, or unloaded. These allow you to preform actions like load a form for sign up when before loading the actual content of your page, as in the prerender value. Or prompt a user for feedback before they close their browser with unloaded.
Perhaps a more practical use than stopping a counter, would be to keep track of how many times a user navigates away from your page.
With a little altering of the code, we are now incrementing the value num every time the page is hidden. This will let us know whenever the user navigates away from the page. We can also check how many times the user views the page by changing line 8 to say document.hidden === false, however, this will generate the same number value, so it is fairly unnecessary.
Try It Out
Be creative when trying out this feature for the first time. Change colors, stop and start clocks, and try to work this into a video or audio usage. I am going to link the mozilla page for Page Visibility API. Happy Coding!