Кэширование приложений для работы в оффлайне
У всех браузеров есть своя разновидность механизма кэширования, но, по-честному, эти механизмы не всегда работают. Скажем, Вы просматриваете какой-либо сайт на своем ноутбуке и затем закрываете его. Немного спустя, Вы открываете ноутбук и нажимаете на кнопку «Назад» в браузере, надеясь увидеть предыдущую страницу, которая была открыта. Однако, если Вы уже не подключены к интернету или браузер не закэшировал страницу должным образом, Вы не сможете ее просмотреть. Вы, конечно же, кликаете на кнопку «Вперед», в надежде что загрузится хотя бы она, но и этого не происходит. И пока Вы снова не подключитесь в Интернет, Вы не сможете просмотреть эти страницы.
До HTML4, единственным выходом было сохранять каждую страничку вручную. HTML5 предусматривает более изящное решение. Во время создания сайта, разработчик может определить файлы, которые браузер должен закэшировать. Фактически, на каждой странице, Вы можете указать какие документы должны быть закэшированы. Таким образом, если Вы обновите страницу когда Вы уже в оффлайне, страница все равно загрузится должным образом. Этот вид кэширования имеет несколько преимуществ.
Просмотр веб-страниц в оффлайне
как видно из названия, пользователь может просматривать сайт даже когда он в оффлайне
Скорость
файлы, закэшированные локально, загрузятся намного быстрее. Обычно таблицы стилей распространяются на все страницы сайта. Первый раз, когда Вы загружаете страницу с сайта, загрузка страниц занимает какое-то время, но когда Вы переходите на другие страницы этого-же сайта, браузеру уже нет необходимости загружать тот-же самый файл снова.
Снижение нагрузки на сервер
каждый раз, когда Вы загружаете страницу, содержащую какие-либо закэшированные элементы, браузер опрашивает сервер — а не обновились ли закэшированные файлы; если нет, то он их и не загружает. Таким образом, загрузка сервера существенно снижается.
Как это работает
Механизм, позволяющий веб-сайту быть доступным пользователю, даже если они и не соединены, очень прост. Вам необходимо прописать атрибут manifest в тэге html. Значением атрибута должна быть гиперссылка на файл manifest.cache, в котором содержаться правило для кэширования:
<!DOCTYPE HTML> <html manifest="manifest.cache"> ...
А вот как обычно выглядит файл manifest.cache:
# v1 # this is how you add a comment to the manifest. CACHE MANIFEST index.html stylesheet.css images/masthead.png scripts/misc.js NETWORK: search.php login.php /api FALLBACK: images/dynamic.php static_image.png
В файле manifest.cache три заголовка:
* CACHE
* NETWORK
* FALLBACK
Обратите внимание, что MIME type файла manifest.cache — text/cache-manifest. Вам может понадобиться добавить нестандартный тип расширения файла привязки к Apache (или к любому другому веб-серверу, который Вы используете) или выставить mime-type, например, используя директиву PHP header.
Файлы, перечисленные после CACHE будут закэшированы сразу после того, как они загрузятся; а файлы, перечисленные после NETWORK считаются белым списком. Это означает, что им необходимо непосредственное соединение с сервером. Если пользователь не соединен с сервером, браузер не должен отображать вместо них закэшированную версию.
Раздел FALLBACK (досл. «нейтрализация неисправности») содержит записи, которые предусматривают стратегию создания резервной копии. Если браузер не в состоянии восстановить исходный контент, будет задействован резервный ресурс. В примере выше, мы отображаем статическое изображение в случае если динамическое будет недоступно.
Последняя строка в разделе NETWORK содержит путь к папке для обеспечения выполнения запросов загрузки ресурсов, содержащихся в /api, которые будут избегать кэширования и всегда получать данные с сервера.
В манифесте, любая строка, начинающая с # обрабатывается как комментарий. Помимо увеличения читабельности кода, комментарии имеют еще одну возможность использования. Представьте, что Вы указали, что файл masthead.png должен быть закэширован; но Вы обновили изображение. Теперь, поскольку кэш будет обновлен только когда изменится манифест, пользователь будет продолжать видеть старое закэшированное изображение. Вы же можете решить проблему путем изменения части манифеста; например, хорошим способом будет увеличение номера версии каждый раз, когда Вы обновляете свой сайт.
Примечания:
A/ Если Вы заметили ошибку или неточность, пожалуйста, укажите на них в комментариях — обязательно исправлю.
B/ Если у Вас есть на примете какая-либо интересная, еще не переведенная, статья по HTML/CSS/PHP и т. п. на англ. языке — напишите в личку (в случае опубликования, благодарность в начале статьи за помощь в поиске с указанием Вашего ника — гарантирована :).
комментарии (39)