Load faster with HTML5 Application Cache

Load your webpages and web applications faster with HTML5 Application cache.

In the previous post i have explained about HTML5 Application cache (or Appcache) . In this post i am gonna explain how to implement the Appcache in your web pages or web applications. The Appcache is mainly targeted on web applications and static web pages. As using it in a dynamic php pages like blogs may fail to update the pages for the users who received the cache files earlier. so using it in a blog can cache the main page and new posts will not be shown to the users. But however, if we modify it slightly, we can successfully use it in blogs too, like i have implemented it in this blog. But however, in this post , i will be explaining how to implement Appcache in static web pages and web applications.

 

The manifest file

As i have explained in the previous tutorial, the .appcache manifest file is the main file used in caching process. So lets try building an Appcache file.

To start with the appcache file is a simple file with anyname and an .appcache extension. The file starts with the line CACHE MANIFEST. This file has three parts.

  1. CACHE :  This is the default section for entries. Files listed under this header or directly under CACHE MANIFEST will be explicitly cached after they are downloaded for the first time.
  2. NETWORK : Files listed under this section may come from the network if they aren’t in the cache, otherwise the network isn’t used, even if the user is not online. You can white-list specific URL’s here, or simply a “*”, which allows all URL’s.
  3. FALLBACK : An optional section specifying fallback pages, if a resource is inaccessible.The first URI is the resource, the second is the fallback used if the network request fails or errors. Both URIs must from the same origin as the manifest file.

 

Loading the pages faster

In a static web page or a web application, we use fonts,css files, js files , images etc. So if we cache these abd the static page itself, the website will load faster. To do this first create a blank appcache file and include the file as stated in the previous article.

Then to start storing the files in the cache memory, the appcache should be similar to the one given below.


CACHE MANIFEST
# 2010-06-18:v3

# Explicitly cached entries
index.html
css/style.css

# All other resources (e.g. sites) require the user to be online.
NETWORK:
*

# Additional resources to cache
CACHE:
images/logo1.png
images/logo2.png
images/logo3.png

Save this and attach it into the page. Those assets stated in the appcache file will be cached and will be stored in the memory. To view the cache or to clear it go to chrome://appcache-internals/
For a live demo, visit the appcache internals page and you will see this blogs cached files. we use html5 cache to store the font files and js files to make the webpages load faster.
In the coming post’s i will be explaining about how to add an offline feature to the application cache.

Subscribe to our newsletter to catch up with our latest posts.

2 Comment

  1. Akhil says: Reply

    Awesome article..Will surely try it in ma portfolio website…

  2. Quite a Masterpiece. Great job

Leave a Reply