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-

CACHE MANIFEST
#Here goes the comment

index.html
stylesheet.css
images/logo.png
scripts/main.js

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

CACHE MANIFEST
#Here goes the Master Comment

# Cache Files
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js

# Resources that require the user to be online.
NETWORK:
login.php
/myapi
http://api.twitter.com

# static.html will be served if main.py 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
FALLBACK:
/main.py /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

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

    Reply

    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.

    Reply

    avatar Sushant May 10, 2012 at 11:23 pm

    HTML 5 sure looks promising for web development

    Reply

    Leave a Comment

    CommentLuv badge

    Previous post: