Как правило, большинство веб-приложений будут работать только в онлайн-режиме. Но в HTML5 представлен механизм кэширования приложений, который позволяет браузеру автоматически сохранять HTML-файл и все ресурсы, необходимые для его правильного отображения локально на компьютере, чтобы браузер мог по-прежнему получать доступ к веб-странице и ее ресурсам без подключения к интернету.
Вот некоторые преимущества использования функции кэширования приложения HTML5:
- Автономный доступ — пользователи могут использовать приложение даже в автономном режиме или при непредвиденных нарушениях сетевого подключения;
- Повышение производительности — кэшированные ресурсы загружаются непосредственно с компьютера пользователя, а не с удаленного сервера, поэтому веб-страницы загружаются быстрее и работают лучше;
- Уменьшение запросов и нагрузки на сервер — браузер должен будет загружать только обновленные/измененные ресурсы с удаленного сервера, что минимизирует HTTP-запросы и экономит драгоценную пропускную способность, а также снижает нагрузку на веб-сервер.
Функция кэширования приложений HTML5 поддерживается во всех основных современных веб-браузерах, таких как Firefox, Chrome, Opera, Safari и Internet Explorer 10 и выше.
Кэширование файлов с использованием Manifest
Для кэширования файлов для автономного использования необходимо выполнить следующие шаги:
Шаг 1. Создание файла манифеста кэша
Манифест — это специальный текстовый файл, который сообщает браузерам, какие файлы хранить, какие файлы не хранить и какие файлы заменить чем-то другим. Файл манифеста всегда начинается со слов CACHE MANIFEST (в верхнем регистре). Вот пример простого файла манифеста:
CACHE MANIFEST
# v1.0 : 10-08-2014
CACHE:
# pages
index.html
# styles & scripts
css/theme.css
js/jquery.min.js
js/default.js
# images
/favicon.ico
images/logo.png
NETWORK:
login.php
FALLBACK:
/ /offline.htmlРазберем этот кусок кода подробнее. Файл манифеста может иметь три отдельных раздела: CACHE, NETWORK и FALLBACK.
- Файлы, перечисленные в заголовке раздела
CACHE:(или сразу после строкиCACHE MANIFEST), явно кэшируются после первой загрузки; - Файлы, перечисленные в заголовке раздела
NETWORK:являются «белыми» ресурсами, которые никогда не кэшируются и не доступны в автономном режиме. Это означает, что пользователи могут получить доступ к страницеlogin.phpтолько в режиме онлайн; - В разделе
FALLBACK:указываются резервные страницы, которые браузер должен использовать в случае, если невозможно установить соединение с сервером. Каждая запись в этом разделе перечисляет два URI — первый является основным ресурсом, а второй — резервным. Например, в нашем случае страницаoffline.htmlбудет отображаться, если пользователь не в сети. Кроме того, оба URI должны быть из того же источника, что и файл манифеста; - Строки, начинающиеся с символа хештега (
#), являются строками комментариев.
Если кэш приложения существует, браузер загружает документ и связанные с ним ресурсы непосредственно из кэша, не обращаясь к сети. После этого браузер проверяет, обновлен ли файл манифеста на сервере, и если он был обновлен, браузер загружает новую версию манифеста и ресурсы, перечисленные в нем.
Не указывайте сам файл манифеста в файле манифеста кэша, иначе будет практически невозможно сообщить браузеру, что доступен новый манифест.
Шаг 2. Использование файла манифеста кеша
После создания загрузите файл манифеста кэша на веб-сервер — убедитесь, что веб-сервер настроен для обслуживания файлов манифеста с MIME-типом text/cache-manifest.
Теперь, чтобы задействовать манифест кэша, вам нужно включить его на своих веб-страницах, добавив атрибут manifest в корневой элемент <html>, как показано ниже:
<!DOCTYPE html>
<html lang="en" manifest="example.appcache">
<head>
<title>Using the Application Cache</title>
</head>
<body>
<!--The document content will be inserted here-->
</body>
</html>На веб-серверах Apache MIME-тип для файлов манифеста (.appcache) может быть установлен путем добавления AddType text/cache-manifest .appcache в файл .htaccess в корневом каталоге приложения или в тот же каталог, что и приложение.
