Today we are going to learn practically, how application cache works. For that we are going to use our “Blue Developer Directory” website project.
Let’s understand what will be our task for today.
We will create a hyperlink of “info” at the footer which when clicked on will open page “info.html”. We are going to cache and store our “homepage.html” and this new “info.html” page for the offline use. We will create some more files for the process which we will see in the course of time.
Let’s complete the task in a step by step manner.
- As usual create a new folder on the desktop with name AppCache Practical.
- Copy all the “Blue Developer Directory” project content from the previous folder and paste it in the newly created folder, AppCache Practical.
- Now, next step is to open the “homepage.html” page from “AppCache Practical” folder with notepad++ editor.
- Here we have to do the task of creating a hyperlink info at the footer of “homepage.html”. So, go to the code of footer in “homepage.html” and write the following code there to create a hyperlink.
Copyright 2014 Blue Developer Directory <a style="color:white;" href="info.html">Info</a>
- Here, a hyperlink info is created with white fore-color.
- It is shown in the figure below:
- In the fig 1 you can see the hyperlink info besides the copyright statement.
- If you click on it, you will get the message “The page is not found”. This is because we don’t have “info.html” webpage yet.
- Hence, copy the code of “about .html” page and close it.
- Create a new notepad++ document and save it as “info.html”.
- Now paste the copied code in this “info.html” page and save it.
- Now delete all the content code i.e. the code written inside
tag, since we want to have some other information.
- Write the following inside
tag:XHTML1<section>-----</section>XHTML12<h2>Welcome to Blue Developer Directory Info!</h2><p>This page is cached</p>
- We need to have some more information, so for practice let’s copy some dummy information from internet and paste it below the paragraph “This page is cached”.
- After pasting the content in the page make small paragraphs of it by addingXHTML1<p>-----</p>
- Now click on the info hyperlink at the footer of “homepage.html”, the page “info.html” will be shown. Its output is shown below:
- Now if we are working locally, our whole website is on our PC itself. Hence it is already available to us offline.
- To really know how it works, put all the content of your project folder AppCache Practical on server.
- Now access the website from the client PC when internet connection is ON.
- You will be able to access the whole website with no problem.
- Now, disconnect your internet connection. The website is now inaccessible from the client PC.
- But even if the internet connection is turned off, you want the homepage.html and info.html pages to be accessed.
- Here, comes the task to cache these pages.
- To cache the 2 pages, we need .htaccess file and manifest file as studied in last session.
- To create a .htaccess file, open a new notepad++ document and write the following line in it:
1AddType text/cache-manifest manifest
- Now save this file as “.htaccess”. Don’t forget to put period(.) before htaccess. Keep “Save as type:” as simple “Normal text file(*.txt)”.
- Put this file also on server.
- To create manifest file open a new notepad++ document and save it as “developer.manifest”, where .manifest is the extension of developer.manifest file. Keep “Save as type:” as “Normal text file(*.txt)”.
- Now, write the following code in it.
- The lines starting with hash(#) in the above code are comments.
- Here, in the code the files or resources included under CACHE header will be cached and stored for offline use.
- In the above code if you would have not included style.css and background.png files, the homepage and info would have appeared without background image and styling.
- The file included under NETWORK header will always require internet connection, this file login.php will never be cached.
- Next, the header FALLBACK includes a line under it which indicates that for all .html files, if they are not accessible because of the disconnection of internet, a offline.html page will be shown instead of them.
- You can update the manifest file by changing the date.
- Put this “developer.manifest” file also on server.
#requires the user to be online.
#offline.html will be served in place of all other .html pages/files.
- So, open “homepage.html” file and add the following in its opening html tag.
- Add the same thing to “info.html” file also.
- So, again open a new notepad++ document and save it as offline.html.
- Write the following in this page:
XHTML1<h1>THIS IS YOUR OFFLINE PAGE</h1>
- Then again save the content.
- This page will look like this:
- When you go to homepage or info webpages, some code is automatically generated in this opened “Developer Tools” window, because these pages are being cached.
- But if you go to other webpages of the website, no code will be generated, because these pages are not been specified in manifest for caching.
- Remember you will be able to see the code in “Developer Tools” window, only if you are accessing your website from a server.
- The homepage and info webpages will still be available for you offline.
- But if you try to open other webpages by clicking on links like “About Us”, ”Contact Us” and “Browse Developers”, you will get offline.html page shown in fig 3.
- Since these pages are not cached, they require internet connection. And we are offline now, so due to lack of internet connection offline.html is shown as a FALLBACK page.
Here, we finished demonstrating an interesting feature of HTML5.