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 website.
FALLBACK
The 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
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 .appcacheFor 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 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.
