How do I detect when my watchface comes to the foreground?

Question

when my watchface (Web-based) goes to the background, the timers used to keep the time updated are paused. this causes a lag effect when you come back. making the user see an outdated time for a few seconds.

My ideal solution, in order to not screw more things up and not have to adapt a bunch of animations to 0.1 seconds timers or whatever is the following:

• Detect when the watchface comes back to the foreground
• then set the time and the intervals again

For this to work the very first step is, of course, to detect when my watchface comes back to the foreground, but I'm absolutely clueless and I haven't really found much. Besides my internet is really bad and testing on my real watch is a problem, so I just need to know what's already proven.

How do I detect when my watchface comes back to the foreground?

Thanks a bunch in advance

Answer 1

You may try with this approach.

	var timer=0;
	var visible_time=0;
	var timer1 = 0;
	var PERIOD_VISIBLE = 1000;
	var PERIOD_NOT_VISIBLE = 2000;
	var hidden, visibilityChange; 
	
window.onload = function() {
   
    document.addEventListener('tizenhwkey', function(e) {
        if (e.keyName === "back") {
            try {
                tizen.application.getCurrentApplication().exit();
            } catch (ignore) {}
        }
    });

    var mainPage = document.querySelector('#main');
   
    // Sample code
    console.log("Foreground");
	if (typeof document.hidden !== "undefined") {
		hidden = "hidden";
		visibilityChange = "visibilitychange";
	} else if (typeof document.webkitHidden !== "undefined") {
		hidden = "webkitHidden";
		visibilityChange = "webkitvisibilitychange";
	}

	function handleVisibilityChange(){
		if (document[hidden]){
			console.log("Background");
			console.log("Page was visible for : "+visible_time+" seconds");
			visible_time = 0;
			timer = new Date().getTime();
		} else {
			console.log("Foreground");
			console.log('You were away for ' + (new Date().getTime()-timer)/1000+ ' seconds.');
		}

	}
	document.addEventListener(visibilityChange, handleVisibilityChange, false);

	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>");*/
	}
    mainPage.addEventListener("click", function() {
        var contentText = document.querySelector('#content-text');
        contentText.innerHTML = (contentText.innerHTML === "Basic") ? "Tizen" : "Basic";
        
    });
};

Thanks.