Главная -> Блоги о HTML5 -> Использование Application Cache API

Использование Application Cache API

Все Вы наверное слышали, что в HTML 5 есть функция, с помощью которой можно просматривать загруженные ранее сайты без подключения к Интернет. Это возможно благодаря Application Cache API. Когда пользователь пользуется сайтом, страницы запоминаются в кэше браузера, а когда соединение с Интернет теряется, пользователь может просматривать сохраненное содержимое. Контроль над кэшированием сайта производится с помощью специального файла, названного manifest.

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

CACHE MANIFEST
# Версия 3

CACHE:
http://html5blog.ru/images/HTML5_Logo_128.png
http://html5blog.ru/images/img01.jpg
http://html5blog.ru/images/img02.jpg
http://html5blog.ru/images/img03.jpg
http://html5blog.ru/images/spacer.gif
http://html5blog.ru/default.css

FALLBACK:
/ /offline.php

NETWORK:
add_comment.php
search.php

Как видно из этого примера, состоит он из трех разделов - CACHE, FALLBACK и NETWORK. Но начнем сначала: первая строчка содержит текст CACHE MANIFEST - она означает что данный файл является файлом manifest. Комментарии в файле обозначаются с помощью символа решетки #.

Теперь давайте разберем каждый раздел.

CACHE

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

Заметим, что Вы не можете писать в этом разделе строку вида

http://html5blog.ru/images/*

Каждый ресурс, необходимый для отображения страницы, должен быть прописан на отдельной строке.

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

FALLBACK

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

Давайте рассмотрим простой пример:

CACHE MANIFEST

FALLBACK:
/page1.php /offline1.php
/page2.php /offline2.php

Тут мы прописали условия для страниц page1.php и page2.php, что если у браузера нет их сохраненных копий, то он должен перенаправить пользователя на offline1.php и offline2.php соответственно. Последние кэшируются при первом посещении пользователя этого сайта вместе с содержимым раздела CACHE.

Если Вам не нужно прописывать условие для каждой страницы, то можно написать так:

/ /offline.php

, что будет означать перенаправление с любой некэшированной страницы на страницу offline.php

В отличие от CACHE, в разделе FALLBACK допустима конструкция вида:

*.html /offline.html

Она будет означать перенаправление со всех файлов с расширением html на файл offline.html, если нет сохраненной копии страницы.

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

NETWORK

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

CACHE MANIFEST

NETWORK:
*

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

add_comment.php
search.php

т.к. ни добавление комментариев ни поиск по сайту не смогут работать без подключения к Интернет.

Подключение файла

Указать браузеру на файл manifest можно с помощью атрибута manifest в теге html:

<!DOCTYPE html>
<html lang="ru" manifest="/offline.manifest">

Кстати чтобы все работало правильно, нужно в файле .htaccess на Вашем сервере дописать строчку:

AddType text/cache-manifest .manifest

, которая определяет новый тип файлов.

У браузера Mozilla FireFox есть проблема с обновлением содержания файла manifest, поэтому специально для него нужно дописать конструкцию в .htaccess:

<IfModule mod_expires.c>
 ExpiresActive On
 ExpiresByType text/cache-manifest "access plus 0 seconds"
</IfModule>

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

Допустим, что пользователь зашел на Ваш сайт, посмотрел несколько страниц и браузер их закэшировал. Что же делать, если содержание Вашего сайта изменилось? Как указать браузеру что нужно обновить его кэш?

Все просто! Заметили в нашем файле строчку:?

# Версия 3

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

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