Статьи

Распространенные ошибки, которых следует избегать при использовании кэша приложений HTML5

Ноябрь 4, 2018

Кэш приложений , также известный как 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

URL-адреса, указанные под флагом NETWORK Например, следующий фрагмент кода гарантирует, что запросы на загрузку ресурсов, содержащихся в /api/ 

 NETWORK:

/api

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

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

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

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

 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, и его следует учитывать при разработке веб-приложения с использованием AppCache.

Например: 

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

Если logo.gif

Данные загружаются из 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 — это обоюдоострый меч, поэтому будьте осторожны при его использовании!

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

34
Share: