PART III
Chapter 10: Web Services and Beyond 545
Moving between offline and online modes introduces many architectural challenges for
a Web application. If the data set is small enough, we can do a mirroring concept, but for
larger data sizes this may not be possible. Some applications might need to synchronize
automatically, while others make more sense to be synched manually. In all cases, letting the
user know the status of the connection and the application state is paramount.
The power that Gears provides is quite exciting and, as we saw with our to-do list, the
Web is starting to intrude on the desktop. However, it would seem that if the desktop has an
install requirement, Gears doesn’t really change much. Simply put, as cool as this approach
is, having user’s install local proxy software on their systems is not likely over the long
haul, especially if we consider that, like everything we have seen in this advanced chapter,
the future is browser native!Emerging Offline Possibilities with Firefox 3
The Firefox 3 browser will likely be out by the time you read this and it has features in it to
assist in enabling offline access. First up is the ability to easily detect if you are offline or not
by looking at the Boolean value in navigator.onLine. Here we toggle a string value based
upon this value:var condition = navigator.onLine? "online" : "offline";However, this won’t do us much good unless we can see when the user goes offline and
comes back. We certainly could use a timer and check this value every so often, but Firefox
3 also provides an event handler for the events offline and online that we bind to the
body element. The following simple example demonstrates the connection state:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Chapter 10 : Firefox 3 Connection Tester</title>
<link rel="stylesheet" href="http://ajaxref.com/ch10/global.css"
media="screen" />
<style type="text/css">
#status {height:20px; padding: 4px;
font-size: 12px;
color: white;
text-align:center;}
#status.online { background-color:green; }
#status.offline { background-color:red; }
</style>
<script type="text/javascript">
function updateOnlineStatus()
{
var condition = navigator.onLine? "online" : "offline";
document.getElementById("status").className = condition;
document.getElementById("state").innerHTML = condition;
}
window.onload = function () {