Нашли ошибку или опечатку? Выделите текст и нажмите

Поменять цветовую

гамму сайта?

Поменять
Обновления сайта
и новые разделы

Рекомендовать в Google +1

Файл манифеста

73

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

Использование манифеста

Самого факта создания манифеста недостаточно, чтобы браузер обращал на него внимание. Чтобы манифест имел какой-либо эффект, на него должны существовать ссылки в веб-страницах. Для этого нужно вставить в корневой элемент <html> атрибут manifest и присвоить ему в качестве значения имя файла манифеста:

<html lang="ru" manifest="Manifest.appcache">

Это нужно проделать для каждой страницы, входящей в автономное приложение.

Веб-сайт может иметь неограниченное количество автономных приложений при условии, что каждое из них имеет собственный манифест. Автономные приложения также могут совместно использовать некоторые ресурсы (например, таблицы стилей), но каждое приложение должно иметь свой отдельный набор веб-страниц.

Помещение манифеста на веб-сервер

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

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

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

  1. Первым делом необходимо удостовериться в том, что для предоставления файлов манифеста в настройках веб-сервера указан MIME-тип text/cache-manifest. Если веб-сервер будет указывать какой-либо другой тип файла, включая простой текстовый файл, браузер будет полностью игнорировать манифест.

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

    AddType text/cache-manifest .appcache .manifest
  2. Рассмотрите отключение обычного кэширования для файлов манифеста. Это может быть необходимым по той причине, что веб-сервер может давать указание браузерам кэшировать файлы манифеста в течение определенного времени, точно так же, как и другие типы файлов. Такое поведение логично, но оно может вызвать большие проблемы.

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

  3. Откройте страницу в браузере, поддерживающем автономные приложения, иными словами, практически в любом браузере, за исключением Internet Explorer. Когда браузер обнаружит, что веб-страница использует манифест, он может запросить разрешение на загрузку файлов. Вероятнее всего, что такое разрешение будут требовать браузеры мобильных устройств по причине ограниченных возможностей хранения. Браузеры настольных компьютеров могут либо выдавать такой запрос, либо нет. Например, Firefox запрашивает разрешение на кэширование, a Chrome и Safari — нет:

    Разрешение кэширования

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

  4. Отключитесь от интернета. Если ваше приложение размещено на удаленном сервере, просто разорвите подключение. Если же приложение размещено на локальном сервере (т.е. на том же компьютере, что и браузер), остановите веб-сервер.

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

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

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

CACHE MANIFEST
# Изображения и скрипты
maze.css
maze.js

# Картинки
face.png
maze.png
easy_maze.png

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

Заставить автономное приложение работать — это только первая часть задачи. Вторая часть — обновление его содержимого.

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

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

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

Отсутствие кэширования файла манифеста

Если у браузера есть локальная кэшированная копия файла манифеста, он никогда не будет проверять наличие этого файла на веб-сервере. Разные браузеры подходят по-разному к вопросу кэширования файлов манифеста. Некоторые браузеры (например Chrome) всегда проверяют наличие нового файла манифеста на веб-сервере. Но Firefox следует традиционным правилам кэширования и хранит локальную копию файла манифеста в течение некоторого времени. Поэтому, чтобы избежать проблем в этой области, удостоверьтесь в том, что ваш веб-сервер явно указывает своим клиентам не кэшировать файлы манифеста.

У манифеста должна быть проставлена новая дата

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

Содержимое файла манифеста должно быть новым

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

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

CACHE MANIFEST
# version 1.00.001

# Изображения и скрипты
maze.css
maze.js

# Картинки
face.png
maze.png
easy_maze.png

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

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

Очистка кэша браузера

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

В браузере Firefox, чтобы просмотреть объем хранилища, занимаемого автономными приложениями, выполните команды F10 (отображает меню) --- Инструменты --- Настройки, в открывшемся диалоговом окне выберите опцию Дополнительные и перейдите на вкладку Сеть. На этой вкладке можно просматривать объем хранилища, занимаемого каждым автономным приложением и при надобности очистить кэш любого из них, выбрав требуемое приложение и нажав кнопку Удалить. В данном случае имеется только один котированный веб-сайт, в домене localhost (что представляет тестовый сервер на локальном компьютере):

Просмотр кэша автономных приложений в Firefox

Для просмотра кэшированных приложений в браузере Chrome введите chrome://appcache-internals в строку адреса:

Просмотр кэша автономных приложений в Google Chrome

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

Alexandr Erohin ✯ alexerohinzzz@gmail.com © 2011 - 2017