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
- Example of NETWORK:
- Here, the example indicates that “login.asp” file should never be cached.
- Another example:
- Here, when asterisk(*) is specified instead of the resource file, it indicates that no file should be cached.
NETWORK: //header NETWORK is compulsory
- Example of FALLBACK:
- Here, the example indicates that if in case connection to the server is not established, an “offline.html” page will be served in place of all files in /html/ catalog.
- In the above example, /html/ is the resource file and /offline.html is the fallback.
FALLBACK: //header FALLBACK is compulsory
- 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:
- Here, the files index.html, style.css, logo.png and myscript.js will be downloaded from the root directory of the website and cached (or stored), when the manifest file is loaded. Then these four files will be available anytime even though the user is offline.
- But if the manifest file or a resource specified in it fails to download, the entire cache process fails.
- The header CACHE MANIFEST shown in above example is compulsory.
CACHE MANIFEST // the header CACHE MANIFEST is compulsory
- 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:
- In the above example, the particular html file will be included in the “example.appcache” manifest file.
- This attribute manifest should be present in all pages you want to cache.
- The recommended file extension for manifest files is “.appcache”.
- 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.
Here we finished a short introduction of the Application Cache feature of HTML5. We will try it practically in next session.