HTML 5 TutorialsApplication Cache Part - 2

Application Cache Part – 2

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.

  1. As usual create a new folder on the desktop with name AppCache Practical.
  2. Copy all the “Blue Developer Directory” project content from the previous folder and paste it in the newly created folder, AppCache Practical.
  3. Now, next step is to open the “homepage.html” page from “AppCache Practical” folder with notepad++ editor.
  4. 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.
  5. <footer>
     Copyright 2014 Blue Developer Directory &nbsp; <a style="color:white;" href="info.html">Info</a>
    </footer>
    
    • Here, a hyperlink info is created with white fore-color.
    • It is shown in the figure below:
    • output_of_hyperlink_info
      fig 1

    • 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.
  6. Let’s create “info.html” page. We are going to have some information in this page, so its structure is same as “about.html” page.
    • 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
      <section>----</section>

      tag, since we want to have some other information.

    • Write the following inside
      <section>-----</section>

      tag:

      <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 adding
      <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:
    • output_of_info_html_page
      fig 2

  7. We finished adding a new page “info.html” in the website. Our website is ready. Now our further task is to cache the homepage.html and info.html pages for the offline use.
    • 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.
  8. Creating .htaccess file:
    • To create a .htaccess file, open a new notepad++ document and write the following line in it:
      AddType 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.
  9. Next we need manifest file. So let’s create manifest file.
    • 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.
    • CACHE MANIFEST
      #2014-03-21
      
      CACHE:
      homepage.html
      info.html
      CSS/style.css
      images/background.png
      
      #requires the user to be online.
      NETWORK:
      login.php
      
      #offline.html will be served in place of all other .html pages/files.
      FALLBACK:
      *.html offline.html
      
    • 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.
  10. Manifest file is ready. Now the next requirement is that, all the files that are to be cached must have the manifest attribute in their html tags.
    • So, open “homepage.html” file and add the following in its opening html tag.
      <html manifest="developer.manifest">
    • Add the same thing to “info.html” file also.
  11. We finished all important things for caching. But still we need to create an offline.html page as the FALLBACK page.
    • So, again open a new notepad++ document and save it as offline.html.
    • Write the following in this page:
      <h1>THIS IS YOUR OFFLINE PAGE</h1>
    • Then again save the content.
    • This page will look like this:
    • output_of_offline_html_page
      fig 3

  12. Here, we finished developing all our files. Now ensure that all the files are placed or uploaded on server.
  13. Now with active internet connection try to open the Blue Developer Directory website on the client PC. All the pages are successfully accessed from the server.
  14. To understand that the pages are being cached, go to the browser settings –> Tools –> Developer Tools. A window will open.
    • 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.
  15. Now disconnect the internet connection and try to browse the website.
    • 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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -