Атрибут manifest в HTML


Содержание

/ Атрибут manifest

Описание

Атрибут manifest реализует механизм кэширования, который позволяет создавать оффлайновые приложения, т.е. работающие в автономном режиме без непосредственного подключения к Интернету. При первой загрузке страницы браузер обычно просит сохранить данные для своей работы, а затем уже обращается к ним при необходимости.

В качестве значения атрибута manifest указывается относительный или абсолютный путь к текстовому файлу, он называется «файл манифеста» или просто «манифест». Имя и расположение файла может быть любым, но он должен отдаваться сервером с заголовком text/cache-manifest . Например, для веб-сервера Apache в файле .htaccess расположенным в корне сайта следует прописать такую строку.

В этом случае файл манифеста имеет расширение cache. Сам манифест информирует браузер о том, какие ресурсы необходимо сохранить в локальном кэше. Этот список может содержать HTML и CSS-файлы, изображения, скрипты. Имена файлов перечисляются внутри секций описанных в табл. 1.

Табл. 1. Разделы манифеста

Раздел Описание
CACHE MANIFEST Этой обязательной строкой должен начинаться любой манифест.
CACHE: Содержит перечень ресурсов, которые браузер должен кэшировать. Данный раздел используется по умолчанию, если его не указать и нет других разделов, то записи в манифесте причисляются к этому разделу.
NETWORK: Список ресурсов, которые доступны только при подключении к сети. Обычно в этот раздел входят программы выполняемые на стороне сервера.
FALLBACK: Список замещающих файлов, которые будут использоваться при отсутствии подключения к сети. Допустимо использовать символ * для обозначения всех файлов. Например, *.php /offline.html означает, что вместо любого файла с расширением php будет показана страница offline.html.

Синтаксис

Значения

В качестве значения указывается адрес файла манифеста .

Значение по умолчанию

Пример 1. Использование манифеста

Содержимое файла 22.cache показано в примере 2.

Файл manifest

Работа оффлайнового веб приложения основывается на сохраненном файле manifest. Как я уже упоминал, файл manifest — это список ресурсов, которые необходимы приложению, чтобы работать автономно. Чтобы запустить процесс загрузки этих ресурсов нужно указать на месторасположение файла-списка необходимых файлов. Для этого предназначен атрибут manifest элемента :

Сохранить файл minfest можно где угодно на веб сервере, но файл должен быть передан с content-type text/cache-manifest. Если используется сервер Apache, можно просто добавить следующие директивы в файл .htaccess, который расположен в корневой директории:

AddType text/cache-manifest .manifest

Имя файла manifest должно заканчиваться .manifest. Если используется другая конфигурация Apache, следует проконсультироваться у службы техподдержки, как настроить нужный content-type.

В: Мое веб приложение состоит из нескольких страниц. Следует ли указывать путь к manifest на каждой странице?

О: Каждая страница веб приложения должна указывать на этот файл.

Итак, все страницы приложения ссылаются на файл manifest, сервер отдает его с правильным Content-type, но что же происходит в самом файле manifest? Тут становится интересней.

Первая строка любого manifest файла выглядит так:

Далее идет список загружаемых файлов. Этот список может быть разделен на три части: явный (explicit) раздел, резервный (fallback) и онлайновый белый список. Каждый раздел имеет свой заголовок. Если в файле manifest отсутствуют заголовки, все перечисленные ресурсы относятся к явному разделу. Зациклиться на терминологии не стоит, дабы мозг не вскипел.

Пример реального manifest файла — список из трех файлов: CSS, Javascript и jpeg.

CACHE MANIFEST
/clock.css
/clock.js
/clock-face.jpg

В данном файле отсутствуют заголовки, поэтому все ресурсы относятся к явному разделу. Файлы из этого раздела будут загружены, а затем сохранены локально и, в то время пока отсутствует подключение к сети, будут использоваться вместо своих онлайновых аналогов. Таким образом, вышеприведенный manifest сообщит браузеру, что следует загрузить clock.css, clock.js и clock-face.jpg из корневой директории сервера и сохранить локально. После их загрузки, можно отсоединиться от сети и обновить страницу — теперь она будет работать автономно.

В: нужно ли мне перечислять HTML страницы в файле manifest?

О: И да, и нет. Если все веб приложение содержится в одной странице, следует просто убедиться, что у нее имеется атрибут manifest. В этом случае при отключении сети, эта страница будет доступна оффлайн. Если же приложение состоит из нескольких HTML страниц, то их следует перечислять в файле manifest, иначе браузер не будет знать об их существовании и не сохранит их локально.

HTML HTML атрибут манифеста

примеров

HTML-документ с манифеста кэша (для автономного просмотра):

Поддержка браузеров

Internet Explorer 10, Firefox, Opera, Chrome и Safari поддерживают атрибут манифеста.

Примечание: 9 и более ранние версии Internet Explorer не поддерживает атрибут манифеста.

Определение и использование

манифест кэша манифест атрибут определяет местоположение документа.

HTML5 вводит кэша приложений, который означает, что веб-приложения могут быть в кэше, а затем при отсутствии подключения к Интернету для доступа.

Кэш приложений позволяет приложению имеет три преимущества:

  1. Автономный просмотр — пользователи могут использовать приложение в автономном режиме
  2. Быстрые — кэшировать ресурсы загружаются быстрее
  3. Снижение нагрузки на сервер — браузер можно загрузить с сервера только был обновлен / измененные ресурсы

манифеста атрибут должен быть веб-приложений кэши каждой страницы вы хотите включить.

Файл манифеста представляет собой простой текстовый файл, включить браузер ресурсов для кэширования для автономного доступа.

Чтобы узнать больше о том , как создать файл манифеста, пожалуйста , ознакомьтесь с HTML5 кэша приложений раздел.

Различия между HTML 4.01 и HTML5

манифеста атрибут является новым в HTML5 атрибутов.

HTML5 Rocks

Переводы

Введение

Все более важным для веб-приложений становится доступ в режиме офлайн. Механизмы кэширования есть в каждом браузере, но они ненадежны и не всегда работают так, как хотелось бы. HTML5 решает некоторые задачи автономной работы с помощью интерфейса ApplicationCache.

Использование кэш-интерфейса дает приложению три преимущества:

  1. поиск в режиме офлайн – пользователи могут просматривать весь сайт в режиме офлайн;
  2. скорость – ресурсы кэшируются локально, поэтому быстрее загружаются;
  3. уменьшение нагрузки на сервер – браузер загружает только измененные ресурсы.

Кэш приложений (AppCache) позволяет разработчику указать, какие файлы браузер должен кэшировать и сделать доступными для автономных пользователей. Приложение будет загружаться и работать корректно, даже если пользователь обновит страницу без подключения к Интернету.

Файл манифеста кэша

Файл манифеста кэша представляет собой простой текстовый файл со списком ресурсов, которые браузер должен кэшировать для доступа в автономном режиме.

Обращение к файлу манифеста

Чтобы разрешить кэширование приложения, включите атрибут manifest в тег html документа:

Атрибут manifest должен присутствовать на каждой странице веб-приложения, которое нужно кэшировать. Браузер не кэширует страницу, если она не содержит атрибут manifest или не указана в самом файле манифеста. Это означает, что любая страница с атрибутом manifest , которую посетит пользователь, будет неявным образом добавлена в кэш приложения. Таким образом, перечислять в манифесте все страницы не нужно.

Илон Маск рекомендует:  Что такое код cybermut_creerreponsecm

Атрибут manifest может указывать на абсолютный URL или относительный путь, но абсолютный URL должен находиться в том же домене, что и веб-приложение. Файл манифеста может иметь любое расширение, но его MIME-тип должен быть правильным (см. ниже).

В качестве MIME-типа для файла манифеста необходимо указывать значение text/cache-manifest . Возможно, в конфигурацию веб-сервера или файл .htaccess придется добавить пользовательский тип файла.

Например, чтобы настроить этот MIME-тип в Apache, добавьте в файл конфигурации следующую строку:

А для файла app.yaml в Google App Engine код будет выглядеть так:

Структура файла манифеста

Простой файл манифеста может выглядеть примерно так:

В этом примере кэшируются четыре файла на странице, которая указывает на данный файл манифеста.

Необходимо отметить несколько моментов.

  • Строка CACHE MANIFEST является обязательной и должна быть первой.
  • Объем кэшированных данных для сайтов не может превышать 5 МБ. При написании приложений для Интернет-магазина Chrome это ограничение можно снять с помощью атрибута unlimitedStorage .
  • Если файл манифеста или указанный в нем ресурс загрузить не удается, кэш не обновляется. В этом случае браузер продолжает использовать старый кэш приложения.

Рассмотрим более сложный пример.

Строки, которые начинаются с символа #, являются комментариями, но могут служить и для другой цели. Кэш приложения обновляется только при изменении файла манифеста. Это означает, что, например, изменения, внесенные в графический ресурс или функцию JavaScript, повторно не кэшируются. Для обновления кэшированных файлов необходимо отредактировать сам файл манифеста. Чтобы у пользователей всегда была последняя версия приложения, можно создать строку комментария с номером версии, хэш-суммой файлов или датой. С появлением новой версии кэша можно обновлять и программными средствами, как описано в разделе Обновление кэша.

Манифест может содержать три раздела: CACHE , NETWORK и FALLBACK .

CACHE Это раздел для записей по умолчанию. Файлы, указанные здесь (или сразу после атрибута CACHE MANIFEST ), будут кэшироваться при первой же загрузке. NETWORK Файлы, указанные в этом разделе, представляют собой надежные ресурсы, которым необходимо подключение к серверу. Все запросы к ним идут в обход кэша, даже если пользователь находится в режиме офлайн. Здесь можно использовать знаки подстановки. FALLBACK Дополнительный раздел, содержащий резервные страницы на случай, если ресурс недоступен. Первый URL указывает ресурс, а второй – его резервную страницу. Оба адреса должны быть относительными и находиться в том же домене, что и файл манифеста. Здесь можно использовать знаки подстановки.

Примечание. Разделы могут быть указаны в любом порядке, и каждый из них может встречаться в одном манифесте несколько раз.

Следующий манифест определяет «универсальные» страницы (offline.html), которые будут отображаться, если пользователь пытается получить доступ к корневому каталогу сайта в автономном режиме. Он также указывает на то, что все остальные ресурсы (например, на удаленном сайте) требуют подключения к Интернету.

Примечание. HTML-файл, который ссылается на ваш файл манифеста, кэшируется автоматически. Указывать его в манифесте необязательно, но рекомендуется.

Примечание. Манифесты кэша заменяют собой заголовки HTML-кэша и ограничения на кэширование страниц, обслуживаемых через SSL. Это гарантирует доступ к страницам, которые обслуживаются по протоколу HTTPS, в режиме офлайн.

Обновление кэша

Офлайн-приложение хранится в кэше, пока не произойдет одно из перечисленных ниже событий.

  1. Очистка хранилища данных для соответствующего сайта в браузере.
  2. Изменения в файле манифеста. Обратите внимание: обновление файла, указанного в манифесте, не означает, что браузер повторно кэширует этот ресурс. Для этого должен измениться сам файл манифеста.
  3. Программное обновление кэша приложения.

Статус кэша

Программный доступ к кэшу приложения в браузере обеспечивает объект window.applicationCache . Его свойство status позволяет проверить текущее состояние кэша:

Чтобы обновить кэш программным образом, нужно прежде всего вызвать функцию applicationCache.update() . Она попытается обновить кэш пользователя (для этого необходимо, чтобы файл манифеста изменился). После того как атрибут applicationCache.status перейдет в состояние UPDATEREADY , функция applicationCache.swapCache() заменит старый кэш на новый.

Примечание. В результате подобного вызова функций update() и swapCache() клиенту не отправляются обновленные ресурсы. Эта последовательность просто указывает браузеру, что нужно проверить новый манифест, загрузить указанное обновленное содержание и повторно заполнить кэш приложения. В результате страница скачивается с сервера дважды: в первый раз заполняется новый кэш приложения, а во второй – обновляется содержание страницы.

Однако двойной загрузки можно избежать. Чтобы отправлять пользователям новую версию сайта, настройте отслеживание события updateready при загрузке страницы:

События AppCache

Как можно предположить, для контроля за состоянием кэша используются дополнительные события. Браузер инициирует их во время загрузки, при обновлении кэша приложения и возникновении ошибки. Приведенный ниже фрагмент задает прослушиватели для каждого типа событий кэша.

Если файл манифеста или указанный в нем ресурс загрузить не удается, обновление не выполняется. В этом случае браузер продолжает использовать старый кэш приложения.

Манифест? А? Что? Зачем?

Многие из нас, кто работает над вебом, активно стараются уменьшить разрыв между нативными и веб-приложениями.

Но что это за разрыв? Всего несколько лет назад этот разрыв был, в большей степени, технологическим. Если вы хотели получить доступ к GPS устройства, вам приходилось писать нативное приложение. Сейчас ситуация несколько улучшилась: теперь мы можем получать доступ к датчикам устройства, вроде GPS, камеры и ориентации устройства — хотя впереди ещё долгий путь. Благодаря последним успехам веб-технологий, теперь у нас есть платформа, которая может конкурировать с нативными приложениями уже почти на равных.

Сегодня разрыв между нативными и веб-приложениями не столько технологический — дело в удобстве пользователей: они предпочитают устанавливать приложения, которые уютно живут на домашнем экране (или даже на рабочем столе, если речь про десктопные браузеры).

Кроме того, нативные приложения по умолчанию работают в офлайне и интегрируются с возможностями, которые предоставляет операционная система: например, возможность видеть установленные приложения в переключателе задач. Или возможность управлять настройками конфиденциальности приложения в том же самом месте, что и для приложений, установленных из магазина. Чтобы сделать что-нибудь подобное в браузере, мы всё ещё слоняемся по браузеру в поисках открытых вкладок и вводим длинные, скучные адреса.

Нам нужен такой способ «установки» веб-приложений, чтобы они были неотличимы от любого другого приложения, установленного на устройстве пользователя. Но в тоже время, мы не хотим потерять мощные функции, составляющие основу веб-платформы: связанность ссылками, просмотр исходного кода и возможность хостить собственные проекты.

Мы в веб-сообществе, как правило, называем это «прогрессивными веб-приложениями».

Что такое «установка»?

По сути, «установка» веб-приложения — это добавление «закладки» на домашний экран или в программу запуска приложений. Есть некоторые довольно очевидные вещи, которые вы, как разработчик, должны предоставить браузеру, чтобы тот мог считать сайт приложением: название, иконки, и т.д. Есть и более сложные функции, которые могут вам пригодиться, например, возможность указать предпочтительную ориентацию устройства и нужен ли вам полноэкранный режим.

Спецификация манифеста предлагает вам стандартный способ сделать это с помощью файла JSON. Просто сошлитесь на файл манифеста в HTML-странице следующим образом:

Но что находится в этом загадочном файле манифеста? Хорошо, что вы спросили!

Очень простой манифест

Самый простой манифест может состоять всего-то из имени и одной или нескольких иконок.

Типичный манифест

Более типичный манифест может выглядеть следующим образом. Имена его ключей должны говорить сами за себя, но мы подробнее опишем их использование ниже.

Название приложения

Приложению нужно настоящее название или набор названий (которые обычно совсем не совпадают с содержимым элемента документа). Для этого используются ключи name и short_name .

Илон Маск рекомендует:  Что такое код asp hccompressiondll

Ключ short_name служит названием приложения при отображении в условиях ограниченного пространства (например, под значком на домашнем экране телефона). Ключ name может быть немного длиннее, отображая название приложения полностью. Также он служит дополнительной информацией для пользователя, который ищет ваше приложения на телефоне. Так что, набрав «улётный» или «фото», пользователь сможет найти приложение на своем устройстве.

Если вы опустите название, то браузер может использовать или элемент .

Но будьте внимательны: некоторые браузеры могут требовать указать название — иначе, ваше приложение может лишиться статуса «прогрессивное веб-приложение».

Иконки

Вместо обычной иконки браузера, у вашего веб-приложения должна быть иконка, которая будет с ним ассоциироваться. Для этого в манифесте есть ключ icons . Он принимает список иконок, их размеров и форматов. Это делает процесс выбора иконки очень эффективным, поскольку у иконок появляется адаптивное решение, которое позволяет избежать ненужных нагрузок и помогает иконкам всегда выглядеть отлично на широком диапазоне устройств и разрешений экрана.

Если вы не укажете иконки, браузер будет искать запасные варианты:
, favicon.ico или, если не найдёт их, может даже использовать скриншот вашего сайта.

Назначение иконки

Больше подробностей о назначении иконок можно найти в спецификации Web App Manifest.

Режимы отображения и ориентация

Приложения при запуске должны иметь возможность контролировать свое отображение на экране. Если это игра, то ей, вероятно, нужно быть в полноэкранном режиме и в горизонтальной ориентации. Для этого формат манифеста предоставляет вам два ключа.

Доступные значения режимов отображения:

  • Полноэкранный fullscreen занимает весь экран.
  • Автономный standalone открывает приложение со строкой состояния.
  • Минимальный minimal-ui , когда приложение отображается в полноэкранном режиме, как на iOS, но некоторые действия могут вызывать панель навигации и появление кнопок назад и вперед.
  • Браузерный browser открывает приложение со стандартным набором кнопок и панелью инструментов.

Плюс такого указания ориентации в том, что она выступает в качестве «ориентации по умолчанию» для всего приложения. Поэтому, при переходе от одной странице к другой, ваше приложение остается в правильном положении. Вы можете изменить ориентацию по умолчанию с помощью API ориентации экрана.

Также вы можете применить другие стили для приложение в определённом режиме с помощью характеристики display-mode :

Используйте метод window.matchMedia() , чтобы проверить это медиавыражение в JavaScript.

Стартовый адрес

Иногда при запуске приложения вам нужно, чтобы пользователь всегда попадал на определенную страницу. Ключ start_url даёт возможность это указать.

«Область» приложения

Нативные приложения имеют чёткие границы: как пользователь, вы уверены, что когда вы открываете нативное приложение, оно неожиданно не откроет другое незаметно для вас. Чаще всего, вам предельно ясно, что вы переключились с одного нативного приложения на другое. Обычно эти визуальные подсказки предоставляет операционная система (например, вызов диспетчера задач и выбор другого приложения или нажатие Cmd Tab или Alt Tab на компьютере).

С вебом все иначе: это огромная гипертекстовая система, в которой веб-приложение может охватывать несколько доменов: вы можете с легкостью перейти с gmail.com на docs.google.com и пользователь даже этого не заметит. На практике, идея существования границ приложения является абсолютно чуждой для веба. Ведь, в действительности, веб-приложение — это просто серия HTML-документов (представьте «серию труб»… м-м, нет, забудьте!).

В интернете мы знаем, что покидаем область одного приложения и переходим в другое, только благодаря веб-дизайнерам, которые были достаточно добры, чтобы сделать им уникальный различимый дизайн. В случаях, когда это не так, множество пользователей оказываются обмануты сайтами, маскирующимися под другие (старый добрый фишинг).

Формат манифеста решает эту проблему позволяя указывать «область адреса» для вашего приложения. Эта область устанавливает границы для приложения. Это может быть либо домен, либо директория на этом домене.

Интернационализация: lang и dir

Распространение приложения

Нужно написать с подробностями и скриншотами.

Цвет темы и цвет фона

Как мне определить, что пользователь «установил» приложение?

Спецификация позволяет вам определить, когда пользователь устанавливает приложение с помощью регистрации события appinstalled .

Однако по причинам конфиденциальности вы не можете непосредственно обнаружить, установлено ли ваше приложение — только узнать, что в вашем веб-приложении используется файл манифеста.

Что не так с тегами ?

В ходе обсуждения спецификации шли оживленные дискуссии об использовании тегов в HTML вместо создания нового формата. В конце концов, реализация функции «добавить на домашний экран» в Chrome использует теги , да и с самых первых дней веба эти теги были родным домом для всякой нестандартной ерунды.

Причины для использования отдельного файла:

  • это экономит кучу информации в шапке документа при загрузке каждой страницы установленного приложения или сайта;
  • после загрузки, файл остаётся в HTTP-кэше браузера.

В спецификации есть более подробная информация о том, почему мы выбрали JSON вместо HTML-тегов.

Кто это внедряет?

Манифест и прогрессивные веб-приложения реализованы в Chrome, Opera и Samsung Internet для Andro >Firefox также подаёт обнадёживающие сигналы, что будет поддерживать эти стандарты (реализации в Gecko уже больше двух лет, но она не используется ни в одном из продуктов).

Взаимодействие с поисковыми роботами

Как и другие веб-ресурсы, манифест веб-приложения должен быть доступен для любого веб-браузера или поискового робота.

Если разработчик веб-приложения хочет известить поисковых роботов о запрете на сканирование файла, он может сделать это включив манифест веб-приложения в файл robots.txt. Это описано подробнее в протоколе robots.txt. Разработчик веб-приложения также может использовать HTTP-заголовок X-Robots-Tag.

Авторы

Основная часть этого пояснения первоначально появилась в статье « The W3C App Manifest specification» на HTML5 Doctor, и была написана Маркусом Касересом и Брюсом Лоусоном. Данный материал публикуется на основе лицензии для некоммерческое использования. Вы можете спокойно изменять, повторно использовать, модифицировать и расширять это пояснение. Некоторые авторы сохраняют свои авторские права на отдельные статьи.

HTML5

A vocabulary and associated APIs for HTML and XHTML

W3C Recommendation 28 October 2014

4 The elements of HTML

4.1 The root element

4.1.1 The element

The html element represents the root of an HTML document.

Authors are encouraged to specify a lang attribute on the root html element, giving the document’s language. This aids speech synthesis tools to determine what pronunciations to use, translation tools to determine what rules to use, and so forth.

The attribute gives the address of the document’s application cache manifest, if there is one. If the attribute is present, the attribute’s value must be a valid non-empty URL potentially surrounded by spaces.

The manifest attribute only has an effect during the early stages of document load. Changing the attribute dynamically thus has no effect (and thus, no DOM API is provided for this attribute).

For the purposes of application cache selection, later base elements cannot affect the resolving of relative URLs in manifest attributes, as the attributes are processed before those elements are seen.

The window.applicationCache IDL attribute provides scripted access to the offline application cache mechanism.

The html element in the following example declares that the document’s language is English.

Как хранить объявленные файлы из файла манифеста в HTML5 AppCache, кроме сохранения страницы с атрибутом manifest?

Я создаю веб-приложение на ASP.net, которое я хочу получить в автономном режиме. Мне нужно сохранить некоторые статические html-сайты в appcache. Единственный вариант, который я вижу, — загрузить файл манифеста appcache, расширив html-тег в Site.Master с помощью атрибута manifest. Но теперь каждая страница, которую я вызываю, хранится в appcache.

например, каждая.aspx-страница, такая как Default.aspx, наследует главную страницу, включая html-tag:

наконец, браузер сохранит мой Default_off.html И Default Default.aspx. Поэтому, даже если я объявляю FALLBACK, страница вызывает страницу Default (.aspx).

Илон Маск рекомендует:  Что такое код xslt_set_scheme_handler

Кто-то знает, как избежать страницы с атрибутом манифеста, который хранится в appcache или альтернативном пути, поэтому файлы, объявленные в файле манифеста, хранятся?!

Атрибут manifest в HTML

Разработка под android

Каждое приложение должно иметь файл AndroidManifest.xml в корневой директории проекта. Манифест предоставляет важную информацию о приложении системе Android, которую она должна получить прежде чем сможет запустить любой из компонентов. Среди прочего, манифест служит для следующих вещей:

  • Для указания имен Java пакетов приложения. Имя пакета служит уникальным идентификатором приложения.
  • Для описания компонентов приложения — явлений, сервисом, широковещательных приемников и поставщиков содержимого, а также для указания имен классов, которые реализуют каждый из компонентов и публикации их возможностей. Это описание указывает системе Android, какие есть компоненты и при каких условиях они могут быть запущены.
  • Для определения процессов, которые используют компоненты приложения.
  • Для указания разрешений, которые должно иметь приложение, чтобы получить доступ к защищенной части API или для взаимодействия с другими приложениями.
  • Для описания разрешений, которые требуются другим приложениям для взаимодействия с компонентами данного приложения.
  • Для указания списка классов Instrumentation, предоставляющих профилирование и другую информацию о работе приложения. Используется только при разработке, при публикации удаляется из манифеста.
  • Для указания минимального уровня API, который требуется для приложения.
  • Для указания списка библиотек, которые должны быть подключены.

Структура манифеста

Диаграмма ниже показывает базовую структуру файла манифеста и все элементы, которые он включает. Каждый элемент со всеми его атрибутами описан в соответствующем разделе, который вы можете найти в меню слева.

Все доступные элементы приведены ниже. Вы не можете добавлять в манифест свои собственные элементы.

Файл манифеста

Файл манифеста сопровождает каждый блок и описывает редактируемые части блока, а также содержит его название, описание, файлы JS/CSS.

Примеры

Важно! Результат работы блока должен обязательно содержать минимум один тег, даже если это техническая информация.
Например:

Примечание: Соблюдать уникальность разметки в манифесте важно только в рамках одного блока. Между блоками одинаковые селекторы могут иметь даже абсолютно разный смысл.

Вот так мог бы выглядеть файл манифеста для блока выше:

Поля манифеста блока

Ключ block содержит название и категорию блока (или массив категорий). В системе есть некоторое количество категорий, вот они:

Если нужной категории нет в списке, просто напишите ее текстом в манифесте, категория будет добавлена. Ключом новой категории становится значение md5(strtolower($sectionName)) .

Помимо этого в данном ключе могут содержаться следующие настройки:

  • subtype – тип спец.блока, подробнее почитать можно здесь, допускает одиночное значение, или множественное в виде массива.

Ключ assets содержит в себе JS и CSS, которые необходимо подключить при добавлении блока на страницу. Если несколько блоков используют один и тот же файл JS/CSS, не страшно, каждый файл подключится только один раз.

Ключ ext это библиотеки JS ядра Битрикс. В облачном варианте вы не можете подключить любое расширение ядра. Пока разрешено подключать только библиотеки, упомянутые в специальных блоках и в интерактивных блоках.

Если вы используете какие-либо сторонние библиотеки в своем коде, которые уже подключены к основному ядру (например, jQuery), рекомендуется вывод команд в вашем скрипте оборачивать в системный метод. Тогда ваш код успешно инициализируется после всех системных подключений:

Ключ nodes содержит блоки, содержимое которых разрешено к изменению контента. Здесь и далее применяется идеология css-селекторов для указания конечных нод. Вы должны это понимать, чтобы хорошо разобраться в дальнейшем API блоков.

В качестве селектора рекомендуется выбирать говорящее имя класса. Чтобы отличать обычные классы, от структурных классов-селекторов, рекомендуется давать имени говорящий префикс. Например, «landing-block-node-» . Один и тот же селектор допускается использовать в разных блоках. Селектор ноды не совпадает с селекторами карточек данного блока.

Таким образом, в ключе nodes перечислены ключами селекторы, контент которых можно править, а также указано название ноды и ее тип. Подробнее прочитать про типы нод.

Как вы уже, наверное, догадались, в зависимости от типа ноды и ее указания в данном блоке, она станет доступна к редактированию, и появится в форме редактирования контента блока.

Помимо типа, названия и специфических ключей того или иного типа есть также общие параметры ноды любого типа:

allowInlineEdit – если передать значение ключа равное false, то данные ноды будут запрещены к редактированию инлайн, но в то же время будут доступны к редактированию через форму редактирования блока.

group – группировка нод, если указать одинаковое значение данного ключа для нескольких нод (в рамках одного блока), то при клике на любую из нод откроется интерфейс редактирования всей группы нод.

Ключ style. Ключ очень похож на ключ nodes за исключением того, что в данном ключе размечается допустимый дизайн: каким нодам разрешено менять внешний вид, и какого они типа.

Типы style могут быть следующими (в том числе их компоновка в виде массива):

  • box – блочные элементы
  • button – ссылки в виде кнопок
  • typo – вся типографика
  • typo-simple – упрощенная типографика
  • typo-link – типографика ссылок
  • paddings – все отступы
  • navbar – навигационные блоки
  • navbar-full – навигационные блоки
  • и некоторые другие.

Содержит так называемые карточки блока. Это повторяемый контент. Например, перечень услуг, фотографии сотрудников, и так далее. Разметив таким образом блок, в интерфейсе появится функционал клонирования, удаления, изменения карточек.

В простейшем виде он выглядит так, как указано в манифесте. Если вы хотите, вы можете изучить также расширенное управление карточками.

В качестве селектора рекомендуется выбирать говорящее имя класса. Чтобы отличать обычные классы, от структурных классов-селекторов, рекомендуется давать имени говорящий префикс. Например, «landing-block-card-» . Один и тот же селектор вы можете использовать в разных блоках. Селектор карточки не совпадает с селекторами нод данного блока.

Карточки одного селектора не должны быть с карточками другого селектора в одном общем родителе. Для случая общего родителя пользуйтесь расширенными карточками.

Описание атрибутов смотрите на отдельной странице.

Идеология изменения стилей блока

При изменении внешнего вида блоков, не происходит изменение атрибута style нод. Происходит изменение только классов. Например, если вы хотите поменять font-size, с 12 до 16, система изменит не ‘font-size’, а условный класс g-fontsize12 на g-fontsize16.

Для работы анимации

В штатном механизме для работы анимации нужно:

  • чтобы у ноды был класс js-animation;
  • чтобы в манифесте для данной ноды была настройка в разделе style — ‘type’ => ‘animation’;
  • чтобы анимация работала сразу по-умолчанию, ещё нужно добавить какой-то из классов анимации (в нашем примере блока — fadeIn), но не обязательно, настройка заработает и так.

Пользовательские комментарии

Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.

ATG Repository Guide

Manifest File Tags and Attributes

Wraps the entire manifest.

An attribute of the tag, optionally indicates the total number of add , remove , and update elements in the manifest file.

Contains the path name of the source file or folder. For example:

An attribute of an add , remove , or update tag, optionally specifies the TypeMapping for processing this file.

The attribute value must be the absolute Nucleus path of a component that implements atg.repository.loader.TypeMapping .

Note: if no type-mapping is provided, the Repository Loader uses the TypeMapper that is specified by the LoaderManager configuration.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL