Главная/ Учимся Javascript, CSS, HTML/ Уроки HTML/ Up And Running/ Take This Offline/ Резервный раздел. HTML5. Up and Running. Марк Пилгрим

Резервный раздел

Дата публикации: 04.04.2011

Это еще один раздел файла manifest, в котором можно определить замены для ресурсов, которые по каким-либо причинам не могут быть сохранены или не могут работать локально. Спецификация HTML5 предлагает хитрый пример использования этого раздела:


CACHE MANIFEST
FALLBACK:
/ /offline.html
NETWORK:
*

Что тут происходит? Во-первых, рассмотрим сайт, который содержит миллионы страниц, например Википедия. Такой объем страниц сохранять локально никому не интересно. Но предположим, что есть задача сделать часть сайта доступным в автономном режиме. Как определить какие станицы сохранять? Можно примерно так: каждая посещенная страница будет становится частью оффлайн приложения Википедии, т.е. будет загружена и сохранена локально. Сюда будут включены посещенные текстовые страницы, страницы обсуждения и страницы редактирования (где можно внести изменение в содержимое материала).

Вот это и делает файл manifest. Пускай каждая страница Википедии содержит ссылку на файл manifest: главная, текстовые страницы, страницы обсуждения, редактирования и истории. При посещении страниц сайта, браузер сам у себя спрашивает: «Эта страница является частью веб приложения. Что я знаю о ней?». Если до этого не встречался указатель на manifest, тогда браузер создаст кеш приложения «appcache» (сокр. от application cache), закачает ресурсы, указанные в manifest и добавит текущую страницу в appcache. Если же браузер уже знает о файле manifest, тогда будет просто добавлена в appcache текущая страница. В любом случае, посещение страницы заканчивается добавлением в appcache. Это важно и означает, что не нужно перечислять все HTML страницы в файле manifest, веб приложение «лениво» само добавит их при посещении.

Теперь посмотрим на резервный раздел. В нашем примере в нем имеется только одна строка. Первая часть строки (до пробела) не является URL — это шаблон URL. Один символ (/) будет соответствовать любой странице сайта, а не только главной. При попытке посетить страницу, когда находишься в оффлайн, браузер будет ее искать в appcache и если он там ее найдет, страница отобразится из сохраненной копии. Если же ее там нет, то вместо сообщения об ошибке отобразится страница /offline.html, которую мы определили во второй части шаблона.

И напоследок, давай рассмотрим раздел «NETWORK». Этот раздел в нашем примере состоит тоже только из одной строки, которая содержит один символ (*). Это символ имеет особое значение в разделе «NETWORK» и называется «постановочный флаг онлайнового белого списка». Это причудливый способ указать браузеру, что все, что отсутствует в appcache должно быть туда добавлено при наличии подключения к Интернет. Это важно для «открытых» оффлайновых веб приложений. Продолжая рассматривать наш пример, это означает, что во время просмотра Википедии, у которой включена возможность оффлайнового приложения, твой браузер будет получать изображения, видео и другие содержащиеся на странице ресурсы как обычно, даже если они расположены на другом домене. (Такая практика очень распространена для крупных веб ресурсов, даже если они не являются частью оффлайн приложения. HTML страницы генерируются и сохраняются на основном сервере, а изображения, видео и прочие файлы могут располагаться на других CDN-доменах). Если бы мы не поставили постановочный флаг, то наше оффлайн приложение вело бы себя немного странно: не загружало бы ресурсы с других доменов.

Является ли наш пример полным? Нет. Википедия — это больше, чем HTML файлы. Каждая страница, как правило, включает CSS, Javascript и изображения. Для нормального функционирования страничек сайта в оффлайн режиме следует перечислить в разделе CACHE все эти ресурсы. Но использование резервного раздела позволяет получить открытое оффлайновое приложение, которое выходит за рамки тех ресурсов, что были перечислены в явном виде в файле manifest.

Куда дальше

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