Open In App

What is an ‘application cache’ ?

Improve
Improve
Like Article
Like
Save
Share
Report

Web applications must be accessible without an internet connection. Almost all web-based applications work in online mode. So current version of HTML provides the functionality to work with the web-based application in online and offline modes.  HTML5 provides application cache functionality that allows a web application to run without the internet.

Before understanding Application Cache, let’s understand what is HTML:

HTML stands for hypertext markup language (HTML) for developing web-based applications and websites. The new version of HTML provides different functionality with Internet technologies. It also supports video and audio while HTML doesn’t support it.

Application Cache in HTML5: HTML5 provides application cache functionality that allows a web application to run without the internet. By using the application cache interface, Internet Browser cache data and make it available for the user in offline mode. Create an offline web application, it uses a manifest file.

Syntax:

<html manifest=”file_name  extension_of_file”>

Implementation: Create an HTML file. Then add the manifest attribute in the document tag of the HTML file. The manifest file contains the extension.appcache.

<html manifest="demo.appcache">

How to use Application Cache?

Let us understand how to use Application Cache with the help of the approach.

Approach: 

  1. Create a Manifest File
  2. Create an HTML file and add a manifest attribute tag. example index.html
  3. Create another HTML file and link this with the main HTML file.

Step 1: Create a Manifest File: A manifest is a file that suggests to the browsers which data to store as cache. This file starts with CACHE MANIFEST. Here, ‘#’ shows a comment.

  • Manifest file

HTML




CACHE MANIFEST
CACHE:
# shows pages
index.html
# contain style and scripts
css/theme.css
js/jquery.min.js
js/default.js
# shows images
/favicon.ico
images/logo.png
# network session
NETWORK:
login.php
FALLBACK:
//offline.html


Properties: The manifest file contains three different sections:

  1. CACHE MANIFEST: It cached data for the download for the first time.
  2. NETWORK: It’s only available online mode.
  3. FALLBACK: File under fallback pages if a page is not available.

Step 2: Add Manifest Attribute in HTML file: Before adding Cache Manifest File in HTML check the following things:

  1. Check web server is configured to serve the manifest files or not.
  2. Upload the cache manifest file.
  3. Add a manifest attribute to the HTML file. 

Now let us take an example and understand with help of him. 

Example: Follow the below steps:

Step 1: Create a file save as index.html and add a manifest attribute in the HTML tag.

HTML




<!DOCTYPE html>
<html manifest="demo.appcache">
 
<body text="red">
    <center>
        Application Cache In HTML 5.
         
 
<p>
            <a href="page.html">Click Here</a>,
            This page contain data even offline mode .
        </p>
 
 
</body>
 
</html>


Output:

Application cache in HTML5

Step 2: Now, Create another HTML file and save it as page.html.

HTML




<!DOCTYPE html>
<html manifest="demo.appcache">
 
<body text="green">
    <h3>
        <center>
            Welcome to GeeksForGeeks.
             
 
<p>A computer science portal for geeks. </p>
 
 
             
 
<p>Go Offline and refresh page. </p>
 
 
        </center>
    </h3>
</body>
 
</html>


Application cache in HTML5

Explanation: Main HTML file (index.html) contain link of next page. When the user clicks on that link next page will execute. The main file contains a manifest attribute so even if the user went offline and he refreshes the page it will show the content of that page. This all works because of the application cache.

Output:

Application cache in HTML5

Advantage:

  • Offline Mode: Users can use applications without the internet or offline.
  • Less Space: Web pages are already cached so they occupy less space.
  • Increase Speed: Web pages contain cached data. cached data are local so they load fast 
  • Reduced server load: The web browser will only download data if it is updated on the server. It also decreases HTTP requests.
  • Modern browser: The HTML 5 feature Cache feature is available in all modern web browsers.

Disadvantage:

  • Old browser: Not available in an older version of HTML.


Last Updated : 08 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads