Как правило, большинство веб-приложений будут работать только в онлайн-режиме. Но в 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 в корневом каталоге приложения или в тот же каталог, что и приложение.

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.