What is a manifest file in HTML5 ? (original) (raw)

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 `

Welcome to GeeksforGeeks!!

**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 `

Welcome to GeeksforGeeks!!

Available only in online mode!

**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 `

Welcome to GeeksforGeeks!!

You are working in online mode.

Following is the code for fallback.html:

HTML `

Welcome to GeeksforGeeks!!

You are working in offline mode.

Following will be the content ofthe _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 `

GeeksforGeeks

Cached File Network File Fallback File

**Output:

Manifest file cached output in offline mode