Войти
s-lub » Учебники » HTML 5 » Кэширование страниц

Кэширование страниц

Кэширование страниц

Благодаря нововведениям в HTML 5 значительно расширились возможности браузерного кэширования, теперь пользователю могут быть доступны полные web-страницы без подключения интернета.

Основные преимущества кэширования в HTML 5:

- полное сохранения страниц и возможность их дальнейшего восстановления без подключения к интернету;

- за счёт локального хранения страниц на компьютере пользователя значительно увеличилась скорость загрузки сайта;

- опять же за счёт хранения страниц на компьютере пользователя значительно снизилась нагрузка на сервер.

Пример

<!DOCTYPE HTML>
<html manifest="example.appcache">
...Содержимое документа...
</html>

Для использования механизма кэширования нужно добавить к тегу <html> атрибут manifest и указать адрес файла в котором декларируются параметры кэширования, пример:

<html manifest="example.appcache">

Файл кэширования может иметь любое расширение, но обязан иметь специальный 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)

Для того, чтобы обновить содержимое файла можно использовать следующий трюк: вместо того, чтобы обновлять непосредственно содержимое файла можно добавить к нему комментарий с указанием даты изменения и/или версией файла и в будущем изменять только содержимое этого комментария всякий раз, когда появиться необходимость обновить кэшированное содержимое:

CACHE MANIFEST
# 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