8 На волю, в офлайн!
Приступим
Что такое офлайновое веб-приложение? На первый взгляд перед нами терминологическое противоречие. Веб-страница загружается, прежде чем отображаться, а загрузка требует подключения к Сети. Можно ли скачивать данные, находясь вне Сети? Нет, конечно. Но ведь можно скачивать заблаговременно, находясь в Сети. На этом принципе и основана система офлайновых приложе-
ний в HTML5.
Впростейшем случае офлайновое веб-приложение представляет собой список адресов HTML-страниц, CSS-таблиц, файлов JavaScript, изображений и любых других ресурсов. На этот список — так называемый манифест, обычный текстовый файл, хранящийся где-либо на веб-сервере, — указывает главная страница офлайнового веб-приложения. Браузер, в котором реализована система офлайновых приложений HTML5, прочтет список URL-адресов из манифеста, скачает указанные там ресурсы, поместит их в локальный кэш и будет хранить эти локальные копии вплоть до момента их изменения. Когда в следующий раз вы попытаетесь запустить веб-приложение, не имея подключения к Сети, браузер автоматически переключится на локальную копию.
С этого момента начинается работа веб-программиста. В DOM есть свойство, которое показывает, в Сети находится пользователь или нет. С изменением значения этого свойства (например, сейчас вы работаете в автономном режиме, а через несколько секунд подключаетесь к Сети или наоборот) связаны определенные события. И это далеко не вся интересующая нас функциональность. Если приложение порождает какую-либо информацию или сохраняет свои состояния, то можно хранить все это локально (см. главу 7), пока пользователь находится вне Сети,
исинхронизировать с удаленным сервером после подключения. Иными словами, HTML5 позволяет перенести приложение в офлайн, но как будет организована его автономная работа — решать веб-мастеру.
Втабл. 8.1 показано, в каких браузерах поддерживаются офлайновые вебприложения.
Таблица 8.1. Поддержка офлайна
IE |
Firefox |
Safari |
Chrome |
Opera |
iPhone |
Android |
– |
√ |
√ |
√ |
– |
√ |
√ |
146 |
Глава 8.. На волю, в офлайн! |
Манифест кэша
Ключевой для офлайнового веб-приложения файл — манифест кэша. Как я уже говорил, это список всех ресурсов, которые ваше веб-приложение может востребовать, пока оно отключено от Сети. Чтобы запустить процесс загрузки и кэширования этих ресурсов, надо сослаться на файл манифеста в атрибуте manifest тега
<html>.
<!DOCTYPE HTML>
<html manifest=”/cache.manifest”> <body>
…
</body>
</html>
Файл манифеста кэша может располагаться где угодно на веб-сервере, но он должен быть обязательно оснащен MIME-типом text/cache-manifest. Если вы работаете с веб-сервером на основе Apache, то стоит добавить соответствующую директиву AddType в файл с расширением .htaccess в корневой директории:
AddType text/cache-manifest .manifest
После этого убедитесь, что имя вашего файла манифеста заканчивается на
.manifest. Если вы пользуетесь иным веб-сервером или нестандартной конфигурацией Apache, обратитесь к справочной документации вашего сервера по вопросу об управлении заголовками Content-Type.
Разметка в вопросах и ответах
Вопрос: Мое веб-приложение состоит из нескольких страниц. Нужно ли указывать атрибут manifest на каждой странице или достаточно поместить его только на главной странице?
Ответ: Каждая страница вашего веб-приложения должна ссылаться посредством атрибута manifest на файл — манифест кэша всего веб-приложения.
Допустим, что формальности выполнены: каждая из ваших HTML-страниц указывает на файл манифеста кэша, а сам файл обслуживается правильным заголовком Content-Type. Теперь разберемся, что представляет собой файл манифеста.
Первая строка файла манифеста обязательно такова:
CACHE MANIFEST
Последующее содержимое файла манифеста делится на три раздела: явное
(explicit), резервное (fallback) и сетевое (NETWORK, или online whitelist — «он-
лайновый белый список»). Заголовок каждого раздела оформляется отдельной строкой. Если никаких заголовков в файле манифеста нет, то подразумевается, что все перечисленные в нем ресурсы — явные. Чтобы не разболелась голова, постарайтесь пока не обращать внимания на терминологию.
Манифест кэша |
147 |
Вот образец правильно построенного файла манифеста. В нем перечислены три ресурса: CSS-файл, файл JavaScript и изображение в формате JPEG:
CACHE MANIFEST
/clock.css
/clock.js /clock-face.jpg
Этот файл манифеста кэша не содержит заголовков. Значит, все перечисленные в нем ресурсы по умолчанию явные, то есть браузер скачивает и локально кэширует их, чтобы использовать вместо соответствующих онлайновых файлов при отключении от Сети. Таким образом, после загрузки показанного выше файла манифеста из корневой директории веб-сервера будут скачаны clock.css, clock.js и clock-face.jpg. Если отсоединить сетевой кабель и обновить страницу, то все эти ресурсы будут работать по-прежнему.
Разметка в вопросах и ответах
Вопрос: Нужно ли перечислять в манифесте кэша |
HTML-страницу с атрибутом manifest, сама эта страница |
HTML-страницы? |
выступает как часть веб-приложения, так что указывать |
Ответ: Единого ответа на этот вопрос не существует. Если |
ее в файле манифеста не нужно. Однако, если ваше веб- |
приложение состоит из нескольких страниц, надо пере- |
|
ваше веб-приложение состоит из одной страницы, просто |
числить их все в файле манифеста. В ином случае браузер |
убедитесь, что она ссылается на манифест кэша посред- |
не будет знать, что есть и другие HTML-страницы (кроме |
ством атрибута manifest. Всегда, когда вы переходите на |
основной), которые следует загрузить и кэшировать. |
|
|
Раздел NETWORK
Рассмотрим чуть более сложный пример. Например, вы хотите, чтобы приложениечасы отслеживало посещения страницы с помощью сценария tracking.cgi, динамически загружаемого из атрибута <img src>. Если кэшировать этот ресурс, то следить за посетителями не удастся. Значит, этот ресурс никогда не должен быть доступен в автономном режиме. Вот как добиться поставленной цели:
CACHE MANIFEST
NETWORK:
/tracking.cgi
CACHE:
/clock.css
/clock.js /clock-face.jp
Этот файл манифеста содержит заголовки разделов. Со строки NETWORK: начинается сетевой раздел — онлайновый белый список. Ресурсы в нем никогда не кэшируются и недоступны автономно (попытка загрузить один из таких ресурсов в офлайновом режиме приведет к ошибке). Со строки CACHE: начинается явный раздел, содержимое которого совпадает с предыдущим примером. Каждый из трех перечисленных здесь ресурсов будет кэширован и доступен в режиме офлайн.
148 |
Глава 8.. На волю, в офлайн! |
Раздел FALLBACK
В файле манифеста кэша есть еще резервный раздел. В нем можно перечислить заместители тех интернет-ресурсов, которые по тем или иным причинам не были (или вообще не могут быть) сохранены в кэше. В спецификации HTML5 приводится следующий интересный вариант использования «резервного» раздела:
CACHE MANIFEST FALLBACK:
/ /offline.html NETWORK:
*
Как работает эта запись? Рассмотрим сайт с миллионами страниц вроде «Википедии». По-видимому, загрузить такой сайт целиком не представляется возможным, да и незачем. Но предположим, что вы можете сделать часть страниц доступными в офлайне. Как решить, какие из страниц кэшировать? Возможен такой механизм: каждая просмотренная пользователем страница «Википедии», гипотетически доступной в офлайне, скачивается и кэшируется. Значит, кэш будет содержать все статьи, которые когда-либо открывались в браузере, все страницы обсуждения (где пользователь может беседовать сдругими участниками по поводу содержания статей) и страницы правок (где пользователь может вносить изменения в статьи).
Этот механизм и призван реализовать манифест кэша. Пусть каждая HTMLстраница нашей «Википедии» (энциклопедическая статья, страница обсуждения, правок или истории) ссылается на этот файл манифеста. При посещении любой подобной страницы браузер говорит: «Так-так, эта страница — часть офлайнового приложения. Что мне уже известно об этом приложении?» Если браузер еще ни разу не скачивал соответствующий файл манифеста, то будет создан новый офлайновый кэш приложения, программа скачает все ресурсы, перечисленные в манифесте кэша, и добавит текущую страницу в кэш приложения. А вот если браузер «знает» о данном манифесте кэша, то он просто добавит текущую страницу в кэш приложения, который уже существует. Так или иначе, каждая посещенная страница попадает в кэш приложения. Это важно: оказывается, можно сделать офлайновое веб-приложение, которое бы «лениво» добавляло страницы по мере их посещения. Значит, перечислять все ваши HTML-страницы в манифесте кэша не обязательно.
Теперь посмотрим на резервный раздел FALLBACK:, который в данном манифесте кэша состоит из одной строки. Часть строки до пробела — это в действительности не URL-адрес, а шаблон URL-адреса. Одиночный символ слеша (/) соответствует любой странице вашего сайта, а не только главной. При попытке открыть страницу в автономном режиме браузер попробует найти ее в кэше приложения. Если страница найдется (потому что пользователь посещал ее, пока работал в Сети, и в это время страница была автоматически внесена в кэш приложения), то в браузере отобразится кэшированная копия. Если же страница не найдется, то вместо сообщения об ошибке браузер выведет на экран страницу /offline.html, как и указано во второй половине резервной строки.