Creating Offline HTML5 Apps with AppCache
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.
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:
However, every manifest file starts with the following content:
In the next lines you can add the resources that need to be cached. The following example adds 3 resources
picture.jpg to the manifest file. As no section name has been specified these resources are implicitly in
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.
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.
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.
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 is a clever way of specifying the page to display in case any resource is not found in the app cache.
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.
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.
- When the browser finds a
manifestattribute of the
<html>element that points to a manifest file, a
checking eventis fired.
- 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
downloadingevent. While downloading the browser will fire
progressevents periodically to notify about the number of files downloaded.
- After the resources are downloaded a
cachedevent is finally fired.
- 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
downloadingevent and start downloading the resources mentioned in the manifest. As usual while downloading the files
progressevents will also be fired.
- Once the downloading is finished
updatereadyevent 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!
So, here are 3 simple steps that should be followed to add offline support to any HTML5 app.
.htaccess file with the following content and place it in the root directory.
AddType text/cache-manifest .manifest
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.
manifest to the
<html> element of
index.html. The value of the attribute should be
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.
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.