Introduction
In this article I will walk you through the offline storage functionality that is available in HTML5 web applications. I will also provide sample code to demonstrate the feature. The advantage of building offline web applications is that users can still use the web applications without network connectivity. The offline web application feature is really useful for allowing your site’s users to work with the resources which don’t require network connectivity like HTML, image, CSS, JavaScript, media files and other resources.
Offline web applications are made possible using the concept of caching. This HTML5 caching can be looked at like a super set of the normal browser caching. In HTML5, caching is done on the file basis and the developer has the flexibility to specify which of the files need to be cached. Also this feature helps in improving website speed, as most of the files will be cached on the client side.
Current Browser Support
As HTML is a client-oriented technology, the features that are supported always depend on the client browser itself. As with many of the features of HTML5, not all browsers support the offline web application caching feature. Below is the list of prominent browsers that do support the offline feature.
- Chrome 5.0 and more
- Safari 4.0 and more
- FireFox 3.5 and more
Most surprisingly, even including IE9, there is no such support available on Internet Explorer.
Cache manifest file and the caching mechanism
The entire offline caching operation revolves around the manifest file. This file implicates the list of files that are to be cached on the client, which will be served by the web application during the down time. The cache manifest file has specific syntax/rules to be followed:
- This file should be included as a part of the web application.
- The MIME type for the manifest file should be specified as text/cache-manifest and the same should be configured in the web server.
- The manifest file should contain the first line as “CACHE MANIFEST“
- Comments can be added to the cache manifest file by prefixing the line with character #.
Cache manifest file has the below distinct sections:
- CACHE – In this section the developer can mention the relative URLs of the resources that need to be cached. Without using this section, files can also be listed directly under the CACHE MANIFEST line.
- NETWORK – This section can be used to specify the list of files (relative URLs) that always need a network to be served. When requests are made to these files, the local user cache will be bypassed. Wild cards like * can be used.
- FALLBACK – This section is used to fall back to a configured resource when network is not available. It takes two relative URL parameters: the first one should be the actual network resource and the second one is the fall back resource. When the user is offline and the request is made to the network resource then the user is served with the fallback resource from the local cache.
Below is a sample manifest file:
CACHE MANIFEST
#Files included here are cached locally
#as that of the files under the CACHE
#section
/Images/image1.jpg
/Images/image2.jpg
NETWORK:
/Services/SampleDataService.Svc
FALLBACK:
/networkresource.html /offlineresource.html
The HTML files can include the manifest file through the HTML tag. These files will be cached implicitly even though they are not listed in the manifest file. Below is the example:
<html manifest=”demofile.manifest”>
</html>
The resources will be cached when the first request is made. The local user cache will be updated only if the manifest file is updated or if the user has cleared the client cache. You can also explicitly invoke the cache update using JavaScript. Below is the sample code:
<script type="text/javascript">
function OnLoad() {
window.applicationCache.addEventListner('updateready', function (e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
window.applicationCache.swapCache();
}
});
}
function UpdateCache() {
window.applicationCache.update();
}
</script>
As indicated in the above script, applicationCache.update() will check if a cache update is required or not and return the status to the callback function. Calling applicationCache.swapCache() on UPDATEREADY status will pull the modified cache resources from the server and update the local cache content. Below are some of the other status types:
- CACHED
- PROGRESS
- ERROR
- CHECKING
- DOWNLOADING
- NOUPDATE
- OBSOLETE
Conclusion
HTML5’s offline web application feature is aimed at building fast, reliable and “any time available” (with minimal resources) web applications. I hope this article brings good ideas to readers about the offline web application feature in HTML5. Please make use of the comments section below to provide your comments or to ask questions.
Happy Reading!
