Did you find this useful?
Socialize it today.


HTML5 Application Cache

Saturday, November 10, 2012

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.

In its simplest form, an offline web application is a collection of HTML, CSS, JavaScript, images, and other resources stored locally by the browser. 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.


Browser Support

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 <html> element.


<!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:

CACHE

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.

FALLBACK

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.

NETWORK

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

Note: An application's cache is only updated when its manifest file changes. If you edit an HTML file, an image, or change a JavaScript function, those changes will not be 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:


<system.webServer>
  <staticContent>
     <mimeMap fileExtension=".appcache" mimeType="text/cache-manifest" />
  </staticContent>
</system.webServer>


Conclusion

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.

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

HTML5: The Missing Manual Murachs HTML5 and CSS3 The Definitive Guide to HTML5