What is an ‘application cache’ ?
Last Updated :
24 Jul, 2024
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:
- Create a Manifest File
- Create an HTML file and add a manifest attribute tag. example index.html
- 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.
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:
- CACHE MANIFEST: It cached data for the download for the first time.
- NETWORK: It's only available online mode.
- 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:
- Check web server is configured to serve the manifest files or not.
- Upload the cache manifest file.
- 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 HTML5Step 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 HTML5Explanation: 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:
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.
Similar Reads
What is Single Page Application?
A Single Page Application (SPA) is a type of web application that loads and updates content dynamically without refreshing the entire page. Unlike traditional websites, SPAs use modern technologies to enhance the user experience by minimizing interruptions and providing a smoother interface. Users c
5 min read
What is the Application Cache and why it is used in HTML5 ?
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
2 min read
What is Standalone Application?
What Is a Standalone Application? A standalone application, also known as a desktop application is a software program designed in such a way that to run this software program, users don't need an internet connection or any server access. Web-based applications need an internet connection, servers, a
3 min read
What is a Container ?
One of the greatest challenges in software development is ensuring that an app works similarly in a variety of environments. In earlier times, this has been attended to by working through a virtual machine (VM), but it's quite a heavyweight solution. That's when containers came along, as a more ligh
8 min read
What are Cache Locks?
In computer architecture, cache locks play a crucial role as shared data access coordinators in systems with several cores and processors. Cache locks are essential for preserving program accuracy and averting data corruption because they are made to guarantee data consistency and prevent race situa
10 min read
What is Memoization in React ?
Memoization is a powerful optimization technique used in React to improve the performance of applications by caching the results of expensive function calls and returning the cached result when the same inputs occur again. In this article, we will learn more about the concept of memoization and its
6 min read
How to Design a Database for Desktop Applications
Desktop applications remain a crucial part of computing, providing powerful tools and utilities for various tasks, from productivity software to creative applications and business management tools. Behind the functionality of desktop applications lies a well-designed database architecture capable of
4 min read
What is a Distributed Cache?
Distributed caches are crucial tools for enhancing the dependability and speed of applications. By storing frequently accessed data across several servers and closer to the point of demand, distributed caches lower latency and decrease the strain on backend systems. The definition, operation, and im
7 min read
What is DNS Caching
DNS caching is a temporary storage system that keeps records of recent domain name lookups like google.com - 172.217.0.46 to speed up future requests. Instead of querying a DNS server every time you visit a website, your computer or network checks the cache first, reducing load times and improving e
7 min read
What is APPC(Advanced Peer to Peer Communication)?
APPC (Advanced Peer-to-Peer Communication) is an IBM-developed protocol used for communication between two or more programs running on different computers in a network. It is a peer-to-peer protocol that allows applications to exchange data and commands with each other. APPC operates at the session
5 min read