Chapter 6. Going Offline
There’s a feature of HTML5 called the offline application cache that allows users to run web apps even when they are not connected to the Internet. It works like this: when a user navigates to your web app, the browser downloads and stores all the files it needs to display the page (HTML, CSS, JavaScript, images, etc.). The next time the user navigates to your web app, the browser will recognize the URL and serve the files out of the local application cache instead of pulling them across the network.
The Basics of the Offline Application Cache
The main component of the offline application cache is a cache manifest file that you host on your web server. I’m going to use a simple example to explain the concepts involved, and then I’ll show you how to apply what you’ve learned to the Kilo example we’ve been working on.
A manifest file is just a simple text document that lives on your web
server and is sent to the user’s device with a content type of
cache-manifest
. The manifest contains a list of files that
a user’s device must download and save in order to function. Consider a
web directory containing the following files:
index.html logo.jpg scripts/demo.js styles/screen.css
In this case, index.html
is the
page that will load into the browser when users visit your application.
The other files are referenced from within index.html
. To
make everything available offline, create a file named
demo.manifest
in the directory with
index.html
. Here’s a directory listing ...
Get Building iPhone Apps with HTML, CSS, and JavaScript now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.