Creating HTML5 Offline Applications

August 13, 2011 HTML5 6 comments

The Application Cache or AppCache is a new feature of HTML5, which offers a smarter way to cache the web application, making it available offline.  The AppCache is a simple mechanism, it allows a developer to specify which files should be cached by the browser and available to the offline users. Once the resources are cached, the user browser retrieve them from local computer instead of web server.

The browser downloads the resources from the server only when they are updated. This mechanism improves the speed as the cached files load much faster. It also helps to reduce the server load, as the files are downloaded from server only if they are updated.

2. Difference from browser cache:

All major browsers offer some kind of caching mechanisms, but the AppCache feature is different from normal browser cache. The browser cache usually caches  only those pages and resources which has been previously visited, while AppCache allows a developer to specify which pages and resources the browser should cache. The AppCache caches the resources even if those have not never been visited.

Also, the browser cache is unreliable, as it is unreadable, we can not be sure which pages and resources will be available offline.

 3. Creating a Manifest File

The HTML5 AppCache uses a manifest (a simple text file) to determine which resources in the application should be cached by the browser. The manifest file should always start with “CACHE MANIFEST”. We can also add comments in the manifest file, the comment line starts with #.

For example:

CACHE MANIFEST
# version 1.0
# Files to cache

The Manifest file contains following three headers:

(i) CACHE:

The Files listed in this sections will be explicitly cached. There should be one file name on each line. The file names are case sensitive. This is default section for entries, so if there is no section header defined, the browser will assume it a CACHE section.

CACHE MANIFEST
CACHE:
index.html
fallback.html

css/style.css
images/1.png
images/2.png
images/3.png
images/4.png
(ii) NETWORK:

The files listed in the Network section require a connection to server, and are only available online.
Here is an example Network section:

#Network files
NETWORK:
network.html

The Network section also allows wildcard *, meaning that all resources which are not caches require a connection.

(iii) FALLBACK:

The Fallback section specifies a fallback resource to serve if a user tries to access an uncached resource while offline. This section has a slightly different syntax than the previous sections; it contains two values on each line, separated by a space. The first value specifies the resource to match, and the second value specifies the resource to serve upon matching.

For example:

FALLBACK:
dynamic.html fallback.html

In above example, if a user try to access a file dynamic.html, it should instead serve the cached file fallback.html. We can also use wildcard / in Fallback section. For example

FALLBACK:
/ fallback.html

It means, all uncached pages will be redirected to fallback.html.

4. Serving the Manifest File

Now that we have created the manifest file, we need to add its reference to the HTML pages which we want to cache, eg. index.html.
Here is how we should add the manifest attribute in the HTML element:

<html manifest= "offline.manifest">

A manifest file must be served with the mime-type text/cache-manifest. We can add this file type to our Apache web server by creating .htaccess file in the website root and add following line:

AddType text/cache-manifest .manifest

Thats it !. Now if you visit the index.html page (See demo ) in your Firefox browser, it will for permission if you want to store data on your computer or not.

Other browsers, such as Chrome and Safari do not ask, they create an offline cache automatically.
If you want to view which resources are being cached for offline use, you can type this in your firefox browser:
about:cache?device=offline

5. Refreshing the cache files

If we change any content of the file, those changes will not be re-cached automatically. The AppCache is only updated when its manifest file changes. So we must modify the manifest file to inform the browser to refresh the cache files.

One of the best practice is to add a comment line with the version number or timestamp in the manifest file, so that everytime you update the version number or timestamp in the manifest file, the browser detects the change in the manifest file and requests the files from the server again.

7. Removing Offline Cache Files

If you want to remove the cache files from your computer, here is how you can do.

(i) Firefox 5.0

Go to Tools -> Options -> Advanced
Select the Network Tab.
There you can see how much disc space the offline storage is using. You can clear all data or select the websites to delete their data.

(ii) Chrome 13.0

Go to Settings -> Options -> Under the Hood -> Clear Browsing Data
Select Empty the cache. Remember to set from ‘the beginning of time’, if you want to remove all cache data.

6. Browser Support

The AppCache feature is supported by almost all modern browsers, such as Firefox, Chrome and Safari. Unfortunrately, Internet Explorer 9 does not support this feature.

7. Demo and Download

Finally, here you can see the demo of above example and download the files.

Demo

Download

If you have any questions, feel free to leave a comment below.