Основные ловушки при использовании кэша в HTML5-приложениях

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

Чтобы использовать AppCache, создается файл описания с расширением «appcache», например, manifest.appcache. В этом файле можно перечислить все файлы, которые должны кэшироваться. Чтобы включить эту функцию на вашем сайте, необходимо включить ссылку на этот файл описания на вашей веб-странице в html-элемент следующим образом:

<html lang="en" manifest="manifest.appcache">

Вот пример файла описания:

CACHE MANIFEST
# 23-01-2015 v0.1
/style.css
/logo.gif
/script.js
 
NETWORK:
*
 
FALLBACK:
/server/ /fallback.html

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

Никогда не включайте файл описания в список файла описания

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

CACHE MANIFEST
# 23-01-2015 v0.1
 
manifest.appcache
page2.css

Не загружайте некэшированные ресурсы на кэшированной странице

Это очень распространенная ошибка при работе с AppCache в первый раз. Здесь на помощь может прийти NETWORK в файле описания. Раздел NETWORK файла описания указывает ресурсы, для которых веб-приложению нужен доступ к сети.
Адреса, указанные под признаком NETWORK, обычно попадают в «белый список», то есть файлы, указанные здесь, всегда загружаются с сервера при наличии интернет-соединения. Например, следующий сниппет кода обеспечивает, чтобы запросы на загрузку ресурсов, содержащиеся в субдереве /api/, всегда загружались из сети, а не из кэша.

NETWORK:
 
/api

Всегда задавайте описание типа приложения в .htaccess вашего сервера

Файл описания всегда должен подаваться в соответствии с правильным типом среды text/cache-manifest. Если тип среды не задан, тогда AppCache работать не будет.

Это всегда нужно настраивать в .htaccess вашего рабочего сервера. Этот пункт упоминается в большинстве руководств, обучающих использованию AppCache, но часто пропускается многими разработчиками, когда они переносят веб-приложения с сервера разработки на рабочий сервер.

Введите следующее в свой файл .htaccess на Apache:

AddType text/cache-manifest .manifest

Если вы загружаете свое приложение на Google App Engine, то же задание можно выполнить, добавив следующую часть кода в свой файл app.yaml:

- url: /public_html/(.*.appcache)
  static_files: public_html/1
  mime_type: text/cache-manifest
  upload: public_html/(.*.appcache)

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

Например:

CACHE MANIFEST
# 23-01-2015 v0.1
/style.css
/logo.gif
/script.js

Если удалить logo.gif, AppCache не сможет найти удаленный файл изображения, и в результате ничего из файла описания выполнено не будет.

Не забывайте, что данные загружаются из AppCache даже при наличии соединения

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

Изменения на сервере не будут действовать, пока не будет обновлен файл описания

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

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

CACHE MANIFEST
# 23-01-2015 v0.1

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

CACHE MANIFEST
# 23-01-2015 v0.2

Обратите внимание, что строка, которая начинается с # — это строка комментария, и она не выполняется.

Файл описания должен подаваться с того же источника, что и хост

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

CACHE MANIFEST
# 23-01-2015 v0.2
 
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js

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

Связанные URL связаны с URL описания

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

Если структура вашего приложения выглядит так:

css/style.css
js/main.js
img.jpg
index.html
manifest.appcache

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

CACHE MANIFEST
# 23-01-2015 v0.2
 
css/style.css
js/main.js
img.jpg

Проверяйте статус описания программно

Вы можете программно проверить, использует ли ваше приложение обновленную версию описания кэша, протестировав window.applicationCache.status. Вот пример кода:

function onUpdateReady() {
  alert('found new version!');
}
 
window.applicationCache.addEventListener('updateready', onUpdateReady);
 
if (window.applicationCache.status === window.applicationCache.UPDATEREADY) {
  onUpdateReady();
}

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

window.applicationCache.swapCache();

Заключение

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

Автор: Irina_Ua

Источник ^[1]

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/html/87623

Ссылки в тексте:

[1] Источник: http://habrahabr.ru/post/254619/

Нажмите здесь для печати.