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 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:
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
ASP Application Object
What is an Application? An Application is a group of two or more ASP files that use to work together to perform a particular task is called an Application. Similarly, An ASP-based application is defined as the collection of all .asp files in the directory and the sub-directory. The ASP Application O
2 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
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
What is an Operating System?
An Operating System is a System software that manages all the resources of the computing device. Acts as an interface between the software and different parts of the computer or the computer hardware. Manages the overall resources and operations of the computer. Controls and monitors the execution o
9 min read