HTML5 Application Cache

Your can create offline applications with HTML5 caching feature.

What is Application Cache

Typically most web-based applications will work only if you're online. But HTML5 introduces an application cache mechanism that allows the browser to automatically save the HTML file and all the other resources that needs to display it properly on the local machine, so that the browser can still access the web page and its resources without an internet connection.

Here are some advantages of using HTML5 application cache feature:

  • Offline browsing — Users can use the application even when they're offline or there are unexpected disruptions in network connection.
  • Improve performance — Cached resources load directly from the user's machine rather than the remote server hence web pages load faster and performing better.
  • Reduce HTTP request and server load — The browser will only have to download the updated/changed resources from the remote server that minimize the HTTP request and reduce the server load.

Tip: The HTML5's application cache feature is supported in all major modern browsers like Firefox, Chrome, Opera, Safari and Internet Explorer 10+.

Caching Files with a Manifest

To cache the files for offline uses, you need to complete the following steps:

Step 1: Create a Cache Manifest File

A manifest is a special text file that tells browsers what files to store, what files not to store, and what files to replace with something else. The manifest file always starts with the words CACHE MANIFEST (in uppercase). Here is an example of a simple manifest file:


# v1.0 : 10-08-2014
# pages
# styles & scripts
# images
/ /offline.html

Explanation of code

You might think what that code was all about. OK, let's get straight into it. A manifest file can have three distinct sections: CACHE, NETWORK, and FALLBACK.

  • Files listed under the CACHE: section header (or immediately after the CACHE MANIFEST line) are explicitly cached after they're downloaded for the first time.
  • Files listed under the NETWORK: section header are white-listed resources that are never cached and aren't available offline. It means users can only access login.php page when they'r online.
  • The FALLBACK: section specifies fallback pages the browser should use in case the connection to the server cannot be established. Each entry in this section lists two URIs — first is the primary resource, the second is the fallback. For example, in our case offline.html page will be displayed if the user is offline. Also, both URIs must be from the same origin as the manifest file.
  • Lines starting with a # symbol are comment lines.

Warning: Do not specify the manifest file itself in the cache manifest file, otherwise it will be nearly impossible to inform the browser a new manifest is available.

Step 2: Using Your Cache Manifest File

After creating, upload your cache manifest file on the web server — make sure the web server is configured to serve the manifest files with the MIME type text/cache-manifest.

Now to put your cache manifest into effect, you need enable it in your web pages, by adding the manifest attribute to the root <html> element, like this:

<!DOCTYPE html>
<html lang="en" manifest="example.appcache">
    <title>HTML5 Application Cache</title>
    <!--The document content will be inserted here-->

Note: On the Apache web servers, the MIME type for the manifest (.appcache) files can be set by adding AddType text/cache-manifest .appcache to a .htaccess file within the root directory of the application.


Your Feedback:

We would love to hear from you, please drop us a line.