☰

After going through the previous chapter you may have familiar with web sotrage, which can be used for store the data on local browser. Now in this chapter we will learn about the Application Cache.

HTML5 Application Cache

HTML5 Application Cache: What is it?

Html5 Application Cache is a feature of HTML5, which stores the website data in a cached version and the website can be accessible without any net connectivity.

It can be very useful, when someone wants to store the website on their local system. The following advantages a user can have, if a user chooses HTML5 Application Cache.

  • Offline Browsing (This can be useful, when you have not internet connection you still can browse the website.)
  • Speed (Since the all data has been saved in cache version, so speed performance will be better)
  • Reduce Server Load (In this case browser only downloads the updated data on the server, so it can reduce loading on server for downloading entire website)

HTML5 Application Cache: Browser Support

Although the entire major browser supports HTML5 Application Cache, but you need to update your browser, because the lower version of browser will not support HTML5 Application Cache. As an Example Internet Explorer 10+ version only supports this feature.

Supported Browser
html5 tutorial html5 tutorial html5 tutorial html5 tutorial html5 tutorial

HTML5 Application Cache: Example

To make your webpage for offline browsing, you need to declare a cache manifest. In the below example you will see a syntax for making it offline.

<!DOCTYPE HTML>
<html manifest="demo.appcache">

 <body>
  The content of the document......
 </body>

</html>

Download

HTML5 Application Example: Explanation

In the above example you may have seen a new line of code <html manifest="demo.appcache">. This line of code is used to enable the application cache on the browser.

In this line you may have also noticed about a word Manifest. Let’s go through some basic facts of Manifest also.

HTML5 Manifest: The Basics

For caching the web page, it is mandatory to declare the manifest with html element on every and each page. A particular webpage can’t be cached until we don’t declare the manifest file.

The recommend file extension for a manifest file is appcache.

The manifest file also needs to configure with the correct MIME-type, which must be configured well on the web server. The format may has follows: text/cache-manifest

HTML5 Manifest: What is it?

It’s a simple text file, which tells the browser for particular cache processing. In details we can say it sends a command to browser for specific file type to be stored in the cache.

We can also send a denying command, if we have to tell the browser that a specific file shouldn’t be store in the cache.

HTML5 Manifest: The Types

The Manifest file has been defined in three particular types. You can also say a Manifest file can contain three sections in it. Here are the details of three sections or types:

  • Cache Manifest
  • Network
  • Fallback

Cache Manifest

The files listed under this category only will be cached after they are downloaded for first time. To declare the cache manifest type, you need to write CACHE MANIFEST at the first line of the page.

Cache Manifest: Syntax

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

In the above demonstrated syntax, there are three types of file have been declared: CSS file, GIF file and JS file. When the user will use the internet connection for the first time, these three files will be download. And once the download is finished, the user can access these files, even when no internet connections.

Network

The files listed under this category will always require an internet connection. Without the internet connection these files will not be served.

Often we have seen that we include some PHP files or other resources to get access in the database. To do this such event, we authorize the user with login system. In the section of Manifest type, we can prevent the user for accessing the particular file as cached version.

Network: Syntax

NETWORK:
login.php

Instead of declaring a specific file, we can also use an asterisk sign to prevent all resources to be cached. And user must have an internet connection to get access.

Fallback

This section of Manifest can be used if we want to serve a specific file in case of no internet connection. In this process we create a specific file and set it in the fallback. Once the user is offline or not able to access the internet connection. The specified file will be served.

Fallback: Syntax

FALLBACK:
/html/ /offline_backup.html

HTML5 Application Cache: Conclusion

This seems good if someone has issue with internet connection, but be careful what you cache. Once the browser cache the file, the user will continue seeing the cached version until you don’t change your updates with program or the user doesn’t clear the cache of the browser.


HTML5 Elements — Quick References