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.
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
<!DOCTYPE HTML> <html manifest="manifest.appcache"> <body> <!-- Content --> </body> </html>
CACHE MANIFEST # 2012-01-01 v1.0.0 # This is a comment CACHE: /css/theme.css /js/script.js /images/logo.png FALLBACK: / /offline.html NETWORK: *
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 website.
FALLBACK section indicates what 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.
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
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
AddType text/cache-manifest .appcache
For IIS, you can add this to your
<system.webServer> <staticContent> <mimeMap fileExtension=".appcache" mimeType="text/cache-manifest" /> </staticContent> </system.webServer>
The application cache is powerful but make sure you give the appropriate thought and planning for your
NETWORK sections to provide a suitable offline experience to your users.