Offline Web Browsing

Offline Web Browsing is part 10 of Beginner’s Guide to HTML5.

In this article we are going to find a way to view a web site without internet. With application cache it is easy to make an offline version of a web application, by creating a cache manifest file. Let’s see what is actually this application cache.

Application Cache

HTML5 introduces application cache with the intention of when a web application is cached, it can accessible without an internet connection.

Application cache gives an application three advantages:

  1. Offline browsing – users can use the application when they’re offline
  2. Speed – cached resources load faster
  3. Reduced server load – the browser will only download updated/changed resources from the server

Let’s see how to create this cache manifest file.

[code language=”html”] This is the most important code segment if you want to reserve a manifest file on the user’s web browser to support the offline web browsing. To enable application cache, include the manifest attribute in the document’stag. Just put this code line there and view the website once with the online, and view it repeatedly in offline.

Every page with the manifest attribute specified will be cached when the user visits it. If the manifest attribute is not specified, the page will not be cached unless the page is specified directly in the manifest file.

The recommended file extension for manifest files is: “.appcache”

Let’s look at what is this manifest file.

The Manifest File

The manifest file is a simple text file, which tells the browser what to cache (and what to never cache).

The manifest file has three sections:

CACHE MANIFEST – Files listed under this header will be cached after they are downloaded for the first time
 This is the first line of the file and also it is a required line.CACHE MANIFEST
/script.jsThe manifest file above lists three resources: a CSS file, a GIF image, and a JavaScript file. When the manifest file is loaded, the browser will download the three files from the root directory of the web site. Then, whenever the user is not connected to the internet, the resources will still be available.
NETWORK – Files listed under this header require a connection to the server, and will never be cached
 This specifies the files that should not cached in the web browser. The NETWORK section below specifies that the file “login.asp” should never be cached, and will not be available offline.NETWORK:
login.aspAn asterisk can be used to indicate that all other resources/files require an internet connection.


FALLBACK – Files listed under this header specifies fallback pages if a page is inaccessible
 The FALLBACK section below specifies that “offline.html” will be served in place of all files in the /html/ catalog, in case an internet connection cannot be established. The first URI is the resource, the second is the fallback.FALLBACK:
/html/ /offline.html 

This is a complete manifest file

# 2012-02-21 v1.0.0
/html/ /offline.html

You might have wondered what is the line means with a # hashtag. Lines starting with a “#” are comment lines, but can also serve another purpose. An application’s cache is only updated when its manifest file changes. If you edit an image or change a JavaScript function, those changes will not be re-cached. Updating the date and version in a comment line is one way to make the browser re-cache your files.

So how long would be this cached information stored in the browser. Once an application is cached, it remains cached until one of the following happens. Also user can define the size limit of the cache information.

  • The user clears the browser’s cache
  • The manifest file is modified (see tip below)
  • The application cache is programmatically updated


But remember to be careful what you are going to allow for caching. Once a file is cached, the browser will continue to show the cached version, even if you change the file on the server. To ensure the browser updates the cache, you need to change the manifest file. So that’s all. In the next section we are looking at web workers behind the scenes.

What’s Next?

Learn how to Workers in the Web.

Written by Sandeep Likhar

Sandeep Likhar is from India, where he is a blogger, eBook designer, and founder of LetsDnD. He has 6 years of experience in the industry as a Digital Publishing Expert and eBook Converter, providing services to authors, publishers, and distributors worldwide. He is proficient in converting books into various formats, such as HTML, epub, mobi, word, PDF, including all major online platforms like iTunes, Kobo, Kindle, CreateSpace, B&N, Smashwords, and more.


Leave a Reply
  1. Excellent web site. Lots of useful info here. I’m sending it to some friends ans additionally sharing in delicious.

    And naturally, thank you for your sweat!

  2. My partner and I stumbled over here different web page and thought I may as well
    check things out. I like what I see so now i am following you.
    Look forward to going over your web page again.

  3. Very great post. I simply stumbled upon your weblog and wished to
    mention that I have really loved surfing around your blog posts.

    After all I will be subscribing in your feed and I
    hope you write again soon!

  4. I have been browsing on-line greater than three hours today, but I by no
    means found any fascinating article like yours. It is pretty worth enough for
    me. In my view, if all website owners and bloggers made just right content as you
    probably did, the internet will be much more helpful than ever before.

Comment Below