In this topic we will learn how to access web applications locally without network connection…For that first of all we will learn what is an offline web application…
What is an offline web application?
Applications that we can access without network connection are known offline web applications. These are lists of URLs, Images, HTML files, CSS files, Java script files and any other resource files.
Offline web applications use resources from the browser’s cache, render it and display it to the browser.
How do online and offline applications work?
Usually an online application works like when a user requests from a browser(Enter URL) it downloads associated page resources from the server and then renders all resources on the browser.
When we talk about offline web applications we are able to run web applications offline using one of the greatest features of HTML5 and it is APPCACHE web API.
Once you have a network connection in your system it will download all resources from the server and using APPCACHE API it will be cached in browsers so when you haven’t a network connection browser will render applications from locally cached resources.
So now a common question will arise: how could the browser know which resources it should cache?
So the answer for this is it reads the resources from the manifest file.
What is the Manifest file?
Manifest file is the file in which there is a list of resources that web applications need to access while it’s disconnected from the network.
Browser reads the list of resources from the Manifest file and cache them locally.
To download and cache resources locally the application needs to point to the 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 page which we want to cache locally must have a manifest attribute.
How to create a 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 the first line of the file.
The rest of the code in the manifest file is divided into three sections.
- Cache
- Network
- Fallback
Cache section
In this section there is a list of all paths to the files which we want to cache locally.
Every page has a separate line in this 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 known as the online white listing section. In this section there will be a list of all paths to the files which require network connection and we don’t want to cache that copy locally.
The list of resources we define in the network section is not cached locally. When these types of resources are 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, the browser will cache all files defined in the CACHE section. It won’t cache nocache.html files.
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 tell the browser to not list any pages except lists defined in the 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 the network section we defined a 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 messages rather than giving basic browser’s error messages.
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 an 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 modified 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. The reason behind this is the 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 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..:)
