Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • Build your AI Agent
    • GfG 160
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • Contests
    • Accenture Hackathon (Ending Soon!)
    • GfG Weekly [Rated Contest]
    • Job-A-Thon Hiring Challenge
    • All Contests and Events
  • HTML Tutorial
  • HTML Exercises
  • HTML Tags
  • HTML Attributes
  • Global Attributes
  • Event Attributes
  • HTML Interview Questions
  • HTML DOM
  • DOM Audio/Video
  • HTML 5
  • HTML Examples
  • Color Picker
  • A to Z Guide
  • HTML Formatter
Open In App
Next Article:
How to Cache Ejs and Built the Progressive Web Application with Nodejs?
Next article icon

What is the Application Cache and why it is used in HTML5 ?

Last Updated : 18 Aug, 2021
Comments
Improve
Suggest changes
Like Article
Like
Report

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. 

  HTML 
<!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.

HTML 
<!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>
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

Next Article
How to Cache Ejs and Built the Progressive Web Application with Nodejs?

A
abhishekpal97854368
Improve
Article Tags :
  • Web Technologies
  • HTML
  • HTML5
  • HTML-Questions

Similar Reads

  • What is an ‘application cache’ ?
    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 al
    3 min read
  • What is EJS and why do I need it?
    In web development, there are many tools available for developers to choose from. Choosing the right tools and technologies can have a significant impact on the efficiency and functionality of projects. One of the popular tools in web development is EJS, which stands for Embedded JavaScript. EJS is
    4 min read
  • What is the use of <canvas> Tag in HTML ?
    HTML <canvas> Tag allows you to create graphics, animations, and interactive content directly on a web page using JavaScript. It provides a drawing surface where you can use various JavaScript functions to create dynamic and visually appealing content. Here are key aspects of the <canvas
    1 min read
  • How to Cache Ejs and Built the Progressive Web Application with Nodejs?
    To cache EJS (Embedded JavaScript) templates and build a Progressive Web Application (PWA) with Node.js, we need to leverage several key technologies. Caching EJS templates can significantly enhance performance by reducing the need to recompile templates on each request. we'll learn how to cache EJS
    4 min read
  • What are template engines in Express, and why are they used?
    A Template Engine simplifies the use of static templates with minimal code. During runtime on the client side, variables in the template are replaced with actual values. These engines help developers create templates for web pages, written in a markup language with placeholders for dynamic content.
    4 min read
  • What is SPA (Single page application) in AngularJS ?
    Traditionally, applications were Multi-Page Applications (MPA) where with every click a new page would be loaded from the server. This was not only time-consuming but also increased the server load and made the website slower. AngularJS is a JavaScript-based front-end web framework based on bidirect
    5 min read
  • What Does it Mean When jquery.ajax({ cache: false }) is Used?
    When cache: false is specified in a jQuery.ajax call, it ensures that the browser does not use cached results for the AJAX request. This is useful for preventing outdated data from being fetched, particularly when making GET requests. Why Use cache: false?By default, browsers cache GET requests to i
    2 min read
  • What is a manifest file in HTML5 ?
    HTML5 introduces a powerful feature known as the manifest file. Manifest is a text file that instructs the browser to cache specific files or webpages, enabling them to be used even when offline. The HTML5 cache webpages are specified using the manifest attribute in the <html> tag. All webpage
    3 min read
  • Explain the benefits and limitations of SSR in Redux applications.
    SSR in Redux applications means rendering React components on the server side instead of the client's browser. This helps to speed up initial page loads and ensures that search engines can better understand and index your content. With SSR, users get a faster and more seamless experience when access
    2 min read
  • 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
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences