The cache manifest in HTML5 was a software storage feature which provided the ability to access a web application even without a network connection. It became part of the W3C Recommendation on 28 October 2014.[1]
Since 2021, this technology is no longer widely available. It was removed from Firefox 85,[2] and disabled by default in Chrome 84 and removed in Chrome 95.[3] Using any of the offline Web application features at this time is highly discouraged and use of service workers is recommended instead.[4] Cache manifests are distinct from web application manifests, a JSON-based file format which is part of the progressive web app technology, and as of 2023[update] is currently active and going through the standardization process at the W3C.[5]
Web applications consist of web pages that need to be downloaded from a network. For this to happen there must be a network connection. However, there are many instances when users cannot connect to a network due to circumstances beyond their control. HTML5 provides the ability to access the web application even without a network connection using the cache manifest.
Web applications consist of resources identified by URLs. These can be HTML, CSS, JavaScript, images or any other source that is required for a web application to be rendered. Their addresses can be copied into a manifest file, which can be updated regularly by the author of the web application, indicating any new web addresses that are added or deleted. When connecting to a network for the first time, a web browser will read the HTML5 manifest file, download the resources given and store them locally. Then, in the absence of a network connection, the web browser will shift to the local copies instead and render the web application offline.
In order for the offline applications to work, a cache manifest file must be created by the web developer. If the web application exceeds more than one page then each page must have a manifest attribute that points to the cache manifest. Every page referencing the manifest will be stored locally.[6] The cache manifest file is a text file located in another part of the server. It must be served with content type text/cache-manifest[7]
text/cache-manifest
The attribute manifest="<path>" must be added to the html element in order for the cache manifest file to work.[7] Example:
manifest="<path>"
<!DOCTYPE HTML> <html manifest="cache.appcache"> <body> … </body> </html>
The argument to the manifest attribute is a relative or absolute path to the manifest file.
Consider the HTML file given below. The <html> element indicates a file named cache.appcache will contain the list of resources (i.e., test.js, test.css) needed for this web page to work offline. Common names for this file are cache.manifest and manifest.appcache.
<html>
<!—- test.html --> <!DOCTYPE HTML> <html manifest="cache.appcache"> <head> <title>Test</title> <script src="test.js"></script> <link rel="stylesheet" href="test.css"> </head> <body> Testing the manifest file. </body> </html>
The manifest file must start with the line CACHE MANIFEST. Comments start with a #, spaces and blank lines are ignored.[8]
CACHE MANIFEST
#
Given below is an example of a cache manifest file.
Example 1:
CACHE MANIFEST /test.css /test.js /test.png
This manifest file lists three resources: a CSS file, a JavaScript file and a PNG image. When the above file is loaded, the browser will download the test.css, test.js and test.png files from the root directory in the web server.[7] As a result, whenever one's network is not connected, the resources will be available to them offline.
Cache manifests can also use relative paths or even absolute URLs as shown below.[8][9][10]
Example 2:
CACHE MANIFEST /main/features.js /main/settings/index.css http://files/images/scene.jpg http://files/images/world.jpg
The cache manifest file consists of three section headers.[7]
Note: Example 1 and Example 2 above, do not indicate any section header and are therefore considered an explicit section by default.
Example 3:
CACHE MANIFEST NETWORK: /checking.cgi CACHE: /test.css /test.js /test.png
This example consists of headers. The line, NETWORK: is the start of the "online whitelist" section. The resources listed under this section are never cached and are not available offline.[7] As a result, an error will occur when an attempt is made offline to load the resource.
There is a shift to the explicit section by the header CACHE: and the resources (the CSS stylesheet, JavaScript and the image file) can be downloaded and used offline.
The fallback section in a cache manifest file can be used to substitute online resources that cannot be cached or were not cached successfully.[7]
Example 4:
CACHE MANIFEST FALLBACK: / /offline.html NETWORK: …
In Example 4, the fallback section consists of a single line. i.e., / /offline.html. The single character (/) before ‘offline’ will match any URL pattern on one's site.[7] If the browser does not find the page in the appcache, the application will display the page /offline.html.
Events are under the ApplicationCache JavaScript object.
ApplicationCache
If the browser visits a web page, has NOT seen the web page before and as a result does not recognize the manifest file, the following events will ensue.[8]
Checking
Downloading
Progress
Cached
If the browser has visited the web page before and recognizes the manifest file the following events will ensue.[8]
Noupdate
Updateready
If an error occurs at any instance in the above events, the browser will trigger an error event and stop the process. Given below are a few errors that can occur when re-downloading resources.[9]