What is application cache in HTML5?

The application cache (Application Cache or AppCache) in HTML5 allowed browsers to cache resources (HTML, CSS, JavaScript, images) for offline access and improved performance.

The working principle is based on a manifest file (manifest="appcache.manifest") with the .appcache extension, which describes the files to be cached.

Example of a manifest file:

CACHE MANIFEST
# Version 1.0

CACHE:
/index.html
/css/style.css
/js/script.js

FALLBACK:
/ /offline.html

NETWORK:
*

Sections of the manifest file:

CACHE:: Resources that should be explicitly cached.
FALLBACK:: Defines fallback resources that will be used if the resource is unavailable (for example, for offline pages).
- <online-resource> <offline-resource>
NETWORK:: Resources that always require online access (usually * for all other resources).

Usage:

Create a .appcache file.

Add the manifest attribute to the <html> tag:

<!DOCTYPE html>
<html manifest="appcache.manifest">
...
</html>

Configure the MIME type of .appcache on the server as text/cache-manifest.

Despite its functionality, AppCache has drawbacks such as cache update issues, management complexity, and errors. It is deprecated and removed from the HTML5 specification, and its functionality is replaced by Service Workers, which provide a more flexible and powerful mechanism for managing caching and offline functionality.