Cache manifest in HTML5

Filename extension| `.appcache`

|

Internet media type| `text/cache-manifest`
Developed by| World Wide Web Consortium
Standard| HTML5
Website| html.spec.whatwg.org/multipage/browsers.html#offline

The cache manifest in HTML5 is an obsolete web browser 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]

Web pages could specify static cache manifests listing all resources used by the page. The browser could download every resource in advance and store it for offline use. In practice, the simple and rigid declarative nature of the format worked well only for very simple pages, falling apart for many interactive websites. In response to this demand, Google Chrome 40 introduced Service Worker API which allows websites to create programmable caches aware of the specifics of its main application logic. Shortly after introduction or Service Workers, browsers deprecated cache manifests. Since 2021, cache manifests are no longer widely available. Browser vendors recommend using service workers instead.[2]

Cache manifests are distinct from web application manifests, a different technology which aims to improve discoverability of progressive web apps and associated metadata.

## Contents

* 1 Overview
* 2 Background
* 3 Basics
* 4 Syntax
* 5 File headers
* 5.1 Online whitelist section with the header NETWORK
* 5.2 Fallback section with the header FALLBACK
* 6 Event flow
* 7 See also
* 8 References
* 9 External links

## Overview

Cache manifests enabled web pages to statically declare all resources used by the page. The browser could download every resource in advance and store it for offline use. In practice, the simple and rigid declarative nature of the format worked well only for very simple pages. Many interactive websites and single page required a dynamic, programmable storage logic. In response to this demand, Google Chrome 40 introduced Service Worker API which allows websites to register a script which runs in the user's browser and functions like a proxy (or a middleman) between the visible page and the network. Such Service Workers provide a programmable cache aware of the specifics of its main application logic, has access to information about user's current network connection and can support explicit invocations by the user. Shortly after introduction or Service Workers, browsers deprecated cache manifests.[2]

Since 2021, this technology is no longer widely available. It was removed from Firefox 85,[3] and disabled by default in Chrome 84 and removed in Chrome 95.[4] Using any of the offline Web application features at this time is highly discouraged and use of service workers is recommended instead.[2] 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 2026[update] is currently active and going through the standardization process at the W3C.[5]

## Background

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.

## Basics

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]

The attribute `manifest="<path>"` must be added to the html element in order for the cache manifest file to work.[7] Example:

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

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

## Syntax

The manifest file must start with the line `CACHE MANIFEST`. Comments start with a `#`, spaces and blank lines are ignored.[8]

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

## File headers

The cache manifest file consists of three section headers.[7]

1. Explicit section with the header CACHE.
2. Online whitelist section with the header NETWORK.
3. 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

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.

### 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.[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.

## Event flow

Events are under the `ApplicationCache` JavaScript object.

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` Event - occurs when the browser visits a web page and reads the manifest attribute on the `<html>` element.
* `Downloading` Event - it will download all the resources given in the manifest file.
* `Progress` Event - contains information of how many files have been downloaded and how many files are left to be downloaded.
* `Cached` Event - 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.[8]

* `Noupdate` Event - this will take place if the cache manifest has not changed.
* `Downloading` Event - if the cache manifest has changed the resources the files will be downloaded again.
* `Progress` Event - this contains information of how many files have been downloaded and how many files are left to be downloaded.
* `Updateready` Event - 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.[9]

* Page Not Found (HTTP error 404) or Page Permanently Gone (HTTP error 410).
* Failure to download the HTML page that pointed to the manifest.[7]
* The cache manifest changed while the update occurred.[7]
* The cache manifest was changed but the browser did not download a resource in the manifest.[7]

## See also

* HTML5
* Offline reader
* Web cache

## References

1. ↑ "Application cache as part of the W3C Recommendation". 28 October 2014. https://www.w3.org/TR/html5/browsers.html#appcache. Retrieved 30 May 2016.
2. ↑ 2.0 2.1 2.2 "Window.applicationCache". MDN Web Docs. Mozilla. https://developer.mozilla.org/en-US/docs/Web/API/Window/applicationCache.
3. ↑ "Using the application cache - HTML: HyperText Markup Language | MDN". https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache#browser_compatibility.
4. ↑ "Preparing for AppCache removal" (in en). https://web.dev/appcache-removal/.
5. ↑ "Web Application Manifest". https://www.w3.org/TR/appmanifest/Overview.html.
6. ↑ Bidelman, Eric (29 October 2013). "A Beginner's Guide to Using the Application Cache". http://www.html5rocks.com/en/tutorials/appcache/beginner/. Retrieved 23 April 2014.
7. ↑ 7.00 7.01 7.02 7.03 7.04 7.05 7.06 7.07 7.08 7.09 Pilgrim, Mark (2010). HTML5 Up and Running. O'Reilley. http://diveintohtml5.org. Retrieved 2018-11-16.
8. ↑ 8.0 8.1 8.2 8.3 "W3 HTML5 Manifests". HTML5. http://dev.w3.org/html5/pf-summary/offline.html#manifests. Retrieved 3 April 2011.
9. ↑ 9.0 9.1 "Dev.Opera". HTML5. http://dev.opera.com/articles/view/offline-applications-html5-appcache/. Retrieved 3 April 2011.
10. ↑ "WHATWG". HTML5. http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline. Retrieved 3 April 2011.

## External links

* Using the application cache - HTML | MDN
* HTML5: Offline Application Caching
* HTML5 Rocks
* Alistapart: Application Cache

0.00

(0 votes)

Original source: https://en.wikipedia.org/wiki/Cache manifest in HTML5. Read more

|

Retrieved from "https://handwiki.org/wiki/index.php?title=Cache_manifest_in_HTML5&oldid=4409778"