HTML5 introduces a new method for enabling a web application to be available without your users being online. Having no connection to the internet usually means no access to your
web application. However, with HTML5 Application Cache, having some level of access is better than none. In this tutorial, we will look at how the application cache can store
resources to be used by the browser when there is no connectivity to your site. It is becoming increasingly important for web based applications to be accessible offline.
Modern browsers do have caching mechanisms, but these mechanisms are not always reliable as you might expect.
The pages of the offline web application maps to a manifest file which contains a list of offline resources. A web browser that supports the application cache
will read the list of URLs from the manifest file, download the resources, cache them locally, and automatically keep the local copies up to date.
When the browser is unable to access online content, it will automatically switch over to the local copies instead.
The application cache is supported by all modern browsers except Internet Explorer.
The Manifest File
An offline web application depends on a cache manifest file. The manifest file is a list of all of the resources that your web application might need to access while it is
disconnected from the network. In order for the browser to download and cache the resources, you need to point to the manifest file, by using a manifest attribute on your
<!-- Content -->
# 2012-01-01 v1.0.0
# This is a comment
Each directive is placed on a new line, with comments prefixed by a hash (#). The first line, CACHE MANIFEST, tells the browser that this is a manifest file. The uppercased
lines with a colon are section headings. There are three different sections in a manifest file:
The list of explicit URLs to request and store. You can list relative URLs or the full path if the resource you are caching is external to your web site.
The fallback section indicates what to the browser should do when an offline user attempts to access an uncached file. In the example above, the file, offline.html would be presented
to the user when all uncached files are attempted to be accessed.
The NETWORK section specifies which files should never be cached, and will not be available offline. An asterisk can be used to indicate that all other resources/files require
an internet connection.
Once an application is cached, it remains cached until one of the following happens:
- The user clears the browser's cache
- The manifest file is modified
- The application cache is programmatically updated
re-cached. Updating the date and version in a comment line is one way to make the browser re-cache your files.
Serving the Manifest
You can reference a manifest file on a web page by adding the manifest attribute to your opening <html> tag. The browser will cache pages that include this attribute, as well as those that
you specify in the manifest itself. So, it is not necessary to include every page in your site in the manifest file itself. As your users browse through pages on your site, those pages
that include this attribute will also be included in the cache even if they are not listed in the manifest file.
The manifest file should be served with a MIME-type of text/cache-manifest. If you’re using Apache as your web server, add this to your .htaccess file:
AddType text/cache-manifest .appcache
For IIS, you can add this to your web.config file:
<mimeMap fileExtension=".appcache" mimeType="text/cache-manifest" />
The application cache is a powerful but make sure you give the appropriate thought and planning for your CACHE, FALLBACK, and NETWORK sections to provide a suitable offline
experience to your users.
Recommended Books & Training Resources