Access web application offline – HTML5 Application cache

In this topic we will learn how to access web application locally without network connection…For that first of all we will learn that what is offline web application…

What is offline web application?

Applications those we can access without network connection are known offline web applications. these are list of URLs, Images, HTML files, CSS files, Java script files and any other resources files.

Offline web applications use resources from browser’s cache, render it and display it to the browser.

How online and offline application works?

Usually online application works like when user request from browser(Enter URL) it downloads associated page resources from server and then render all resources on browser. 

When we talk about offline web application we can able to run web application offline using one of the greatest feature of HTML5 and it is APPCACHE web API.

Once you have network connection in your system it will download all resources from server and using APPCACHE API it will be cached in browsers so when you haven’t network connection browser will render application from locally cached resources.

So now common question will raise into mind that how could browser know that which resources it should cache?

so answer for this is it reads the resources from manifest file.

What is Manifest file? 

Manifest file is the file in which there are list of resources that web applications need to access while its disconnected from the network.

Browser reads the list of resources from Manifest file and cache them locally.

To download and cache resources locally application needs to point Manifest file.

<html manifeast="/appcacheExample.appcache">
<body>
      //Rest of the design code
</body>
</html>

Manifest file must be served with the content type text/cache-manifest

In application every pages which we wants to cache locally must have manifest attribute.

How to create Manifest file?

The first line of the Manifest file is CACHE MANIFEST. This is the header of that file and it must be there in first line of the file.

Rest of the code in manifest file is divided into three section.
  1. Cache
  2. Network
  3. Fallback

Cache section

In this section there is list all path to the files which we want to cache locally.

Every page has separate line int his section.

For e.g

CACHE MANIFIST
#version 1.0

CACHE:
/appcache_example.css
/appcache_example.js
/appcache_example.jpg

Network section

This section is also know as online white listing section. In this section there will be list of all path to the files which compulsory needs network connection and we don’t want to cache that copy locally.

The list of resources we define in network section is not cached locally. When these type of resources accessed offline then it gives an error.

For e.g.

CACHE MANIFEST
#version 1.1

CACHE:
/appcache_example.css
/appcache_example.js
/appcache_example.jpg

NETWORK:
/nocache.html

for the above example browser will cache all files defined in CACHE section. It won’t cache nocache.html file.

In network section if we don’t want to list of page separately then we can use wildcard character *”.


For e.g.

CACHE MANIFEST
#version 1.2

CACHE:
/appcache_example.css
/appcache_example.js
/appcache_example.jpg

NETWORK:
*

It will tells browser to not list any pages except lists defined in CACHE section.

Fallback Section

The page listed in this section will be displayed when any error occurs at time of accessing offline application. Lets assume In network section we defined nocatch.html file, so that file will not be cached and if we access this file offline then it will give an error. So in that case it will be better that we can give proper error message rather than giving basic browser’s error message.

For e.g.

CACHE MANIFEST
#version 1.3

CACHE:
/appcache_example.css
/appcache_example.js
/appcache_example.jpg

NETWORK:
/nocatch.html

FALLBACK:
/Error.html

As per above manifest file if we try to access nocacth.html then it will display Error.html page. 
  

Other Important things to remember

When we are using appcache API and caching resources locally then there is best practice to use version and notes of changes with created and modify date.

Comments in manifest files are started with “#”.
It is not compulsory to change in comments at every deployment but recommended as there might be a scenario where you have changes in CSS and JS file which were cached previously and after deployment it is not affected. Reason behind this is browser is rendering resources from cached copies so when you change in manifest file in terms of version then changes will be updated in cached copy and your changes will be take place.

Advantages of app cache

There are three main benefits to using AppCache. The first should be obvious, it’s faster. Since the files are already cached in memory the execution is significantly quicker. Secondly, network traffic is reduced since there is no need to pull down a cached file from the server. Lastly, it can be very useful to have certain applications be accessible both online and offline.


Disadvantages of app cache

There are really only two limitations. First is the fact that some browsers put a limit on how much memory they will allot for caching files. The general consensus on the limit seems to be 5 Mb right now but that could change over time. The second is that AppCache manifest files must be served from the server with the correct mime-type or the manifest file may not be recognized by the browser. The correct mime-type is text/cache-manifest. For many servers, especially older ones, this means the mime-type may have to be manually configured.


Cheers…Hope this will be helpful to you..:)
Written by Mitesh Gadhiya