What is a manifest file in HTML5 ?

Last Updated : 27 Mar, 2024

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 webpages containing manifest attributes or specified in the manifest file will be cached whenever a user visits that page.

Understanding the Manifest File

Manifest files are saved with the .appcache extension and always start with the CACHE MANIFEST keyword. They contain three sections: CACHE, NETWORK, and FALLBACK.

1. CACHE:

This section lists all the resources including webpages, CSS stylesheets, JavaScript files, and images that will be cached immediately after their first download. These resources can be used even in offline mode after their first download and don’t require a connection to the server.

Example: Create a file named cache.html and add it to the CACHE section of the demo.appcache file so as to cache it and use it in offline mode. This file will load in offline mode.

HTML

<!DOCTYPE html>
<html manifest="demo.appcache">
  
<body>
    <h1>Welcome to GeeksforGeeks!!</h1>
</body>
  
</html>

2. NETWORK:

This section lists all the resources that will never be cached. These resources can’t be used in offline mode and always require a connection to the server.

Example: Create a file named network.html and add it to the NETWORK section of the demo.appcache file so as to ensure that it is only available in online mode. This file will not load in offline mode.

HTML

<!DOCTYPE html>
<html>
   
<body>
    <h1>Welcome to GeeksforGeeks!!</h1>
    <p>Available only in online mode!</p>
</body>

</html>

3. FALLBACK:

This section lists the fallback resources that will be used in case a page is not accessible. It specifies the primary resource that will be replaced with the fallback resource specified next to it in case of server connection failure.

Example: Create a file named offline.html and add it to the FALLBACK section along with fallback.html in the demo.appcache file. In the offline mode, offline.html will be replaced with fallback.html. Following is the code for offline.html:

HTML

<!DOCTYPE html>
<html>

<body>
    <h1>Welcome to GeeksforGeeks!!</h1>
    <p>You are working in online mode.</p>
</body>

</html>

Following is the code for fallback.html:

HTML

<!DOCTYPE html>
<html>

<body>
    <h1>Welcome to GeeksforGeeks!!</h1>
    <p>You are working in offline mode.</p>
</body>

</html>

Following will be the content of the demo.appcache file:

CACHE MANIFEST

CACHE:
cache.html

NETWORK:
network.html

FALLBACK:
offline.html fallback.html

Now, create index.html to link all the above files.

HTML

<!DOCTYPE html>

<html manifest="demo.appcache">
  
<body>
    <h1>GeeksforGeeks</h1>
    <a href="cache.html">Cached File</a>
    <a href="network.html">Network File</a>
    <a href="offline.html">Fallback File</a>
</body>
</html>