HTML5 comes with a very special API which is known as Page Visibility. Page Visibility API is a simple but has an important role so You better take advantage of this in your applications. Today I will show you about the Page Visibility API.
What is Page Visibility API in HTML5?
Page Visibility API allows the application to programmatically know when a web page is visible to the user. This API is mainly concerned about to perform some action when user activates the browser tab.It also defines a visibility state and responds to changes in viewing.
Now all browsers support multi-tab and is good but even if the user opened N number of tabs in browser windows, can view just one tab at a time others are not active.So, For each tab in browser have an active state or hidden
Also, you can use the Page Visibility API to detect the page in real time.
What is use of HTML5 Page Visibility API?
So, Do you get the exact purpose of API? Sometimes what happen you are browsing some news site and video on that site start playing continuously even you are not watching that video, You just open that tab and move to another tab for performing some task and video continuously play which leads to use bandwidth for loading resources, so such unnecessary constant perform task will waste your resources a lot. Therefore, Page Visibility API in HTML5 is useful.
In that case, You can use Page Visibility API in which web program will update the page time to time automatically and also ensure to send information to user time to time.So, When the user is not browsing the page, it will control it with pause event.
At the first stage, Page Visibility API seems not very useful but it tremendously improves performance. For example, If you have some videos on your site and some use playing the video, online video will continue to load the video until the video is loaded so using the Page Visibility API, you can pause the loading of the video until user is browsing the other things.It will really useful to save bandwidth and resources which are very important.
How many display properties of the document Page Visibility API support?
The current version of the Page Visibility API has two properties in the browser’s document object:
- Hidden (document.hidden): Hidden is boolean type. If the current tab is activate,document.hidden value is false, otherwise true.
- VisibilityState: (document.visibilityState) currently, VisibilityState has four possible values:
- Hidden: When user minimize the browser or switch to another tab, visibilityState value is hidden to lock screen.
- Visible: When the browser top context of the document is displayed at least among a screen, visibilityState value will set as a visible. when the browser window is not minimized, the visibilityState state is also visible
- Prerender: visibilityState returns prerender value when the document is loaded out of the screen or not visible. This is optional and even all browsers not support it.
- Unloaded: visibilityState returns unloaded value when the document will be unloaded.Again,This is also an optional and even all browsers not support it.
Page Visibility API Event visibilitychange?
In addition, Page Visibility API support an event which is visibilitychange which will be triggered when the document changes the visibility or view. You can use the direct function for this event for the document object.
After all information, it is a time to understand how to use Page Visibility API so, let’s take a look into the example. The role of this example is to monitor whether to change the label visibility and generate visibility prompt when the label changes.
First of all, To check the browser support the Page Visibility API or not, which you can achieve by the private property and to use the properties Page Visibility API offer a browser to add the private prefix.
So, In the following example, will first check the type of browser, and then use the Page Visibility API.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | function browerHiddenProperty(){ var result; var prefixes = ['webkit', 'moz', 'ms', 'o']; prefixes.forEach(function(prefix){ if( typeof document[ prefix + 'Hidden' ] != 'undefined' ){ result = prefix; } }); return result; } function init(){ prefix = browerHiddenProperty(); var content = $('content'); document.addEventListener( prefix + 'visibilitychange', function onVisibilityChange(e){ var contentvar = null; if( document[ prefix + 'VisibilityState' ] == 'hidden' ) contentvar = '<p>Hide to page</p>'; else if( document[ prefix + 'VisibilityState' ] == 'visible' ) contentvar= '<p>Open the page</p>'; content.innerHTML = content.innerHTML + contentvar; }); } window.onload = init(); |
If your browser does not support Page Visibility API, the script will be ignored by the browser.
Example for Event VisibilityChange
This code is a simply checking visibilitychange event to detect the state of the current page. Here I will show you both with and without prefix so you can manage backward compatibility as some old version of browser properties and methods must require prefix because they are in some browsers with the private prefix.
1 2 3 4 5 6 7 8 9 | document.addEventListener ('visibilitychange', function (event) { if (!document.hidden) { } else { alert('This page is hidden.'); } }); |
or you can use because some browsers may require a prefix, such as webkitHidden.
1 2 3 4 5 | document . addEventListener ( bPrefix + 'visibilitychange' , function onVisibilityChange ( e ) { // do some Thing ... }); |
bPrefix browser prefixes, such as WebKit.
Page Visibility API Browser Support:
Do you want to know whether the browser supports Page Visibility API or not? Page Visibility API is good to use for all modern browsers except Opera Mini. Also, IE10+ browser supports this API.
Though I recommend you programmatically check your browser support this API or not.
Practical example:
This practical example shows you how PageVisibility API used to stop and playback.Play the following vide and switch to the another tab in the browser and see how your video stops to play or pause until you come back to the tab.
Here is the another demo:
Advantages of Page Visibility API
Page Visibility API has advantages which will help you to achieve following benefits:
It Saves server resources. Ajax polling server resource usage such will often be ignored, closed this request may
- save resources.
- Save memory consumption.
- Save bandwidth consumption.
Therefore, the use of Page Visibility whether it is for users or servers are good.
Conclusion
In the end, Page Visibility API is very simple, make the site more user-friendly and you can control the behavior of the page. I suggest that the to integrate Page visibility API in your own project and see the difference.
