The task is to learn about the application cache in HTML5. HTML stands for HyperText Markup Language and it is used to design web pages using a markup language. HTML5 is current or we can also say that it’s the 5th version of HTML.
Application Cache in HTML5: The current version of HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection. Now we can make an offline web application that will run without an internet connection by just creating a manifest file in our application.
Syntax:
<html manifest="demo.appcache">
Structure of HTML file: HTML is nothing but just an element tag that comes after the doctype tag in HTML structure.
<!DOCTYPE html> <html>
<!-- In this element we will add an attribute
called manifest attribute-->
<head>
<title>Page Title</title>
</head>
<body>
<h2>Welcome To GFG</h2>
<p>It is a paragraph element</p>
</body>
</html>
|
Let us understand the concept of application cache with the help of an example.
Approach:
- Create an HTML file with the manifest attribute.
- Create another HTML file then link it to the previously created HTML file.
Example: The name of the main file is “index.html”. First, the main file will execute and when you try to open the linked page the next page will run. After that, you just have to go offline and reload the page. the content of the page will still work fine.
<!DOCTYPE html> <html manifest="demo.appcache">
<body>
Welcome to GeeksForGeeks.
<p>
Try opening <a href="index2.html">this page</a>,
then go offline, and reload the page. The content
should still work.
</p>
</body>
</html>
|
<!DOCTYPE html> <html manifest="demo.appcache">
<body>
Welcome to GFG, a computer science portal for geeks.
</body>
</html>
|
Output:
Uses of the application cache are:
- Offline browsing: The users can use the application whenever they want to access the site when they’re offline
- Speed: When the data is already stored then it is easy to access data with the greater speed, cached resources load faster than uncached resources.
- Reduced server load: The browser will only download updated resources from the server.
Supported browsers:
- Chrome 4.0 and above
- Internet 10.0 and above
- Mozilla Firefox 3.5 and above
- Opera 11.5 and above
- Safari 4.0