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.
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.
Most surprisingly, even including IE9, there is no such support available on Internet Explorer.
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:
Cache manifest file has the below distinct sections:
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:
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!
The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.
Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved
Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.
