Overview

This article demostrates the visibility state of an application whether it is hidden or visible.

Application Visibility HTML Page

The index.html page has a button that launches an app (Native Alarm Application) and will make the current application go into hidden state.

<button onclick="launch_sample();">Launch App</button>

Application Visibility JavaScript File

Set the name of the hidden property and the change event for visibility. In the same way "document.hidden" is implemented as "document.webkitHidden" in Chrome. "document.hidden" is a boolean value indicating if the page is hidden from view. This may mean the application is running background. The "visibilitychange" event fires when a web application changes from hidden to visible or vice versa.

var hidden,visibilityChange;
if (typeof document.hidden !== "undefined") {
	hidden = "hidden";
	visibilityChange = "visibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
	hidden = "webkitHidden";
	visibilityChange = "webkitvisibilitychange";
}

Handle Page Visibility Change

A simple event is fired at the document object immediately after "document.visibilityState" transitions between visibility states. Register an event listener for this event directly on the document object as below

var timer=0;
function handleVisibilityChange(){
if (document[hidden]){
	console.log("Page is now hidden.");
	timer = new Date().getTime();
    } else {
	console.log("Page is now visible.");
	alert('You were away for ' + (new Date().getTime()-timer)/1000+ ' seconds.');
    }
}
document.addEventListener(visibilityChange, handleVisibilityChange, false);

The above code gives an alert showing the time for which the application was in hidden state.

Setting Timer

The below code sets a timer that starts when the web application is loaded, pauses when it goes to hidden state and then again resumes when it comes to visible state. The same can be implemented in applications that handle audio, video, animations etc.

var visible_time=0;
var timer1 = 0;
var PERIOD_VISIBLE = 1000;
var PERIOD_NOT_VISIBLE = 2000;
timer1 = setInterval(checkVisibility, (document.hidden) ? PERIOD_NOT_VISIBLE : PERIOD_VISIBLE);
document.addEventListener("webkitvisibilitychange", visibilityChanged, false);
function visibilityChanged() {
   clearInterval(timer1);
   timer1 = setInterval(checkVisibility, (document.hidden) ? PERIOD_NOT_VISIBLE : PERIOD_VISIBLE);
}
function checkVisibility() {
   $('#timer').empty();
   visible_time++;
   $('#timer').append("<center>Page is visible for : "+visible_time+" seconds</center>");
}

Change Visibility State on Application Launch

From the below code we launch Native Alarm application which makes the current application visibility state as hidden. In addition to this, the application also goes to hidden state when the screen is off.

function onsuccess() {
    console.log("The application has launched successfully");
}
function launch_sample(){
    tizen.application.launch("org.tizen.clock", onsuccess);
}