Автономное выполнение приложений Web с помощью HTML5 AppCache

Шветанк Диксит · 1 июля 2010 г.

Введение

Приложения Web стали существенной частью жизни людей в такой степени, что многие используют их все время. Не будет ли полезно, если мы сможем использовать их, даже когда не подключены к сети? До недавних пор не существовало никакого способа это сделать – однако, с появлением в W3C HTML5 кэша приложений (http://dev.w3.org/html5/spec/offline.html), стало возможно выполнение приложения Web в автономном режиме, также как и в сети. Давайте посмотрим, как это реализуется.

Зачем приложение выполняется в автономном режиме?

Приложения Web становятся с каждым днем все сложнее и мощнее. Существует множество примеров приложений web в различных областях выполняющих такую же работу, как и настольные приложения (подумайте о Google Docs, Picasa, и т.д.). Однако один существенный недостаток состоит в том, что они не могут работать, когда пользователь не соединен с Интернет.

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

Сохранение файлов в кэше приложений для автономного использования

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

В чем отличие кэша приложений от обычного кэша браузера?

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

Преимущество использования AppCache состоит в том, что теперь разработчик имеет значительно больше программного контроля над кэшем, что означает значительно больше уверенности и контроля над тем, как приложения Web будут вести себя в автономном режиме. Отметим также, что можно иметь несколько страниц, совместно использующих одну память AppCache. Также с помощью AppCache можно использовать API для определения состояния памяти AppCache, и затем даже заставить ее обновиться.

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

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

Для файла манифеста можно задать любое имя, но рекомендуется давать ему расширение

.manifest. Каждый файл манифеста должен начинаться с CACHE MANIFEST, после чего перечисляются файлы, которые желательно сохранить и сделать доступными для автономного использования. Можно задавать комментарии, помещая # в начале строки. Очень простой файл манифеста выглядит следующим образом:

CACHE MANIFEST
#Можно также использовать заголовок раздела CACHE:, 
#чтобы явно объявить три следующих файла.

style.css
script.js
index.htm

Файл манифеста должен иметь правильный тип MIME, который должен быть text/cache-manifest. Чтобы сделать это, можно задать расширение .manifest для файла манифеста, и добавить следующую строку в файл .htaccess на сервере:

AddType text/cache-manifest .manifest

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

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

manifest в тег <HTML> страницы. Например:

<html manifest="demo.manifest">

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

Использование заголовков разделов для улучшения контроля AppCache

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

Явное определение файлов для кэширования

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

CACHE MANIFEST

CACHE:
style.css
script.js
index.htm

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

Вот очень простой пример страницы, которая использует заголовок раздела CACHE: (http://people.opera.com/shwetankd/demos/2/index.htm).

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

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

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

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

По сути, если страница связана с файлом манифеста, то весь сетевой трафик ее файлов блокируется, и файлы либо должны загружаться из AppCache, либо отказываться загружаться. Заголовок раздела NETWORK: делает исключения для этого правила. Можно использовать раздел заголовка NETWORK: для объявления, какие файлы не должны кэшироваться, чтобы они загружались с сервера, и никогда не были частью кэша приложений. Раздел заголовка NETWORK: принимает во внимание заголовок обычного кэша браузера. Поэтому, если предполагается, что файл будет кэшироваться обычным кэшем браузера, то он и будет им кэшироваться (также как и любой другой файл, не определенный в AppCache), даже если он определен под заголовком раздела NETWORK:.

CACHE MANIFEST

CACHE:
style.css
script.js
index.htm

NETWORK:
style2.css

В примере выше style2.css всегда будет загружаться с сервера и никогда не будет частью кэша приложений. Помните, что могут быть ситуации, когда имеется слишком много файлов для перечисления, которые не должны использовать кэш, что делает запись всех этих файлов под заголовком раздела NETWORK: обременительным. В этом случае можно использовать символ звездочки (*), что разрешает всем URL выходить в сеть, если вы находитесь в сети.

Посмотрите на пример, который использует файл манифеста с заголовком раздела NETWORK: (http://people.opera.com/shwetankd/demos/3/index.htm). Можно заметить, что когда вы не в сети и перезагружаете страницу, страница перезагружается, но оформление фона исчезает. Это связано с тем, что оформление фона в этом примере находится в файле style2.css, который находится под заголовком раздела NETWORK:, что означает, что он не кэшируется и будет загружаться, только когда вы в сети и перезагружаете страницу.