HTML and CSS Reference
In-Depth Information
Pulling the plug: going offl ine
To w To r k To l i n e , a n a p p l i c a t i To n n e e d s To n l y a manifest telling the
browser what it needs to store in its local cache. The manifest
can be as simple as a list of fi les and you'll be done. Once
the browser has stored the cache of assets, CSS, JavaScript,
images, etc., when the page is reloaded, the browser uses
these local assets to drive the website.
Along with telling the browser what to cache, you can also tell
it what not to cache, ensuring that requests to that particular
URL always go via the Web. Finally, HTML5 gives you a way to
manage fallback cases. In the situation where you're currently
without a connection and you try to access a resource that isn't
in your local (offline) cache, the fallback can be used to serve a
different resource. For example, going to the chat part of your
application could fall back to a page saying this feature is avail-
able only while online.
The fi rst part of an offl ine application is down to the manifest,
which tells the browser what to cache (or not to, in some cases).
The second part is in the applicationCache . This object contains
methods to trigger updates and to swap the latest cache into
the browser. It also has events fi ring of of it that the author can
use to notify the user that the application might be upgradable.
NOTE In the context of
the offline spec, the mani-
fest is a list of fi les that defi ne
what fi les should be included for
your offline application.
The cache manifest
The manifest is the thing that tells the browser when and what
to get from offline, 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 fi le containing your appli-
cation's manifest:
<!DOCTYPE html>
<html lang=”en” manifest=”/time.manifest” >
<!-- my awesome time app lives here -->
</html>
 
 
 
Search WWH ::




Custom Search