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.

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.

When the browser finds a manifest attribute of the <html> element that points to a manifest file, a checking event is 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 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.

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.

Frequently Asked Questions (FAQs) about Creating Offline HTML5 Apps with AppCache

What is the primary function of AppCache in HTML5?

AppCache, also known as Application Cache, is a feature in HTML5 that allows developers to specify which files the browser should cache and make available to users offline. This is particularly useful for applications that require certain files to function correctly even when the user is not connected to the internet. AppCache ensures that these files are stored locally on the user’s device, allowing the application to run smoothly offline.

How does AppCache improve the performance of web applications?

AppCache can significantly enhance the performance of web applications by reducing the load time. When a user visits a web application, the browser typically fetches all the necessary files from the server. However, with AppCache, the browser can retrieve these files from the local cache, which is much faster than fetching them from the server. This results in a quicker, more responsive user experience.

How do I create a manifest file for AppCache?

A manifest file is a simple text file that lists the resources the browser should cache for offline access. To create a manifest file, you need to define it with the .appcache extension and specify it in the HTML tag of your web page using the manifest attribute. The manifest file should include three sections: CACHE, NETWORK, and FALLBACK. The CACHE section lists the files to be cached, the NETWORK section lists the files that require a network connection, and the FALLBACK section specifies fallback pages for when a particular resource is not available.

What are the limitations of using AppCache?

While AppCache is a powerful tool, it does have some limitations. For instance, it can be challenging to manage because once a file is cached, it remains in the cache until the manifest file is changed. This can lead to outdated content being displayed to the user. Additionally, AppCache does not provide granular control over the caching process, and it can be difficult to debug issues related to caching.

Is AppCache supported by all browsers?

AppCache is supported by most modern browsers, including Chrome, Firefox, Safari, and Internet Explorer 9 and above. However, it’s worth noting that the HTML5 specification recommends using Service Workers for offline caching instead of AppCache, as Service Workers provide more control and flexibility.

How can I debug issues with AppCache?

Debugging AppCache can be tricky, but most browsers provide tools to help with this. For example, in Chrome, you can use the Application panel in the Developer Tools to inspect the AppCache. This panel shows all the cached resources and their status, and allows you to update or delete the cache.

Can I use AppCache for mobile applications?

Yes, AppCache can be used for mobile applications. It allows you to store necessary files locally on the user’s device, enabling the application to function offline. This is particularly useful for mobile applications, as users often have intermittent or slow internet connections.

How can I update the cache with AppCache?

To update the cache with AppCache, you need to make a change to the manifest file. This can be as simple as adding a comment with a timestamp or version number. When the browser sees that the manifest file has changed, it will download and cache all the files listed in the manifest file again.

What is the difference between AppCache and Service Workers?

Both AppCache and Service Workers allow you to provide offline functionality to your web applications. However, Service Workers offer more control and flexibility. With Service Workers, you can control the caching process programmatically, which allows for more complex caching strategies. Additionally, Service Workers can intercept network requests and modify responses, which is not possible with AppCache.

Are there any security concerns with using AppCache?

AppCache does not introduce any new security concerns. However, like any other web technology, it should be used responsibly. For example, you should ensure that only the necessary files are cached and that the manifest file is kept secure and up-to-date to prevent serving outdated or malicious content to users.