HTML and CSS Reference
In-Depth Information
if(navigator.onLine) {
// do something when online
} else {
// Fallback
}
This is a little bit of a crutch, though, and life isn't quite that simple. Just because
navigator.onLine
re-
turns
true
doesn't mean that you can actually access data over the web. The browser may be on Wi-Fi without
an Internet connection or may have such a poor connection that it can't actually download any data. The rule is
to always catch any network errors even if the device is under the false impression that it is online.
On desktop,
navigator.onLine
is broken for this same reason, with the Chrome developers going as
far as to mark the bug as "WONT FIX."
Listening for More Advanced Behavior
This section has scratched only the surface of the Application Cache. There are eight different events defined in
the HTML5 spec for the Application Cache. A full robust implementation with on-the-fly updating of the cache
would need to do a good deal more work to handle all the different situations. The good news is that most of the
time all you care about is caching your files for offline use.
A Final Word of Warning
Testing and debugging Application Cache can be a pain, especially when you already have cache headers turned
on as suggested. The easiest way to test is to turn off your cache headers, verify the browser is hitting the server
for each of the files, add in your manifest, and disable Wi-Fi or Ethernet. You can quickly determine how your
game behaves under offline conditions. After you have it worked out in a desktop browser, give reloading the
game a shot on a mobile device in Airplane mode to see how you did.
As a secondary word of caution—stay away from enabled cache headers and Application Cache while in
development. You can quickly lose your sanity trying to constantly figure out whether your browser uses new
or cached resources.
Summary
Whew! Being a good mobile citizen takes a lot of work! Luckily a good deal of the hard work is boilerplate that
is set and forgotten about. That statement applies to mobile meta tags, cache headers, and application cache.
What the statement doesn't apply to is making sure your game can work within the constraints of the mobile
devices you target. That takes some care and planning, and most likely some prototyping to determine how far
you can push the current generation hardware.
