HTML5 Guidelines for Web Developers

8.2 Offline Web Applications 217

Modern browsers have a function for changing to offline mode. In Mozilla
Firefox, for example, this function can be found in the File menu as Work Offline.
If the browser changes from online to offline mode, the event offline is fired;
vice versa, the event is online is fired:

window.addEventListener("online", function() {
alert("You are now online");
}, false);
window.addEventListener("offline", function() {
alert("You are now OFFLINE");
}, false);

This brief example creates an alert window as soon as the browser changes its
online state. Offline-capable applications can use these events to load updated
data from the server or copy locally saved data to the server.

8.2.3 Debugging

You have probably had the same problem as many web developers at one stage
or another: You spend ages changing line by line of source code, but although
the page is reloaded in the browser each time, the result remains unchanged.
On the way from server to browser are many places where the web content
can be stored temporarily. This is a desirable improvement in many cases and
helps to conserve bandwidth but is also the cause of many lost hours of sleep
for web developers.

The bad news is that Offline Web applications make this problem even more
complicated. By adding an additional cache component, there are now even
more places where elements can be updated or not updated. A structured ap-
proach to solving this problem is essential and can save you a lot of time.

You first need to ensure that the web server really does output the cache mani-
fest in the current version. Look at the server log files, as in this example of the
Apache web server:

::1 - - [26/Jul/2010:14:50:46 +0200] "GET
/code/chap_storage/menu.appcache HTTP/1.1" 200 491
"-" "Mozilla/5.0 (X11; U; Linux x86_64; en-US)
AppleWebKit/534.3 (KHTML, like Gecko) Chrome/6.0.472.0
Safari/534.3"
::1 - - [26/Jul/2010:14:50:46 +0200] "GET
/code/chap_storage/menu.appcache HTTP/1.1" 304 253
"-" "Mozilla/5.0 (X11; U; Linux x86_64; en-US)
AppleWebKit/534.3 (KHTML, like Gecko) Chrome/6.0.472.0
Safari/534.3"