HTML and CSS Reference
In-Depth Information
My example application, in all its glory, will show you the time
on your machine and show you the time on my server. Not
quite as complex as a Google Docs application, but enough to
demonstrate that, when the connection isn't available, instead
of showing the server time—which it can't get—it will show you
the working app, but with the server time marked as unavailable.
Figure 7.1
shows the application on first load and whilst it's online.
FIGURE 7.1
Move over, Google
Apps: Our application tells us
the time!
My complete application requires
•
The application page:
index.html
in this case
•
time.js
: the code to tick the clock forward
•
time.css
: simple styles for my app
•
server-time.js
: In this example, let's say this is generated
every minute by my server.
Everything, with the exception of the
server-time.js
file, will be
stored in the manifest. Finally, in addition, I need a file that will be
served up in place of
server-time.js
if we're offline. This will be
•
fallback-server-time.js
: contains a notice about being
offline
Here's what the contents of my
time.manifest
look like:
CACHE MANIFEST
index.html
time.js
time.css
FALLBACK:
server-time.js fallback-server-time.js
# version 8
The format of the fi le is important. You'll see the fi rst line is
CACHE MANIFEST
. This tells the browser that what follows is the
source to a manifest fi le. Within the manifest, fi les are listed
under categories, also known as namespaces. The default cate-
gory is
CACHE
, and if it isn't stated, all the fi lenames encountered
