HTML5 Offline Website :
Today I am going to discuss about a magic of HTML5.Can you ever imagine that your website is running offline i.e without internet connection. You are thinking that I am joking with you. But now it's possible to make a website run offline using HTML5 application cache. If you can give 15 min to read this blog,then I assure you that you can create offline application.
The application cache is controlled by a plain text file called a manifest, which contains a list of resources to be stored for using when there is no network connection. The list can also define the conditions for caching, such as which pages should never be cached and even what to show the user when he follows a link to an uncached page.
If the user goes offline but has visited the
site while online, the cached resources will be loaded so the user can still
view the site in a limited form. By carefully considering the contents of your
manifest file, you can offer a suitable web experience to a disconnected user.
I don't like much more theory so let us come to the point and follow the step to create your first offline application.
Step - 1(Define the manifest file)
Define the manifest file in your page HTML
so the browser understand this website have a offline application cache file.
<!DOCTYPE HTML>
<HTML
manifest="/cache.manifest">
<body>
...
</body>
</HTML>
Step – 2 (Set content type)
Your cache manifest file can be located
anywhere on your web server, but it must be served with the content type
text/cache-manifest.
Then the question may arise how to define the content type.
For Apache-based web server, you can
probably just put an AddType directive in the .htaccess file at the root of
your web directory:
AddType text/cache-manifest .manifest
For IIS7 server you can define content type using web.config file.
<?xml version="1.0"
encoding="UTF-8"?>
<configuration>
<system.webServer>
<staticContent>
<remove fileExtension=".manifest" />
<mimeMap
fileExtension=".manifest" mimeType="text/cache-manifest"/>
</staticContent>
</system.webServer>
</configuration>
From these two steps now your browser can know that you have an offline application cache and browser can access that file.
But nothing is stored yet.
Step - 3 (Creating a Manifest File)
The first line of every cache manifest file is:
CACHE MANIFEST
Let’s start with an example of a full
manifest file.I will discuss each of the part below.
CACHE MANIFEST
# This is a comment
CACHE:
/css/style.css
/js/jquery.js
/img/logo.png
http://abc.com/stylesheet.css
FALLBACK:
/ /offline.html
NETWORK:
*
So it have mainly 4 sections.
1.Comment section -
The comment section is for write the version number of the manifest file. It's not only for your reference but also it has a great impact. I will discuss that later.2.CACHE Section -
The CACHE section is considered the default — i.e., if no section heading has been defined, the browser will assume this is the CACHE section. Beneath this heading, you can list URIs to resources you want the browser to download and cache for offline use, including URIs hosted externally.
Like
CACHE MANIFEST
/css/style.css
/js/jquery.js
/img/logo.png
http://abc.com/stylesheet.css
Every single resource that you want to cache
explicitly should be listed here, right down to the last image. The browser is
not aware of a resource unless you provide the full path to it. This means you
can’t use wildcards. If you list /images/* as a resource, the browser will
request that URI as if you typed it into your address bar.
But don’t run off and store URIs for every
single page on your site into your manifest. When a user visits a page that
points to the manifest file, that page will also be cached. This means that if
you want to allow users access to pages they’ve already viewed, just make those
pages point to the manifest file and the browser will cache them appropriately.
3.FALLBACK Section -
There is one more type
of section in a cache manifest file: a fallback section. In a fallback section,
you can define substitutions for online resources that, for whatever reason,
can’t be cached or weren’t cached successfully. The HTML5 specification offers
this clever example of using a fallback section:
CACHE MANIFEST
FALLBACK:
/ /offline.html
NETWORK:
*
Now look at the fallback section. The
fallback section in this cache manifest only has a single line. The first part
of the line (before the space) is not a URL. It’s really a URL pattern. The
single character (/) will match any page on your site, not just the home page.
When you try to visit a page while you’re offline, your browser will look for
it in the appcache. If your browser finds the page in the app-cache (because
you visited it while online, and the page was implicitly added to the app-cache
at that time), then your browser will display the cached copy of the page. If
your browser doesn’t find the page in the app-cache, instead of displaying an
error message, it will display the page /offline.html, as specified in the
second half of that line in the fallback section.
4.NETWORK Section -
Finally, we have the
NETWORK section, used to tell the browser explicitly which resources are only
available while online. By default, this uses the asterisk * symbol, meaning
all resources that are not cached will require a connection. Alternatively we
can whitelist specific url prefixes, like all the avatars if we wish.
CACHE MANIFEST
NETWORK:
*
You can explicitly define resources not to
cache by providing a list of URIs — essentially a whitelist of online-only
assets.
CACHE MANIFEST
NETWORK:
registration.php
payment.php
So now registration.php and payment.php page shown to the user only when they are online and those pages are never store in appcache.
Now your offline application is ready but I'll discuss some question and their respective answers to make this topic more clear.
1.What will happened if I add/remove/modify one or more file names in the cache or other section of Manifest file ?
Answer: If we change any thing in the
Manifest file then the browser again remove all the files from cache and again
download all the files in appcache.
When we request for a page at first browser
check the Manifest file. If there is no change then it does nothing but if
there is any change then the browser again download all the files from server.
2.What will happened if I didn't change the Manifest file but change the files which are mention in the Manifest file?
Answer: This is a very interesting question.
If we didn't change the Manifest file then browser doesn’t understand any
change and it will not fetch the file from server to render.
But as I change the file content so it's not reflecting my change in browser. To solve this problem concept of "Comment Section" has to be introduced.
In that section we mention a version number of Manifest file. So if we wanna change any pages which are listed in the Manifest file then we have to just change the version number.
So now when browser check the Manifest file it observes the change and load the content of the manifest file again from server. So our problem is solved. Change will reflect to the browser.. :)
3.What will happen if I write one of the file path wrongly in Manifest file or one of the resource fails to download properly?
Answer:
if even a single resource listed in your cache manifest file fails to
download properly, the entire process of caching your offline web application
will fail. Your browser will fire the error event, but there is no indication
of what the actual problem was. This can make debugging offline web
applications even more frustrating than usual.
4.Now the main question: which browsers are supporting HTML5 offline application feature?
Answer: The AppCache feature is supported by
almost all modern browsers, such as Firefox, Chrome and Safari. Unfortunately,
Internet Explorer 9 does not support this feature.
Thanks for reading this blog.Hope you enjoy it.Follow this blog to get updated about design stuff.
No comments:
Post a Comment