Today we are going forward to learn a new feature of HTML5 called Application Cache. This feature allows a user to work offline, without an internet connection. So let’s understand some things related to Application Cache.
- What is Application Cache?
- Application Cache is a new feature introduced by HTML5 in which we can make a web application work offline without an internet connection.
- This feature allows you to work on a web application offline because, it allows you to cache the web application and then makes it accessible without an internet connection, since it is stored locally on your computer.
- All browsers can use Application Cache except IE. Internet Explorer browser supports application cache from version 10 onwards.
- Application Cache is also called as appcache.
- Advantages of Application Cache are:
- Browse webpages offline – user’s can use the cached application when they are offline.
- Pages load faster – cached resources load faster as they are stored locally on the computer.
- Less load for Server – the browser will only download updated/changed resources from the server when the use is online.
- What is the Manifest file?
- Manifest file is required by the Application cache for its work.
- Manifest file is a simple text file, which tells the browser what to cache and what never to cache.
- Manifest file has 3 sections:
- CACHE MANIFEST
- NETWORK
- FALLBACK
- The files included under the first section CACHE MANIFEST header will be cached after they are downloaded for the first time.
- The files included under the header NETWORK require a connection to the server and will never be cached.
- Example of NETWORK:
NETWORK: //header NETWORK is compulsory login.asp
NETWORK: *
- Example of FALLBACK:
FALLBACK: //header FALLBACK is compulsory /html/ /offline.html
- CACHE MANIFEST is the header in the manifest file, which allows the resources listed under it to be cached by the browser and stored for offline use.
- Let’s see an example of CACHE MANIFEST:
CACHE MANIFEST // the header CACHE MANIFEST is compulsory index.html style.css images/logo.png scripts/myscript.js
- To allow a webpage to be cached, the page path should be added to the manifest file, so that the page will be cached when the manifest file is loaded.
- To reference a webpage to the manifest file, we need to just include manifest attribute to the html tag of the page to be cached.
- Example of the attribute is shown below:
<html manifest=”example.appcache”> --- --- </html>
- The manifest file needs to be served with a content type header of text/cache=manifest;
- Serving a manifest file is very simple with an .htaccess file.
- .htaccess file is a directory-level configuration file supported by several web servers, that allows for decentralized management of web server configuration.
- This will serve all files with an extension of “manifest” with the appropriate content-type header.
- The application that was cached will remain unless,
- The user clears it out.
- The manifest has been modified.
- The cache is updated.
- Once you have cached the webpages using application cache, the same pages will be shown to you even if the webpages have been updated by the server later.
- In order to get the updated cache, manifest file needs to be changed.
- Browsers may have different size limits for cached data (some browsers have a 5MB limit per site).
Here we finished a short introduction of the Application Cache feature of HTML5. We will try it practically in next session.