Using the Page Visibility API for Detecting Your Page Is Being Viewed by the End User or Not

Using the Page Visibility API for Detecting Your Page is Being Viewed by the End User or Not

HTML5 have many new features. One such feature is the new visibility API. This API allows you to easily detect your page is active, and in addition, you can perform specific events if it’s active. In this article we will show you how implement this feature in your application.

Visibility API
Without worrying about browser compatibility for the moment. There is an event called visibilitychange that gets fired every time window focus changes. In addition, there is a property called document.hidden that will tell your page is visible or not.

For example, the following script will change the document title based on your page is active or not: 

1
2
3
4
5
6
7
8

document.addEventListener("visibilitychange", function(event){
  if(document.hidden) {
    document.title = "My Page - Inactive";
  }
  else {
    document.title = "My Page - Active";
  }
});

Some browsers still require prefixing, such as the Android 4.4 browser. For these browsers, a bit more code is required.

We need some code to detect whether a prefixed version of the property. The code below does exactly that. It loops through each vendor prefix and sees if it is present in the document object. If so, it returns the correct prefixed version: 

1
2
3
4
5
6
7
8
9
10
11

function getHiddenProperty() {
  var prefixes = ['webkit','moz','ms','o'];

  if ('hidden' in document) return 'hidden';

  for(var prefix = 0; prefix < prefixes.length; prefixes++) {
    if ((prefixes[prefix] + "Hidden") in document) {
      return prefixes[i] + 'Hidden';
    }
  }
}

Next, we create a simple wrapper function that returns true if hidden and false if not: 

1
2
3

function isHidden() {
  return document[getHiddenProperty()]
}

Well now we can write a third function to get the name of the event to use by using the visibility change event: 

1
2
3
4
5
6
7
8

function getVisibilityChangeEvent() {
  var visProp = getHiddenProperty();

  if ( visProp ) {
    var eventName = visProp.replace(/[H|h]idden/,'') + 'visibilitychange';
    return eventName;
  }
}

Now can modify our original function to use the functions: 

1
2
3
4
5
6
7
8

document.addEventListener(getVisibilityChangeEvent(), function(event){
  if(isHidden()) {
    document.title = "My Page - Inactive";
  }
  else {
    document.title = "My Page - Active";
  }
});

The Complete Codes. 

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
26
27
28
29
30
31
32
33

function getHiddenProperty() {
  var prefixes = ['webkit','moz','ms','o'];

  if ('hidden' in document) return 'hidden';

  for(var prefix = 0; prefix < prefixes.length; prefixes++) {
    if((prefixes[prefix] + "Hidden") in document ) {
      return prefixes[i] + 'Hidden';
    }
  }
}

function isHidden() {
  return document[getHiddenProperty()];
}

function getVisibilityChangeEvent() {
  var visProp = getHiddenProperty();

  if(visProp) {
    var eventName = visProp.replace(/[H|h]idden/,'') + 'visibilitychange';
    return eventName;
  }
}

document.addEventListener(getVisibilityChangeEvent(), function(event){
  if(isHidden()) {
    document.title = "My Page - Inactive";
  }
  else {
    document.title = "My Page - Active";
  }
});

So far so good, That’s it!!! See ya!!! :)