HTML5 and CSS3, Second Edition

Be sure to investigate the specification. The manifest file has more complex

options you can use. For example, you can specify that certain things should

not be cached and should never be accessed offline, which is useful for

ignoring certain dynamic files.

Manifest and Caching

When you’re working with your application in development mode, you want

to disable any caching on your web server. By default, many web servers

cache files by setting headers that tell browsers not to fetch a new copy of a

file for a given time. This can trip you up while you’re adding things to your

manifest file.

If you use Apache, you can disable caching by adding this to your .htaccess

file:

html5_offline/.htaccess

ExpiresActiveOn

ExpiresDefault"access"

This disables caching on the entire directory, so it’s not something you want

to do in production. But it ensures that your browser will always request a

new version of your manifest file.

If you change a file listed in your manifest, you’ll want to modify the manifest

file, too, by changing the version-number comment we added.

Detecting Network Connectivity

The application we wrote works offline, but what if we want to detect an active

network connection and synchronize the local data to a server? We can do

that.

First, by using the navigator.onLine property, we can determine if we are currently

online.

html5_offline/offlinetest.html

if(navigator.onLine){

alert('online')

}else{

alert('offline');

}

This works in Safari, Firefox, and Chrome and is easy to use, but it’s just a

simple check for network connectivity. With this, we know the current status

of the connection. We also have events we can listen for so we can handle

dropped connections:

report erratum • discuss

Working Offline • 205

Download from Wow! eBook <www.wowebook.com>