Создание оффлайн-приложений на HTML5

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

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

Отличие от кэша браузера:

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

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

Создание manifest-файла

HTML5 AppCache использует manifest-файл (текстовый файл с расширением .manifest), чтобы определить, какие ресурсы в веб-приложении должны кэшироваться браузером. Файл всегда должен начинаться с "CACHE MANIFEST". Также можно добавлять комментарии в manifest-файл, комментарий начинается с символа #.

Например:

CACHE MANIFEST
# version 1.0
# Files to cache

manifest-файл содержит три заголовка

1 CHACHE

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

Это раздел для записей по умолчанию, так что если заголовок раздела не определен, браузер сделает предположение, что это раздел CACHE.

CACHE MANIFEST
CACHE:
index.html
fallback.html

css/style.css
images/1.png
images/2.png
images/3.png
images/4.png

2 NETWORK

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

Вот пример раздела NETWORK:

#Network files
NETWORK:
network.html

Раздел NETWORK также позволяет использовать специальный символ *, означающий, что все ресурсы, которые не кэшируются, требуют соединения.

3 FALLBACK

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

Первое значение указывает ресурс, который сопоставляется другому.

Например:

FALLBACK:
dynamic.html fallback.html

В приведенном выше примере, если пользователь попытается получить доступ к файлу dynamic.html, то вместо него получит кэшированный файл fallback.html. В разделе FALLBACK можно использовать специальный символ /.

Например:

FALLBACK:
/ fallback.html

Это означает, что со всех не кэшированных страниц пользователь будет перенаправлен на fallback.html.

Обслуживание manifest-файла

Теперь, когда мы создали manifest-файл, необходимо добавить его ссылку на HTML страницы, которые мы хотим кэшировать, например. index.html.

Вот как мы должны добавить атрибут manifest в код HTML:

<html manifest= "offline.manifest">

Далее в файле .htaccess необходимо добавить следующую строчку:

AddType text/cache-manifest .manifest

Все! Теперь, если вы откроете страницу index.html в браузере Firefox, он спросит разрешения, хотите ли вы сохранить данные на вашем компьютере или нет.

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

Если вы хотите посмотреть, какие ресурсы кэшируются для автономного использования, то можете ввести в вашем браузере Firefox:

about:cache?device=offline

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

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

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

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

Функцию AppCache поддерживают практически все современные браузеры, такие как Firefox, Chrome и Safari. К сожалению, Internet Explorer 9 не поддерживает эту функцию.

Поделитесь ссылкой если мы вам помогли!

Читайте также:

Apple ipad 2 характеристики, стоимость

Что такое плагины для Google Сhrome

Заработок на Twitter

Как узнать на каком движке сайт?

Что делать если флешка не работает

Добавить комментарий:

Минимум 100 символов.
Модераторы detected!

Вы ввели сообщение длиной символов

Три + Пять ? =