Safari

Кэширование данных на стороне клиента

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

Для хранения ресурсов на стороне клиента следует сначала создать файл манифеста указывая, какие ресурсы должны кэшироваться. Вы объявляете файл манифеста в основном HTML файле. Затем вы манипулируете кэшем и обрабатывате события, связанные с использованием JavaScript. Веб-страницы, которые были ранее загружены и содержат ресурсы, котрые вы укажете продолжают отображаться правильно, когда нет сети. Кэш приложения также сохраняется между сеансами браузера. Так, веб-приложение, которое ранее использовалось на компьютере или устройстве может продолжать работать в автономном режиме, например, когда iOS не имеет сети или в авиа режиме.

Создание файла манифеста

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

Файл манифеста имеет следующие атрибуты:

  • Он должен быть подан с типом text/cache-manifest.
  • Первая строка должна содержать текст CACHE MANIFEST
  • Последующие строки могут содержать URL-адреса для каждого ресурса в кэше или комментарии.
  • Комментарии должны быть в одной строке и начинаться с символа #.
  • URL-адреса являются путями к файлам ресурсов, которые вы хотите скачать и кэшировать локально. Пути к файлам должны быть определены относительно расположения файла манифеста,- похоже на пути к файлам используемым в CSS, или абсолютными.
  • HTML файл, который объявляет файл манифеста, описанный в "Объявление файла манифеста", автоматически включается в кэш приложения. Вам не нужно, добавлять его в сам файл манифеста.

Пример, показывающий файл манифеста, который содержит URL-адреса к ресурсам изображений.

CACHE MANIFEST
 
demoimages/clownfish.jpg
demoimages/clownfishsmall.jpg
demoimages/flowingrock.jpg
demoimages/flowingrocksmall.jpg
demoimages/stones.jpg
demoimages/stonessmall.jpg
 

Объявление файла манифеста

После создания файла манифеста необходимо объявить его в HTML файле. Это можно сделать путем добавления атрибута manifest к тегу <html> следующим образом:

<html manifest="demo.manifest">

Аргументом в атрибуте manifest является относительный или абсолютный путь к файлу манифеста.

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

 

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

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

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

Используйте следующий класс JavaScript для запуска обновления кэша приложения и проверки его состояния. Существует один кэш для приложения в документе представленный экземпляром класса DOMApplicationCache. Кэш приложения является свойством объекта DOMWindow.

Например, вы получаете DOMApplicationCache объект следующим образом:

cache = window.applicationCache;

Вы можете проверить состояние кэша приложения следующим образом:

if (window.applicationCache.status == window.applicationCache.UPDATEREADY)...

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

window.applicationCache.update();

Если обновление было успешным, поменяйте старый и новый кэши следующим образом:

window.applicationCache.swapCache();

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

iOS Примечание: Использование JavaScript для добавления и удаления ресурсов из кэша приложения в настоящее время не поддерживается.
 

Обработка событий кэша

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

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

cache = window.applicationCache;
cache.addEventListener('updateready', cacheUpdatereadyListener, false);
cache.addEventListener('error', cacheErrorListener, false);
 
 
homeЗаметили ошибкукарта сайта 
   Made on a Mac