Атрибут manifest тега <html> устанавливает адрес URL документа с расположением файла манифеста. В нем хранятся данные о ресурсах, которые необходимо загрузить в кэш для возможности автономного режима работы.
В спецификациях HTML5 заложен кэш приложений – возможность работы web-приложения без интернет соединения. При первом открытии web-страницы или приложения происходит загрузка и сохранение данных, необходимых для дальнейшей работы и возможности отображения офлайн.
Значение атрибута manifest определяется указанием абсолютного или относительного пути к текстовому файлу манифеста.
<html manifest="URL адрес">
| URL | Абсолютный – “https://www.site.com/user/inc/work.cache” |
| Относительный – “/user/inc/work.cache” |
Манифест представляется обычным текстовым файлом в виде списка ресурсов, которые необходимо кэшировать браузеру для возможности автономной работы приложения.
CACHE MANIFEST
# 2021-10-01:v5
# Кэширование ресурсов
index.html
css/style.css
# Кеширование 'основные данные'
CACHE:
/favicon.ico
images/logo.png
scripts/main.js
# Ресурсы, требующие, чтобы пользователь был в сети
NETWORK:
login.php
/myapi
http://api.telegram.com
# static-page.html будет обслуживаться, если main.com недоступен
# offline.png будет использоваться вместо всех изображений в images /
# offline-page.html будет обслуживаться вместо всех остальных файлов .html
FALLBACK:
/main.com /static-page.html
images/offline.png
*.html /offline-page.html
Использование кэша позволяет воспользоваться преимуществами:
- Работа в автономном режиме – возможность использования приложения без интернет соединения.
- Скорость – более быстрая загрузка ресурсов с кэшем.
- Понижение нагрузки на сервер – в браузере будет загружаться лишь новый или измененный контент.
Атрибут (manifest) должен быть прописан на тех страницах web-приложения, которые необходимо кешировать.
<!DOCTYPE html>
<html manifest="/user/inc/work.cache"> <!-- адрес манифеста с перечнем ресурсов, которые должны кэшироваться -->
<head>
<meta charset="utf-8">
<title>Страница</title>
</head>
<body>
<div class="n1234">
<h1>Страница</h1>
<canvas id="app" width="500" height="500">
<img src="images/num.png" alt="">
</canvas>
<p>Контент</p>
<h3>Описание приложения</h3>
<p>Текст</p>
<p>Особенности</p>
</div>
</body>
</html>
Необходимо понимать какие данные вы кэшируете. После загрузки файла в кэш, браузер будет показывать кэшированные данные, даже в случае их изменения на сервере. Для его обновления в браузере (кэша) необходимо изменение самого файла манифеста.
Перезагрузка кеша может происходить при следующих изменениях:
- Обновление кэша программно.
- Внесение изменений в файл манифеста.
- Очистка кэша пользователем.
- Заполнение выделенной памяти для приложения на устройстве пользователя.
Также у разных браузеров могут быть свои ограничения размера кэшированных данных.
Атрибут manifest появился только в HTML5, предыдущие версии его не поддерживают.