Web Development

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
/stylesheet.css
/image.gif
/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.

NETWORK:
*

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

 CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.jsNETWORK:
login.aspFALLBACK:
/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.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Reply

11 Comments on "Offline Web Browsing"

Notify of
avatar
Sort by:   newest | oldest | most voted
Olivia Fetherstonhaugh
Guest

Keep it up if an individual needs a professionals
view concerning blogging and site-building I will most definirely recommend him/her to pay a visit to this blog.
Thanks!

Austin Brady
Guest

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!

Marissa Coungeau
Guest

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.

Maybelle
Guest

It’s an awesome paragraph in support of all the internet
users; they will get advantage from it I am sure.

Tresa Crutchfield
Guest

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!

Tony Richmond
Guest

This site certainly has all of the information and facts I needed about this subject and
didn’t know who to ask.

Lenore
Guest

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.

Vicky
Guest

Thanks for sharing such a pleasant thought, article is fastidious,
thats why i have read it fully

Rosa
Guest

This is a topic that is near to my heart… Many thanks!
Where are your contact details though?

Enrique Zavala
Guest

Awesome! Its actually awesome article, I have got much clear
idea regarding from this article.

Maude
Guest

My relatives every time say that I am killing
my time here at web, but I know I am getting experience every day by
reading thes nice articles.

wpDiscuz
DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW