Working around the backlight timeout with JavaScript and meta tags

Tips and Tricks

The JavaScript® engine used in the BlackBerry® Browser is designed to terminate any scripts running longer than 10 seconds, or to stop running your JavaScript after the device backlight goes out.  This can be a little troublesome when your application is designed to use the settimeout function to trigger an event after a given interval.  You obviously don’t want your script to stop running while the user is still on your webpage.  This behavior was initially implemented in the BlackBerry Browser to save battery life and network bandwidth; however, more and more web applications are leveraging AJAX and the setTimeout function to trigger timed JavaScript calls, which are then being blocked out by the backlight timeout on the BlackBerry smartphone device.

In this blog post, I’m going to show you an easy way to have your JavaScript code fired up again and running as soon as the device is woken up from the backlight going out.  The method below actually came about because of the need to check if a session had expired while the user was still on a webpage, so there are some serious real world applications that could benefit from using this method.  This workaround won’t actually prevent the backlight from dimming or the device from locking; it will instead re-trigger the JavaScript code once the device is woken up from the backlight being dimmed, acting as a good substitute to the setTimeout function.

The workaround is really just as simple as using an iframe with a meta tag.  The solution consists of two files; index.html and autorefresh.html.

index.html

<html>
<head>
<title>This is a test</title>
<script type="text/javascript">
function wakeUp() {
var time = new Date();
document.getElementById('spnTime').innerHTML = time.toLocaleTimeString();
}
</script>
</head>
<body>
The time is: <span id="spnTime"></span>
http://autorefresh.html
</body>
</html>

autorefresh.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<META HTTP-EQUIV="refresh" CONTENT="5"/>
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="PUBLIC"/>
<script language="javascript">window.parent.wakeUp();</script>
</head>
<body>
iframe
</body>
</html>

This code will actually trigger the JavaScript function ‘wakeUp’ every five seconds.  When the device backlight dims, it will stop running; however, once the device backlight is activated again, the refresh meta tag triggers and begins its timing again. Five seconds after waking up, it will call wakeUp again. So a real world application of this could have the wakeUp function check to see if the user’s session has timed out, and if so, perform a JavaScript redirect to the login page in order to start up a new session again.

More information on meta tags can be found here: http://www.w3schools.com/tags/tag_meta.asp

If you have any other workarounds for this or any other common issues, please feel free to post them here to help the community out!


JavaScript is a trademark of Sun Microsystems, Inc.

About Prosanta B.

Prosanta is a member of the BlackBerry Developer Relations team specializing in Web Development. Prosanta’s focus is on developing out the web platform and tools associated with web development while supporting the development efforts of a number of Independent Software Vendors. Prior to joining RIM, Prosanta had worked on numerous web portals for major multinational firms writing both front and backend code.

Join the conversation

Show comments Hide comments
+ -
blog comments powered by Disqus