Благодаря нововведениям в HTML 5 значительно расширились возможности браузерного кэширования, теперь пользователю могут быть доступны полные web-страницы без подключения интернета.
Основные преимущества кэширования в HTML 5:
- полное сохранения страниц и возможность их дальнейшего восстановления без подключения к интернету;
- за счёт локального хранения страниц на компьютере пользователя значительно увеличилась скорость загрузки сайта;
- опять же за счёт хранения страниц на компьютере пользователя значительно снизилась нагрузка на сервер.
Пример
<html manifest="example.appcache">
...Содержимое документа...
</html>
Для использования механизма кэширования нужно добавить к тегу <html> атрибут manifest и указать адрес файла в котором декларируются параметры кэширования, пример:
Файл кэширования может иметь любое расширение, но обязан иметь специальный MIME тип: "text/cache-manifest".
Сам по себе файл кэширования является простым текстовым документом, в котором указывается браузеру какие файлы и на какой срок необходимо кэшировать, он может содержать:
- CACHE MANIFEST - в данной части указываются ссылки на файлы, которые нужно кэшировать;
- NETWORK – в данной части указываются ссылки на файлы, которые не нужно кэшировать;
- FALLBACK – если файлы указанные в этой секции будут недоступны, то пользователи автоматически будут перенаправляться на другой указанный файл.
CACHE MANIFEST должна обязательна присутствовать в файле кэширования, а NETWORK и FALLBACK могут отсутствовать
Пример:
CACHE MANIFEST
index.html
flower.png
NETWORK
login-page.php
FALLBACK
/mob.html /offline.html
*.html /offline.html
Обновление кэшированных файлов
После того, как файлы будет кэшированы браузер продолжит показывать их кэшированную версию снова и снова даже если Вы измените содержимое этих файлов на сервере.
Для того, чтобы обновить кэшированое содержимое необходимо:
• Очистить кэш в браузере пользователя
• Обновить содержимое файла кэширования
• Обновить кэш браузера программно (с помощью jаvascript)
Для того, чтобы обновить содержимое файла можно использовать следующий трюк: вместо того, чтобы обновлять непосредственно содержимое файла можно добавить к нему комментарий с указанием даты изменения и/или версией файла и в будущем изменять только содержимое этого комментария всякий раз, когда появиться необходимость обновить кэшированное содержимое:
# 04.11.2018 v1.2
index.html
flower.png
somescript.js
Все статьи по теме HTML 5:
- HTML 5 Введение
- Устаревшие теги и атрибуты HTML 5
- Нововведения в структуру документа HTML 5
- Глобальные атрибуты в HTML 5
- Формы HTML 5
- Воспроизведение аудио файлов в HTML 5
- Воспроизведение видео файлов в HTML 5
- Web worker
- Геолокация в HTML 5
- Drag and Drop
- Кэширование страниц
- Макет шаблона HTML 5 с пояснениями
- Справочник тегов HTML 5
Canvas:
- Canvas вступление
- Применение стилей в canvas
- Оформление текста и изображений в canvas