25.02.2013 Views

Peter Lubbers - Pro HTML 5 Programming

Pro HTML 5 Programming

Pro HTML 5 Programming

SHOW MORE
SHOW LESS

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

Download from Wow! eBook <br />

252<br />

CHAPTER 10 ■ CREATING <strong>HTML</strong>5 OFFLINE WEB APPLICATIONS<br />

Creating the <strong>HTML</strong> Structure and CSS of the UI<br />

This is the basic UI structure of the example. Both tracker.html and html5.css will be cached, so the<br />

application will be served from the application cache.<br />

<br />

<br />

<br />

<strong>HTML</strong>5 Offline Application<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

Offline Example<br />

<br />

<br />

<br />

Check for Updates<br />

Log<br />

<br />

<br />

<br />

<br />

<br />

<br />

There are a couple of things to note in this <strong>HTML</strong> that pertain to this application's offline<br />

capabilities. The first is the manifest attribute on the <strong>HTML</strong> element. Most of the <strong>HTML</strong> examples in this<br />

book omit the element because it is optional in <strong>HTML</strong>5. However, the ability to cache offline<br />

depends on specifying the manifest file.<br />

The second thing to note is the button. That will give the user control over installing this application<br />

for offline use.<br />

Creating the Offline JavaScript<br />

For this example, the JavaScript is contained in multiple .js files included with tags. These<br />

scripts are cached along with the <strong>HTML</strong> and CSS.<br />

<br />

/*<br />

* log each of the events fired by window.applicationCache<br />

*/

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!