As we know Web applications always needs a network connection to function.This is the most important requirement for web applications.Though much more devices are connected to the internet today than ever before but still network connectivity can be lost due to several reasons. Application Cache in HTML5 allows users to access the web application even when there is no network connection.
So offline web applications is contradictory to how we perceive web applications.Conventional web applications are expected to be always connected to the internet or network.Offline web application work in the following manner
- Web application is accessed through a URL from web browser
- Browser reads the manifest file and caches the resources mentioned in the manifest file
- If the web application goes offline browser uses the cached copies of the resources
- If we save any information while the application is offline then it would be synchronized with the server once the application goes online again.
We can specify the web pages or other files such as images to be accessed from the cache when the application is offline.
There are two important components to implement the offline web application in HTML5.
1)Add the cache manifest file Application cache works using the cache manifest file ,which is a text file that contains the list of resources to be cached.These cached resources are then served from the cache when the network is not available.
Its important to see that the cache manifest file is served with the content type of text/cache-manifest.We need to ensure on the web server that the content type for the manifest file is “text/cache-manifest”.
2)Add the manifest attribute to the html element in the web page We need to attach the manifest attribute to the html element of the page to enable application caching.If we add the manifest attribute then the page is automatically cached and we do not need to explicitly add it to the manifest file.
<html manifest="cache.manifest">
Following are the sections in the cache manifest file
CACHE MANIFEST The resources which are listed here will be downloaded and used when the network connection is not available.
NETWORK The resources which are listed here will never be cached.Suppose if we have a webpage which needs to be connected to the network to function correctly then we may not need the web page to be available offline.This webpage we can include in the NETWORK section.
FALLBACK This section tells the browser which resource to serve when the application goes offline and the requested resource is not cached.It contains two URL entries ,one is the resource which is requested and the second is the resource to serve when the first resource is requested and is unavailable.
/UnCached.html /Cached.html
Following is a sample manifest that contains different sections:
CACHE MANIFEST # this is a comment # mention resources to cache here CACHE: home.html stylesheet.css images/home.png scripts/common.js # resources which requires network connection NETWORK: login.html # static.html will be served if dynamic.html is inaccessible FALLBACK: /dynamic.html /static.html
Application cache provides the following advantages
- Webapplication can work even without network connection.
- If there are some application resources which are never updated we can load these resources from the cache instead of fetching them from the server.This reduces the load on the server.Also this means that resources will be loaded in less time.
Leave a Reply