HTML5: Up and Running

Let’s Build One!

Remember the Halma game that we introduced in Chapter 4 (see A Complete Example) and later improved by saving state with persistent local storage (see HTML5 Storage in Action)? Let’s take our Halma game offline.

To do that, we need a manifest that lists all the resources the game needs. Well, there’s the main HTML page, a single JavaScript file that contains all the game code, and...that’s it. There are no images, because all the drawing is done programmatically via the canvas API (see Chapter 4), and all the necessary CSS styles are in a <style> element at the top of the HTML page. So, this is our cache manifest:

CACHE MANIFEST
halma.html
../halma-localstorage.js

A word about paths. I’ve created an offline/ subdirectory in the examples/ directory, and this cache manifest file lives inside the subdirectory. Because the HTML page will need one minor addition to work offline (more on that in a minute), I’ve created a separate copy of the HTML file, which also lives in the offline/ subdirectory. But because there are no changes to the JavaScript code itself since we added local storage support (see HTML5 Storage in Action), I’m literally reusing the same .js file, which lives in the parent directory (examples/). Altogether, the files look like this:

/examples/localstorage-halma.html
/examples/halma-localstorage.js
/examples/offline/halma.manifest
/examples/offline/halma.html

In the cache manifest file (/examples/offline/halma.manifest), we want to reference two files. First ...