Introduction to HTML5 Application cache

An brief introduction to HTML5 application cache.

Learning the web technologies are like drawing water from an ocean. It never ends. And no one is fully aware about all the technologies. In this article, i am gonna explain about HTML5 application cache, which helps web applications in three different ways.

  1. Users can use the application when they are offline – Offline browsing
  2. Cached resources load faster – Speed
  3. The browser will only download updated/changed resources from the server – Reduced server load

The application cache or Appcache allows a developer to specify which files the browser should cache and make available to offline users. Your app will load and work correctly even if the user hits the refresh button while they are offline.


The cache manifest file

The cache manifest file is a simple text file that lists the resources the browser should cache for offline access.


Referencing a manifest file

To enable the application cache for an app, include the manifest attribute on the document’s html tag :

<html manifest="example.appcache">
   <!-- the html document goes here -->

By default the page gets cached to which the appcache file is attached.


To view and clear the appcache in chrome

Type in the following address and press enter to view the chrome application cache files.


Appcache can be used to store images,font files,css and js files and even static html pages. We will see the structure of a manifest files and how to use them in web applications in the upcoming tutorials.

So Subscribe to our newsletter and stay updated to our upcoming articles and tutorials.

Leave a Reply