Атрибут manifest для тега html

Атрибут 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, предыдущие версии его не поддерживают.

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *