Cache manifest in HTML5
|This article is a candidate to be copied to Wikibooks using the Import process.|
|Internet media type||
|Developed by||World Wide Web Consortium|
The cache manifest in HTML5 is a software storage feature which provides the ability to access a web application even without a network connection.
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 reasons beyond their control. HTML5 provides the ability to access the web application even without a network connection using the cache manifest.
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. The cache manifest file is a text file located in another part of the server. It must be served with the following content type: 
The following line must be added to the html element in order for the cache manifest file to work.
<!DOCTYPE HTML> <html manifest="cache.appcache"> <body> … </body> </html>
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.
<!—- 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>
Given below is a list of some rules and syntax required when writing the manifest file.
CACHE MANIFEST # the above is a required line # this is a comment # spaces are ignored # blank lines are ignored
Given below is an example of a cache manifest file.
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.
- Explicit section with the header CACHE.
- Online whitelist section with the header NETWORK.
- Fallback section with the header FALLBACK.
Note: Example 1 and Example 2 above, do not indicate any section header and are therefore considered an explicit section by default.
Online whitelist section with the header NETWORK
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. As a result an error will occur when an attempt is made offline to load the resource.
Fallback section with the header FALLBACK
The fallback section in a cache manifest file can be used to substitute online resources that cannot be cached or were not cached successfully.
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. If the browser does not find the page in the appcache, the application will display the page /offline.html.
Events are under the
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.
CheckingEvent - occurs when the browser visits a web page and reads the manifest attribute on the <html> element.
DownloadingEvent - if the browser has never come across this manifest file before, it will download all the resources given in the manifest file.
ProgressEvent - contains information of how many files have been downloaded and how many files are left to be downloaded.
CachedEvent - occurs once all the files have been downloaded and the offline web application is equipped to be used offline.
If the browser has visited the web page before and recognizes the manifest file the following events will ensue.
NoupdateEvent - this will take place if the cache manifest has not changed.
DownloadingEvent - if the cache manifest has changed the resources the file will be downloaded again.
ProgressEvent - this contains information of how many files have been downloaded and how many files are left to be downloaded.
UpdatereadyEvent - after the re-downloading is complete, this event is triggered, indicating that the new offline version is ready to be used.
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.
- Page Not Found (HTTP error 404) or Page Permanently Gone (HTTP error 410).
- Failure to download the HTML page that pointed to the manifest.
- The cache manifest changed while the update occurred.
- The cache manifest was changed but the browser did not download a resource in the manifest.
- Bidelman, Eric (29 October 2013). "A Beginner's Guide to Using the Application Cache". Retrieved 23 April 2014.
- Pilgrim, Mark (2010). HTML5 Up and Running. O'Reilley.
- "W3 HTML5 Manifests". HTML5. Retrieved 3 April 2011.
- "Dev.Opera". HTML5. Retrieved 3 April 2011.
- "WHATWG". HTML5. Retrieved 3 April 2011.
- "HTTP Status Codes". Retrieved 3 April 2011.