The manifest attribute of the html tag sets the URL of the document with the location of the manifest file. It stores data about the resources that need to be loaded into the cache to be able to work offline.
The HTML5 specification includes an application cache – the ability for a web application to work without an internet connection. The first time a web page or application is opened, data is loaded and saved for further work and the ability to display it offline.
The manifest attribute value is determined by specifying an absolute or relative path to the manifest text file.
<html manifest="URL address">
| URL | Absolute – “https://www.site.com/user/inc/work.cache” |
| Relative – “/user/inc/work.cache” |
The manifest is represented as an ordinary text file in the form of a list of resources that must be cached by the browser for offline work of the application.
CACHE MANIFEST
# 2021-10-01:v5
# Resource Caching
index.html
css/style.css
# Caching 'master data'
CACHE:
/favicon.ico
images/logo.png
scripts/main.js
# Resources that require the user to be online
NETWORK:
login.php
/myapi
http://api.telegram.com
# static-page.html will be served if main.com is unavailable
# offline.png will be served in place of all images in images /
# offline-page.html will be served in place of all other .html files
FALLBACK:
/main.com /static-page.html
images/offline.png
*.html /offline-page.html
Using a cache allows you to take advantage of:
- Offline operation – the ability to use the application without an internet connection.
- Speed – more fast loading resources with cache.
- Reducing server load – only new or changed content will be loaded in the browser.
This attribute (manifest) must be written on those pages of the web-application that need to be cached.
<!DOCTYPE html>
<html manifest="/user/inc/work.cache"> <!-- The address of the manifest with a list of resources that should be cached -->
<head>
<meta charset="utf-8">
<title>Page</title>
</head>
<body>
<div class="n1234">
<h1>Page</h1>
<canvas id="app" width="500" height="500">
<img src="images/num.png" alt="">
</canvas>
<p>Content</p>
<h3>Application description</h3>
<p>Text</p>
<p>Features</p>
</div>
</body>
</html>
You need to understand what data you are caching. After loading a file into the cache, the browser will show the cached data, even if it is changed on the server. To update it in the browser (cache) you need to change the manifest file itself.
The cache can be reloaded by the following changes:
- Updating the cache programmatically.
- Making changes to the manifest file.
- Clearing the cache by the user.
- Filling the allocated memory for the application on the user’s device.
Also different browsers may have their own limitations on the size of the cached data.
The manifest attribute appeared only in HTML5, previous versions do not support it.