Cache manifest in HTML5

Last updated
Filename extension
.appcache
Internet media type
text/cache-manifest
Developed by World Wide Web Consortium
Standard HTML5
Open format?Yes
Website html.spec.whatwg.org/multipage/browsers.html#offline

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]

Contents

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 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><htmlmanifest="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><htmlmanifest="cache.appcache"><head><title>Test</title><scriptsrc="test.js"></script><linkrel="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.jpghttp://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]

If the browser has visited the web page before and recognizes the manifest file the following events will ensue. [8]

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]

See also

Related Research Articles

<span class="mw-page-title-main">HTML</span> HyperText Markup Language

Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript, a programming language.

An HTML element is a type of HTML document component, one of several types of HTML nodes. The first used version of HTML was written by Tim Berners-Lee in 1993 and there have since been many versions of HTML. The current de facto standard is governed by the industry group WHATWG and is known as the HTML Living Standard.

<span class="mw-page-title-main">Favicon</span> Icon associated with a particular web site

A favicon, also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing one or more small icons associated with a particular website or web page. A web designer can create such an icon and upload it to a website by several means, and graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page's favicon in the browser's address bar and next to the page's name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page's favicon next to the page's title on the tab, and site-specific browsers use the favicon as a desktop icon.

Web standards are the formal, non-proprietary standards and other technical specifications that define and describe aspects of the World Wide Web. In recent years, the term has been more frequently associated with the trend of endorsing a set of standardized best practices for building web sites, and a philosophy of web design and development that includes those methods.

Link prefetching allows web browsers to pre-load resources. This speeds up both the loading and rendering of web pages. Prefetching was first introduced in HTML5.

In computer hypertext, a URI fragment is a string of characters that refers to a resource that is subordinate to another, primary resource. The primary resource is identified by a Uniform Resource Identifier (URI), and the fragment identifier points to the subordinate resource.

<span class="mw-page-title-main">HTML5</span> Fifth and previous version of HyperText Markup Language

HTML5 is a markup language used for structuring and presenting hypertext documents on the World Wide Web. It was the fifth and final major HTML version that is now a retired World Wide Web Consortium (W3C) recommendation. The current specification is known as the HTML Living Standard. It is maintained by the Web Hypertext Application Technology Working Group (WHATWG), a consortium of the major browser vendors.

<span class="mw-page-title-main">Firebug (software)</span> Web development add-on for Firefox

Firebug is a discontinued free and open-source web browser extension for Mozilla Firefox that facilitated the live debugging, editing, and monitoring of any website's CSS, HTML, DOM, XHR, and JavaScript.

In computer programming, a manifest file is a file containing metadata for a group of accompanying files that are part of a set or coherent unit. For example, the files of a computer program may have a manifest describing the name, version number, license and the constituent files of the program. The term "manifest" is borrowed from a cargo shipping procedure, where a ship manifest would list the crew and/or cargo of a vessel.

<span class="mw-page-title-main">Web development tools</span> Software used to test the UI of a website or web application

Web development tools allow web developers to test, modify and debug their websites. They are different from website builders and integrated development environments (IDEs) in that they do not assist in the direct creation of a webpage, rather they are tools used for testing the user interface of a website or web application.

A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of loading entire new pages. The goal is faster transitions that make the website feel more like a native app.

<span class="mw-page-title-main">EPUB</span> E-book format

EPUB is an e-book file format that uses the ".epub" file extension. The term is short for electronic publication and is sometimes stylized as ePUB. EPUB is supported by many e-readers, and compatible software is available for most smartphones, tablets, and computers. EPUB is a technical standard published by the International Digital Publishing Forum (IDPF). It became an official standard of the IDPF in September 2007, superseding the older Open eBook (OEB) standard.

<span class="mw-page-title-main">CSS HTML Validator</span> HTML editor and CSS editor for Windows

CSS HTML Validator is an HTML editor and CSS editor for Windows that helps web developers create syntactically correct and accessible HTML/HTML5, XHTML, and CSS documents by locating errors, potential problems like browser compatibility issues, and common mistakes. It is also able to check links, check spelling, suggest improvements, alert developers to deprecated, obsolete, or proprietary tags, attributes, and CSS properties, and find issues that can affect search engine optimization.

Web performance refers to the speed in which web pages are downloaded and displayed on the user's web browser. Web performance optimization (WPO), or website optimization is the field of knowledge about increasing web performance.

Modernizr is a JavaScript library that detects the features available in a user's browser. This lets web pages avoid unsupported features by informing the user their browser is not supported or loading a polyfill. Modernizr aims to provide feature detection in a consistent and easy to use manner that discourages the use of failure-prone browser sniffing.

<span class="mw-page-title-main">Sencha Touch</span> JavaScript framework

Sencha Touch is a user interface (UI) JavaScript library, or web framework, specifically built for the Mobile Web. It can be used by Web developers to develop user interfaces for mobile web applications that look and feel like native applications on supported mobile devices. It is based on web standards such as HTML5, CSS3 and JavaScript. The goal of Sencha Touch is to facilitate quick and easy development of HTML5 based mobile apps which run on Android, iOS, Windows, Tizen and BlackBerry devices, simultaneously allowing a native look and feel to the apps.

jQuery Mobile is a touch-optimized web framework, specifically a JavaScript library, developed by the jQuery project team. The development focuses on creating a framework compatible with many smartphones and tablet computers, made necessary by the growing but heterogeneous tablet and smartphone market. The jQuery Mobile framework is consistent with other mobile app frameworks and platforms such as PhoneGap, Worklight, etc.

Content Security Policy (CSP) is a computer security standard introduced to prevent cross-site scripting (XSS), clickjacking and other code injection attacks resulting from execution of malicious content in the trusted web page context. It is a Candidate Recommendation of the W3C working group on Web Application Security, widely supported by modern web browsers. CSP provides a standard method for website owners to declare approved origins of content that browsers should be allowed to load on that website—covered types are JavaScript, CSS, HTML frames, web workers, fonts, images, embeddable objects such as Java applets, ActiveX, audio and video files, and other HTML5 features.

Front-end web development is the development of the graphical user interface of a website through the use of HTML, CSS, and JavaScript so users can view and interact with that website.

Web Components are a set of features that provide a standard component model for the web allowing for encapsulation and interoperability of individual HTML elements. Web Components are a popular approach when building microfrontends.

References

  1. ↑ "Application cache as part of the W3C Recommendation". 28 October 2014. Retrieved 30 May 2016.
  2. ↑ "Using the application cache - HTML: HyperText Markup Language | MDN". developer.mozilla.org. Archived from the original on 2019-02-15. Retrieved 2021-04-11.
  3. ↑ "Preparing for AppCache removal". web.dev. Archived from the original on 2020-05-20. Retrieved 2021-09-02.
  4. ↑ "Window.applicationCache". MDN Web Docs. Mozilla. Archived from the original on 2023-05-02. Retrieved 2020-12-29.
  5. ↑ "Web Application Manifest". www.w3.org. Retrieved 2023-04-09.
  6. ↑ Bidelman, Eric (29 October 2013). "A Beginner's Guide to Using the Application Cache" . Retrieved 23 April 2014.
  7. 1 2 3 4 5 6 7 8 9 10 Pilgrim, Mark (2010). HTML5 Up and Running. O'Reilley. Archived from the original on 2011-10-03. Retrieved 2018-11-16.
  8. 1 2 3 4 "W3 HTML5 Manifests". HTML5. Archived from the original on 24 December 2010. Retrieved 3 April 2011.
  9. 1 2 "Dev.Opera". HTML5. Retrieved 3 April 2011.
  10. ↑ "WHATWG". HTML5. Archived from the original on 14 April 2011. Retrieved 3 April 2011.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.