HTML and CSS Reference
In-Depth Information
The manifest is the thing that tells the browser when and what
to get from its offline cache, from the Web, or to fall back onto
if assets are missing. Once the manifest is loaded or updated,
it triggers an update on the
applicationCache
object. To tell the
browser to look for a manifest is simple: You add the
manifest
attribute to the
<html>
element, and point it to the file containing
your application's manifest:
<!DOCTYPE html>
<html lang=”en”
manifest=”/time.appcache”
>
<!-- my spiffing time app lives here -->
</html>
My example application, in all its glory, will show you the time
on your machine and the time on my server. Not quite as com-
plex 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 when 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
NoTE
With the custom
.appcache file extension,
you will need to use particular
methods to ensure this is served
to the browser correctly, as you'll
see later in this chapter under
“How to serve the manifest.”
