HTML5 and CSS3, Second Edition

(singke) #1
javascripts/jquery-1.9.1.min.js

When we change our code, we need to modify the manifest so the browser
knows to fetch the new versions of our code. It’s not enough to update the
manifest’s timestamp; we have to actually change the contents of the file;
that’s what the version comment in this file is for.

Also, we’ve been letting Google host jQuery for us, but that won’t work if we
want our application to work offline, so we need to download jQuery and
modify our <script> tag to load jQuery from our javascripts folder.

html5_offline/index.html
➤ <scriptsrc="javascripts/jquery-1.9.1.min.js"></script>
<scriptsrc="javascripts/notes.js"></script>

Next we need to link the manifest file to our HTML document by changing
the <html> tag to this:

html5_offline/index.html
<htmlmanifest="notes.appcache">

That’s all. If you enable the console in Chrome, you can see the manifest at
work, as in the next figure.

Figure 32—Console output showing cached files


Once all the files are cached, a user can disconnect from the Internet and the
application will still work. There’s just one little catch—the manifest file has
to be served by a web server because the manifest must be served using the
text/cache-manifest MIME type, or the browser won’t use it. The Node.js-based
server in this book’s source code handles this for you for testing purposes,
but if you’re using Apache, you can set the MIME type in a .htaccess like this:

html5_offline/.htaccess
AddTypetext/cache-manifest.appcache

After we request our notes application the first time, the files listed in the
manifest get downloaded and cached. We can then disconnect from the net-
work and use this application offline as many times as we want.

Chapter 9. Saving Data on the Client • 204


Download from Wow! eBook <www.wowebook.com> report erratum • discuss

Free download pdf