Оффлайн доступ становится все более важным для веб-приложений. Хотя у всех браузеров есть механизмы кэширования, они не являются надежными и не всегда играют ожидаемую роль. HTML5 использует интерфейс ApplicationCache для решения некоторых проблем, вызванных автономным использованием.
Использование интерфейса кэша может принести следующие три преимущества в вашем приложении :Оффлайн просмотр - Пользователи могут просматривать ваш полный сайт, пока в автономном режиме
Скорость - кэшированный ресурс является локальным ресурсом, поэтому он загружается быстрее.
Загрузка сервера меньше - браузер загружает только ресурсы с изменения изменившегося сервера.
Кэш приложений (также известный как AppCache) позволяет разработчикам указать, к каким файлам браузер должен кэшировать для автономных пользователей. Ваше приложение будет загружаться и работать нормально, даже если пользователь нажимает кнопку обновления при автономном режиме.
Кэш -манифестный файл
Файл манифеста кэша - это простой текстовый файл, в котором перечислены ресурсы, которые браузер должен кэш для автономного доступа.
Справочный манифестный файл
Чтобы включить кэширование приложения для приложения, добавьте атрибут Manifest в HTML -тег документа:
<html manifest = "example.appcache">
...
</html>
Вы должны добавить свойство Manifest на каждой странице веб -приложения, которое вы хотите кэшировать. Если страница не содержит атрибута Manifest, браузер не будет кэшировать страницу (если только она не указана в файле Manifest). Это означает, что каждая веб -страница, которую пользователь просматривает с манифестом, будет неявно добавлена в кэш приложения. Поэтому вам не нужно перечислять каждую страницу в списке.
Свойство Manifest может указывать на абсолютный URL или относительный путь, но абсолютный URL должен быть таким же, как соответствующее сетевое приложение. Манифестный файл может использовать любое расширение файла, но должен быть предоставлен правильный тип MIME (см. Ниже).
<html manifest = "http://www.example.com/example.mf">
...
</html>
Манифестный файл должен быть предоставлен в типе Text/Cache-Mame Mime. Возможно, вам потребуется добавить пользовательский тип файла на ваш веб -сервер или .htaccess Configuration.
Например, для предоставления этого типа MIME в Apache добавьте следующую строку в свой файл конфигурации:
Addtype text/cache-manifest .appcache, чтобы предоставить этот тип Mime в файле App.yaml of Google App Engine, добавьте следующее:
- url: /mystaticdir/(.*/.appcache)
static_files: mystaticdir // 1
MIME_TYPE: TEXT/CACHE-MANIFEST
Загрузить: mystaticdir /(.*/. AppCache) Манифестная структура файла
Простой формат списка заключается в следующем:
Кэш Манифест
index.html
stylesheet.css
Images/logo.png
scripts/main.js Этот пример кэширует четыре файла на веб -странице, которые определяют этот манифестный файл.
Следующие моменты, на которые вам нужно обратить внимание:
Строка манифеста кэша должна быть на первой строке и имеет важное значение.
Количество кэшированных данных на веб -сайте не должно превышать 5 МБ. Однако, если вы пишете приложение для Chrome Web Store, вы можете использовать UnlimitedStorage для неограниченного количества ограничений.
Если файл манифеста или ресурс, указанный в нем, не может быть загружен, весь процесс обновления кэша не может быть выполнен. В этом случае браузер будет продолжать использовать исходный кэш приложений.
Давайте посмотрим на более сложные примеры:
Кэш Манифест
# 2010-06-18: V2
# Явно кэшировал «мастер -записи».
Кэш :/favicon.ico
index.html
stylesheet.css
Images/logo.png
Scripts/Main.js
# Ресурсы, которые требуют от пользователя в сети.
СЕТЬ :Login.php
/myapi
http://api.twitter.com
# static.html будет обслуживаться, если main.py недоступен
# offline.jpg будет обслуживаться вместо всех изображений на изображениях/Большой/
# offline.html будет обслуживаться вместо всех остальных файлов .html
ОТСТУПАТЬ :/main.py /static.html
Изображения/Большие/Изображения/ОФЛИНЕЛЬ.jpg
*.html /Offline.html, которые начинаются с #, являются линиями комментариев, но могут использоваться и для других целей. Кэш приложений обновляется только в том случае, если его манифест изменяется. Например, если вы изменяете ресурс изображения или измените функцию JavaScript, эти изменения не переоборудованы. Вы должны изменить сам файл манифеста, чтобы браузер обновил кэшированный файл. Создайте строки комментариев с помощью сгенерированных номеров версий, значений хэша файла или временных метров, чтобы убедиться, что пользователи получают последнюю версию вашего программного обеспечения. Вы также можете программно обновлять кэш после появления новой версии, как описано в разделе «Обновление кэша».
Список может включать три разные части: кэш, сеть и запасная сторона.
Кэш :Это по умолчанию часть записи. Файлы, перечисленные под этим заголовком, явно кэшируются в первый раз (или файлы сразу после манифеста кэша).
СЕТЬ :Файлы, перечисленные в этом разделе, представляют собой белые ресурсы, которые необходимо подключить к серверу. Все запросы на эти ресурсы обходят кэш независимо от того, является ли пользователь офлайн или нет. Подстановочные знаки могут быть использованы.
ОТСТУПАТЬ :Этот раздел необязательно и используется для указания запасной страницы, когда ресурс недоступен. Первый URI представляет ресурс, а второй представляет веб -страницу резервного копирования. Оба URI должны быть связаны и должны быть одинакового происхождения, что и файл манифеста. Подстановочные знаки могут быть использованы.
Обратите внимание: эти разделы могут быть организованы в любом порядке, и каждый раздел может быть повторен в одном и том же списке.
В следующем списке определяется комплексная веб -страница (Offline.html), отображаемая, когда пользователь пытается получить доступ к корне в автономном режиме веб -сайта, а также указывает на то, что все другие ресурсы (такие как ресурсы на удаленном веб -сайте) требуют подключения к Интернету.
Кэш Манифест
# 2010-06-18: V3
# Явно кэшированные записи
index.html
css/style.css
# offline.html будет отображаться, если пользователь не в автономном режиме
ОТСТУПАТЬ:
//offline.html
# Все остальные ресурсы (например, сайты) требуют, чтобы пользователь был онлайн.
СЕТЬ:
*
# Дополнительные ресурсы для кеша
Кэш:
Images/logo1.png
Images/logo2.png
Обратите внимание, что Images/logo3.png: система автоматически кэширует файл HTML, который ссылается на файл манифеста. Таким образом, вам не нужно добавлять его в список, но мы рекомендуем вам это сделать.
ПРИМЕЧАНИЕ . Заголовки кэша HTTP и ограничения кэша, установленные для веб -страниц, предоставленных через SSL, будут заменены манифестами кэша. Таким образом, веб -страница, предоставленная HTTPS, может работать в автономном режиме. Обновить кэшПриложение остается кэшированным после офлайн, если не произойдет одно из следующих.
Пользователь очищает хранение данных браузера на вашем сайте.
Манифестный файл был изменен. Обратите внимание: обновление файла, указанного в манифесте, не означает, что браузер будет повторно привлекать ресурс. Сам манифестный файл должен быть изменен.
Кэш приложения обновляется программно.
Статус кэшаОбъект window.applicationCache - это метод программного доступа к кэше приложения браузера. Его атрибут статуса можно использовать для просмотра текущего состояния кэша:
var appCache = window.applicationCache;
Switch (appcache.status) {
case appcache.uncached: // uncached == 0
вернуть «не укоренившись»;
перерыв;
case appcache.idle: // idle == 1
вернуть 'idle';
перерыв;
case AppCache.Checking: // Проверка == 2
вернуть «проверку»;
перерыв;
case appcache.downloading: // загрузка == 3
вернуть 'скачивание';
перерыв;
case appcache.updateready: // UpdateAtready == 4
вернуть 'UpdateAdy';
перерыв;
case appcache.obsolete: // устареть == 5
вернуть «устаревшего»;
перерыв;
по умолчанию:
вернуть статус «U -known cache»;
перерыв;
};
Чтобы программно обновить кэш, сначала вызовите ApplicationCache.update (). Это попытается обновить кэш пользователя (при условии, что файл манифеста был изменен). Наконец, когда ApplicationCache.status находится в состоянии обновления, вызовите ApplicationCache.swapcache (), чтобы заменить исходный кэш на новый кэш.
var appCache = window.applicationCache;
appcache.update (); // Попытка обновить кэш пользователя.
...
if (appcache.status == window.applicationCache.updateReady) {
appcache.swapcache (); // Фетш была успешной, поменяется новым кешем.
}
Обратите внимание : использование Update () и Swapcache () таким образом не будет предоставлять обновленные ресурсы пользователю. Этот процесс просто позволяет браузеру проверить новые манифесты, загружать указанные обновления и пополнять кэш приложений. Следовательно, веб -страница должна быть перезагружена дважды, прежде чем новый контент будет предоставлен пользователю, первым является получение нового кеша приложений, а второе - обновить контент веб -страницы.Хорошей новостью является то, что вы можете избежать хлопот перезарядки дважды. Чтобы обновить пользователей до последней версии веб -сайта, настройте слушателя для мониторинга событий обновления при загрузке веб -страницы:
// Проверьте, доступен ли новый кэш на загрузке страницы.
window.addeventlistener ('load', function (e) {
window.applicationcache.addeventlistener ('Updateady', function (e) {
if (window.applicationCache.status == window.applicationCache.updateReady) {
// Браузер скачал новый кэш приложений.
// заменить его и перезагрузить страницу, чтобы получить новую жару.
window.applicationcache.swapcache ();
if (Подтверждение ('новая версия этого сайта доступна. Загрузите его?')) {
window.location.reload ();
}
} еще {
// Манифест не изменился. Ничего нового для сервера.
}
}, ЛОЖЬ);
}, ЛОЖЬ);
Событие AppCacheКак вы ожидали, дополнительные события используются для прослушивания состояния кэша. Браузер запустит соответствующие соответствующие события для прогресса загрузки, обновлений кэша приложений и состояния ошибки. Следующий фрагмент кода устанавливает слушатель событий для каждого типа события кэша:
функция handlecacheevent (e) {
// ...
}
функция handlecacheerror (e) {
Alert ('error: cache не удалось обновить!');
};
// Уволен после первого кеша манифеста.
appcache.addeventlistener ('cached', handlecacheevent, false);
// Проверка на обновление. Всегда первое событие выстрелилось в последовательности.
appcache.addeventlistener («Проверка», Handlecacheevent, false);
// было найдено обновление. Браузер получает ресурсы.
appcache.addeventlistener ('загрузка', handlecacheevent, false);
// Манифест возвращает 404 или 410, загрузка не удалась,
// или манифест изменился, пока загрузка была в процессе.
appcache.addeventlistener ('error', handlecacheerror, false);
// уволен после первой загрузки манифеста.
appcache.addeventlistener ('nourdate', handlecacheevent, false);
// Уволен, если манифестный файл возвращает 404 или 410.
// Это приводит к удалению кэша приложения.
appcache.addeventlistener ('устаревший', handlecacheevent, false);
// уволен для каждого ресурса, перечисленного в манифесте, когда он извлекается.
appcache.addeventlistener ('Progress', handlecacheevent, false);
// Уволен, когда марнифест -ресурсы были недавно загружены.
appcache.addeventlistener ('Updateedy', handlecacheevent, false);
Если файл Manifest или ресурс, указанный в нем, нельзя загрузить, все обновление потерпит неудачу. В этом случае браузер будет продолжать использовать исходный кэш приложений