HTML 5 TutorialsApplication Cache

Application Cache

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:
      1. CACHE MANIFEST
      2. NETWORK
      3. 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
      • Here, the example indicates that “login.asp” file should never be cached.
      • Another example:
      • NETWORK:
        *
      • Here, when asterisk(*) is specified instead of the resource file, it indicates that no file should be cached.
    • Files included under the section FALLBACK specifies fallback page if a resource is inaccessible.
      • Example of FALLBACK:
      • FALLBACK:              //header FALLBACK is compulsory
        /html/ /offline.html
      • 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.
    • So this is the manifest file. But we are more interested in the CACHE MANIFEST, since we want to learn how to cache resources to work offline with it.
  • CACHE MANIFEST:
    • 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
    • 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.
  • How to reference a webpage to a manifest file?
    • 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>
    • 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”.
  • Serving the manifest:
    • 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.
  • Cache Updating:
    • The application that was cached will remain unless,
      1. The user clears it out.
      2. The manifest has been modified.
      3. 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.

Previous articleWEBSTORAGE
Next articleWEB STORAGE Part – 2

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -