Imagine how a typical web application works: User makes a request to the server, server serves a web page, user interacts with the page, and makes another request to the server and the cycle continues. So the application requires internet connectivity to work properly. But now HTML5 gives us the ability to design web applications or certain parts of a web application in a way that it would behave properly and reliably even when the internet connection is lost. These kinds of applications are called Offline Applications.
Offline Applications are built mainly using two technologies:
- Offline and Online Browser Events. Certain events are fired in the application when the browser recognizes if it’s currently online or offline. This capability of the browsers has been around for a while.
- Application Cache. One of the new features of HTML5. It is currently supported by Chrome, Opera, Safari, Firefox and Internet Explorer 10.
So what is an Application Cache and how it is different from a Browser Cache? In regular Browser Caching, if you disconnect from the internet and try to refresh a page you might get the content for this page, but in most cases images won’t appear, CSS style sheets won’t load and you will end up with a page that has broken parts. Application Cache gives you an opportunity to reliably serve up the cached files even when you are not connected to the internet.
Now let’s imagine a simple web application that normally allows you to send an email, but in case if internet connection is lost when you click the send button, it allows you to store the message locally and send it once the connection is restored. This feature might not be super-useful while you are using a desktop computer and have a stable internet connection, but it might come in handy if you are mobile and internet connection is unreliable.
If you look at the code fragment above you’ll notice a manifest attribute in html tag. Basically this attribute distinguishes Offline Applications from regular web pages and tells the browser that something different is going on. It contains a link to a text file that is known as Cache Manifest File which is the heart of an Offline Application.
Cache Manifest should always contain CACHE MANIFEST in its first line. CACHE section of the manifest contains a list of files that will be stored in Application Cache. NETWORK section contains a list of files that should not be cached and FALLBACK section maps a page to another page, which will be accessed if primary page is not accessible.
Now this is the most interesting part of the anatomy of Offline Applications and Application Cache – files mentioned in the manifest will be loaded from the server if and only if browser detects that cache manifest has changed. Making changes to the files is not enough to get them from the server. You need to have a mechanism that updates the manifest. Usually it is done by changing the commented version line in the manifest file. So after browser accesses the manifest and sees that it has been changed it starts downloading the files and fires a Progress event. When all files are downloaded browser fires Cached event, meaning that files are ready for use. But if browser detects no changes in manifest file it will simply fire No Update event.
Earlier I mentioned that Application Cache allows you to serve up files reliably. In regular browser caching, files are cached individually. But in Application Cache all files are cached together. Browser treats these files as one application and “installs” it to Application Cache. And caching happens in transactional way, so you don’t have to worry about losing some of the files from the cache – it’s all or nothing.
There are few things that you should remember while building an offline application
- After Initial Load, pages are always loaded from Application Cache. So browser first loads the page from cache then checks the manifest and updates cache files if necessary. But if you want to display the updated files you need to refresh the page, or use JavaScript to automatically refresh the page once Cached event has been fired by the browser.
- Avoid Cache Collision. If you are using Application Cache for certain files, never use browser caching for the same files. There might be a situation when cache manifest is updated and browser attempts to load new files from the server, but instead it gets them from browser cache. In our email application I am using aspx pages and from server side I’m making sure that these files are not to be cached in a browser. But you can use any other server side technology to deal with this problem.
- Mime type for the cache manifest file should be text/cache-manifest and the encoding – utf-8.
So overall Application Cache is a powerful tool and it allows you to build fast, reliable HTML5 offline applications that are available at almost any time.
