" Live as if you were to die tomorrow. Learn as if you were to live forever.. "
 - Mahatma Gandhi

  1. Home
  2. HTML5 Tips and Tricks
  3. HTML5 Offline Web Applications

HTML5 Offline Web Applications

The application cache is controlled by a plain text file called a manifest, which contains a list of resources to be stored for using when there is no network connection. The list can also define the conditions for caching, such as which pages should never be cached and even what to show the user when s/he follows a link to an uncached  page.

If the user goes offline but has visited the site while online, the cached resources will be loaded so the user can still view the site in a limited form. By carefully considering the contents of your manifest file, you can offer a suitable web experience to a disconnected user.

I don’t like much more theory so let us come to the point and follow the step to create your first offline application.

Step – 1(Define the manifest file)

Define the manifest file in your page HTML so the browser understands that this website has an offline application cache file.

<!DOCTYPE HTML>

<HTML manifest="/cache.manifest">

<body>

...

</body>

</HTML>

Step – 2 (Set  content type)

Your cache manifest file can be located anywhere on your web server, but it must be served with the content type text/cache-manifest.

Then the question arises on how to define the content type.

For Apache-based web server, you can probably just put an AddType directive in the .htaccess file at the root of your web directory:

AddType text/cache-manifest .manifest

For IIS7 server you can define content type using web.config file.

<?xml version="1.0" encoding="UTF-8"?>

<configuration>

    <system.webServer>

        <staticContent>

           <remove fileExtension=".manifest" />

           <mimeMap fileExtension=".manifest" mimeType="text/cache-manifest"/>

        </staticContent>

    </system.webServer>

</configuration>

From these two steps now your browser can know that you have an offline application cache and browser can access that file.

But nothing is stored yet.

Step – 3 (Creating a Manifest File)

The first line of every cache manifest file is:

CACHE MANIFEST

Let’s start with an example of a full manifest file.I will discuss each of the part below.

CACHE MANIFEST

# This is a comment

CACHE:

/css/style.css

/js/jquery.js

/img/logo.png

 
http://abc.com/stylesheet.css

FALLBACK:

/ /offline.html

NETWORK:

*
So it has mainly 4 sections.

1.Comment Section –

The comment section is for writing the version number of the manifest file. It’s not only for your reference but also it has a great impact. I will discuss that later.

2.CACHE Section –

The CACHE section is considered the default — i.e., if no section heading has been defined, the browser will assume this is the CACHE section. Beneath this heading, you can list URIs to resources you want the browser to download and cache for offline use, including URIs hosted externally.

Like

CACHE MANIFEST

 
/css/style.css

/js/jquery.js

/img/logo.png

 
http://abc.com/stylesheet.css

Every single resource that you want to cache explicitly should be listed here, right down to the last image. The browser is not aware of a resource unless you provide the full path to it. This means you can’t use wildcards. If you list /images/* as a resource, the browser will request that URI as if you typed it into your address bar.

But don’t run off and store URIs for every single page on your site into your manifest. When a user visits a page that points to the manifest file, that page will also be cached. This means that if you want to allow users access to pages they’ve already viewed, just make those pages point to the manifest file and the browser will cache them appropriately.

–

3.FALLBACK Section –

There is one more type of section in a cache manifest file: a fallback section. In a fallback section, you can define substitutions for online resources that, for whatever reason, can’t be cached or weren’t cached successfully. The HTML5 specification offers this clever example of using a fallback section:

CACHE MANIFEST

FALLBACK:

/ /offline.html

NETWORK:

*

Now look at the fallback section. The fallback section in this cache manifest only has a single line. The first part of the line (before the space) is not a URL. It’s really a URL pattern. The single character (/) will match any page on your site, not just the home page. When you try to visit a page while you’re offline, your browser will look for it in the appcache. If your browser finds the page in the app-cache (because you visited it while online, and the page was implicitly added to the app-cache at that time), then your browser will display the cached copy of the page. If your browser doesn’t find the page in the app-cache, instead of displaying an error message, it will display the page /offline.html, as specified in the second half of that line in the fallback section.

4.NETWORK Section –

Finally, we have the NETWORK section, used to tell the browser explicitly which resources are only available while online. By default, this uses the asterisk * symbol, meaning all resources that are not cached will require a connection. Alternatively we can whitelist specific url prefixes, like all the avatars if we wish.

CACHE MANIFEST

 
NETWORK:

*

You can explicitly define resources not to cache by providing a list of URIs — essentially a whitelist of online-only assets.

CACHE MANIFEST

 
NETWORK:

registration.php

payment.php

So now registration.php and payment.php page shown to the user only when they are online and those pages are never stored in appcache.

Now your offline application is ready but I’ll discuss some question and their respective answers to make this topic more clear.

1.What happens if I add/remove/modify one or more file names in the cache or other section of Manifest file ?
Answer: If we change any thing in the Manifest file then the browser again removes all the files from cache and again downloads all the files in appcache.

When we request for a page at first browser check the Manifest file. If there is no change then it does nothing but if there is any change then the browser again download all the files from server.

2.What will happen if I didn’t change the Manifest file but change the files which are mention in the Manifest file?
Answer: This is a very interesting question. If we didn’t change the Manifest file then browser doesn’t understand any change and it will not fetch the file from server to render.

But as I change the file content so it’s not reflecting my change in browser. To solve this problem concept of “Comment Section” has to be introduced.

In that section we mention a version number of Manifest file. So if we wanna change any pages which are listed in the Manifest file then we have to just change the version number.

So now when browser check the Manifest file it observes the change and load the content of the manifest file again from server. So our problem is solved. Change will reflect to the browser.. :)

3.What will happen if I write one of the file path wrongly in Manifest file or one of the resource fails to download properly?
Answer:  if even a single resource listed in your cache manifest file fails to download properly, the entire process of caching your offline web application will fail. Your browser will fire the error event, but there is no indication of what the actual problem was. This can make debugging offline web applications even more frustrating than usual.

4.Now the main question: which browsers are supporting HTML5 offline application feature?
Answer: The AppCache feature is supported by almost all modern browsers, such as Firefox, Chrome and Safari. Unfortunately, Internet Explorer 9 does not support this feature.

Amit Ghosh , HTML5 Web Developer, Mindfire Solutions.
Related Tags: Design, HTML, HTML5, offline web support
Author : Amit Ghosh

Leave a Reply