Programming

Creating Offline HTML5 Apps with AppCache

Sandeep Panda
Share

AppCache is the acronym for Application Cache. As the name suggests AppCache is a technique for implementing offline HTML5 web applications.

Well, you might think that it is a contradiction to the traditional web app concept because web pages are always downloaded and served to the users. So, how can you load pages if you are offline? The answer is no, we can’t. But pages can be downloaded when the user is online and then cached for subsequent usage in offline mode.

This is how AppCache works. When you go to a web page that is offline enabled, you browser downloads and caches the page in the background. Later on when you try to access the page in offline mode, the browser retrieves the page from its cache and loads for you. Pretty interesting, huh?

So, in this tutorial I will explain how AppCache works in detail and how one can build awesome HTML5 apps that work offline. In the end there is also a demo offline notepad application. You can try it out and download the source files.

Note: Before going any further check out the compatibility table to know which browsers support AppCache feature.

The Fundamentals:

You might be thinking how the whole process works and how the browser decides which pages to cache. Well, let’s find out. It all starts with a simple Cache Manifest file. A Cache Manifest file stores all the resources that need to be downloaded and cached for offline access. The file should end with an extension .manifest but you are free to choose the extension of your choice.

In order to start the process of caching you just need to point the browser to this manifest file. How is it done? Simply add an attribute called manifest to the <html> tag in the web page that needs to be cached.

For instance, if you want the index.html page to be cached you can create a manifest file called mycache.manifest and add an attribute manifest that points to this file.

<html manifest="mycache.manifest">
<head>
<title>Offline Page</title>
</head>
</html>

Inside the manifest file you can add a list of resources that need to be cached.  As the page index.html points to the manifest file it’s implicitly added to the list of resources that should be cached.

Note: The manifest file should be served by the server with mime type text/cache-manifest. If you are using Apache, it is just a matter of putting a .htaccess in the root with following content:

AddType     text/cache-manifest     .manifest

What Goes Inside The Manifest?

We have already discussed the manifest file lists all the resources that should be available offline. But how?  What’s the format? Well, a manifest file has four optional sections which are:

  • CACHE
  • NETWORK
  • FALLBACK
  • SETTINGS

However, every manifest file starts with the following content:

CACHE MANIFEST

In the next lines you can add the resources that need to be cached. The following example adds 3 resources scripts.js, style.css and picture.jpg to the manifest file. As no section name has been specified these resources are implicitly in CACHE section.

CACHE MANIFEST

scripts.js

style.css

picture.jpg

Now let’s assume index.html points to this manifest file through the attribute manifest. When the browser first accesses this page, it finds out that there is manifest file associated with this page. So, the browser goes through the list of resources present in the manifest and starts downloading them in the background.  Note that the page index.html which points to this manifest will also be downloaded and made available offline.

The above snippet is sufficient for any app that has a single page. But what do you do if you have multiple pages? In that case you just need to add the name of each of the pages that should be cached to the manifest file. If you don’t do this the browser will have no way to know there are other pages in the web app that should be available offline.  There is one more way to achieve this. You can make each of the pages in the app point to the manifest file. When the browser will access the pages, it will automatically start downloading them.

Now that you know the basics of manifest, let’s get to the different sections available in the file.

CACHE:

This section lists all the resources that should be downloaded and stored locally. As soon as the page is loaded, the browser will start downloading these resources in the background.  However, if some of the resources are already in the cache, then those won’t be re downloaded.

NETWORK:

This section lists the urls that should never be cached. For example, your page may include a call to a script that loads stock quotes dynamically. So, this type of resource will not be cached and made offline. Instead the data will be retrieved from the original source provided you have internet connection.

CACHE   MANIFEST

NETWORK:

stock-quote.php

CACHE:

style.css

scripts.js

picture.jpg

You can also add * to the NETWORK section which means any resource that is not in the cache can be downloaded over the internet.

FALLBACK:

FALLBACK is a clever way of specifying the page to display in case any resource is not found in the app cache.

CACHE   MANIFEST

FALLBACK:

/   /offline-message.html

The ‘/’ has a special meaning in FALLBACK section. It means if any page is not found in app cache instead of showing an error the offline-message.html will be displayed.

SETTINGS:

This includes settings for app cache behavior. Presently Cache Mode is the only available setting. It can be set to prefer-online which indicates that the cached data should be disregarded if an active internet connection is present.

The Overall Flow of Events:

While the whole process works, a chain of events are fired. To summarize the whole thing let me give a clear picture of these events fired during the caching process.

  1. When the browser finds a manifest attribute of the <html> element that points to a manifest file, a checking event is fired.
  2. If the manifest file is entirely new for the browser it will do the following:
  • The browser will start downloading the resources mentioned in the manifest after firing a downloading event. While downloading the browser will fire progress events periodically to notify about the number of files downloaded.
  • After the resources are downloaded a cached event is finally fired.
  1. If the browser has already come across the manifest file, it will do one of the following:
  • If the manifest has not been changed, it does nothing.
  • If the manifest file has been changed the browser will fire a downloading event and start downloading the resources mentioned in the manifest. As usual while downloading the files progress events will also be fired.
  • Once the downloading is finished updateready event is fired.

During the above process if any error occurs, the browser will fire an error event.

Note that during downloading if any of the resources can’t be downloaded for any reason the total cache will be disregarded and an error event will be queued.

Let’s Create an Offline App:

In my last tutorial I explained how to create a notepad app using indexedDB. Now let’s make it work offline!

First try out a demo of the app here. It’s basically a note taking app which works using a little bit of JavaScript and indexedDB api. Just access the page. Disconnect the internet and visit the page again. You will still be able to access the web app because of App Cache. If you download the whole app you will find the following files inside the root directory of the app.

  • add.png
  • back.png
  • bullet.png
  • delete.png
  • notebook.png
  • index.html
  • style.css

So, here are 3 simple steps that should be followed to add offline support to any HTML5 app.

First Step:

Create a .htaccess file with the following content and place it in the root directory.

AddType text/cache-manifest .manifest

Second Step:

Create the manifest file that will list the resources that should be cached. Name it mycache.manifest. Then add all of the resources to the file.

CACHE MANIFEST

add.png

back.png

bullet.png

delete.png

notebook.jpg

style.css

Third Step:

Add attribute manifest to the <html> element of index.html. The value of the attribute should be mycache.manifest.

Now, we are done! We have a brand new HTML5 app that works amazingly well offline.

The code sample for the offline notepad app is attached for download.

Conclusion:

Well, bringing web apps offline is truly revolutionary. AppCache opens the door to many possibilities. Using it you can create apps that run offline starting from desktop browsers to mobile browsers. You can even package these offline web apps to work as Android or iOS apps. What you do with it depends on your creativity. So, just play around with App Cache, experiment and start developing amazing offline apps.