Creating Offline Html5 Web Applications

by Shubham on October 27, 2011

One of the most amazing features of HTML5 is the support for offline applications using the cache manifest. Well browser caching is not a new technique; it’s supported by majority of the browsers. The browser caching technique is unreliable and doesn’t work every time. Creating offline web applications is pretty easy and reliable with cache manifest.

With cache manifest there are three advantages-

  1. Offline Browsing– users can browse your website even when they are not connected to the Internet.
  2. Less Server Load– server load is reduced as only modified or new resources will be fetched.
  3. Speed– the Application will be fast as the files will be cached in the local memory.

What’s the Cache Manifest File?

Cache Manifest file is a simple text file encoded using UTF-8. This file contains the list of the files that are needed to be cached in the local memory for offline usage by the Application. The files listed in cache manifest are downloaded and gets stored in the “Application Cache”.

The “Application Cache” (or AppCache) is like the browser cache but more robust and reliable. Your application will run smoothly even when the user is offline.

Browser Support Html5 Cache Manifest
Getting Started With Cache Manifest-

Make sure your Doctype is a valid Html5 Doctype. i.e. <!DOCTYPE html>

Configuring .htaccess-

Before creating cache manifest file we need to add support for it in .htaccess file i.e. you may need to add the custom mime- type to your web server. Assuming that you have Apache server, you need to add the following code to your .htaccess file-

AddType text/cache-manifest .manifest

Defining the mime-type makes the server understand the .manifest file and serve them for caching applications.

Creating the Cache Manifest File-

As we have already have a valid html5 Doctype, we need to create a text file and save it as offline.manifest. The content of the text file is-

#Here goes the comment


This is an example of a working cache manifest file. This file will cache the four files on the page and make them available for offline usage. This is just a general example of the cache manifest file; you can change these files with the names of your files you want to cache. That’s a basic example of cache manifest file simple enough for basic web applications.

Let’s take a look at complex cache manifest file

#Here goes the Master Comment

# Cache Files

# Resources that require the user to be online.

# static.html will be served if is inaccessible
# offline.jpg will be served in place of all images in images/large/
# offline.html will be served in place of all other .html files
/ /static.html
images/large/ images/offline.jpg
*.html /offline.html

Let’s understand the above cache manifest code.

CACHE: It defines the list of files that will be cached in the local storage as soon as they are downloaded first time.
NETWORK: It defines the files that require server connection. These files are not cached in the local storage and will require internet connectivity.
FALLBACK: It is an optional decleration specifying fallback page whenever the resource is unavailable. It redirects a user to a specific page whenever there are no resources (example fallback offline.html).

Linking the Cache Manifest File

Now that we have successfully made a cache file the next important part is to link the file to the HTML5 document. Linking the cache manifest file to html5 is pretty simple just add the single line code to your html5 document and you are ready to go.

<html manifest="/offline.manifest">

Notes to Remember-

  • The first string of the cache manifest file should be CACHE MANIFEST and it’s mandatory to use it.
  • The second thing is that the cache manifest file has limited storage i.e. maximum 5MB. If you’re developing for chrome web store you can use unlimitedstorage directive to remove any storage restrictions.
  • Similar Articles

      None Found

    { 3 comments… read them below or add one }

    avatar Peter October 28, 2011 at 3:36 pm

    Thanks for sharing this great article/tutorial. This really is a interesting subject. I really think HTML 5 is the future. Keep on the good work!
    Peter´s last blog post ..conference call


    avatar SmashinGeeks December 12, 2011 at 4:54 pm

    Great Article Here,this will definitely help but the point of view that IE fix is”nt possible in cache manifest is the bad side.


    avatar Sushant May 10, 2012 at 11:23 pm

    HTML 5 sure looks promising for web development
    Sushant´s last blog post ..Samsung Galaxy Ace Plus Price in India


    Leave a Comment

    CommentLuv badge

    Previous post: