Что такое «кэш приложений»?
Веб-приложения должны быть доступны без подключения к Интернету. Практически все веб-приложения работают в онлайн-режиме. Таким образом, текущая версия HTML предоставляет функциональные возможности для работы с веб-приложением в онлайн- и офлайн-режиме. HTML5 обеспечивает функциональность кэширования приложений, которая позволяет веб-приложению работать без Интернета.
Прежде чем разбираться в кэше приложений, давайте разберемся, что такое HTML:
HTML означает язык гипертекстовой разметки (HTML) для разработки веб-приложений и веб-сайтов. Новая версия HTML обеспечивает другую функциональность с интернет-технологиями. Он также поддерживает видео и аудио, в то время как HTML не поддерживает его.
Кэш приложения в HTML5: HTML5 предоставляет функциональность кэша приложений, которая позволяет веб-приложению работать без Интернета. Используя интерфейс кеша приложения, данные кэша интернет-браузера и сделать его доступным для пользователя в автономном режиме. Создайте автономное веб-приложение, оно использует файл манифеста.
Синтаксис:
<html manifest=”file_name extension_of_file”>
Реализация: Создайте файл HTML. Затем добавьте атрибут manifest в тег документа HTML-файла. Файл манифеста содержит расширение .appcache.
<html manifest="demo.appcache">
Как использовать кэш приложений?
Давайте разберемся, как использовать кэш приложений с помощью подхода.
Подход:
- Создать файл манифеста
- Создайте файл HTML и добавьте тег атрибута манифеста. пример index.html
- Создайте еще один файл HTML и свяжите его с основным файлом HTML.
Шаг 1: Создайте файл манифеста. Манифест — это файл, который предлагает браузерам, какие данные хранить в кэше. Этот файл начинается с CACHE MANIFEST. Здесь '#' показывает комментарий.
- Файл манифеста
HTML
CACHE MANIFEST CACHE: # shows pages index.html # contain style and scripts css/theme.css js/jquery.min.js js/default.js # shows images /favicon.ico images/logo.png # network session NETWORK: login.php FALLBACK: //offline.html |
Свойства: файл манифеста содержит три разных раздела:
- МАНИФЕСТ КЭША: он кэшировал данные для загрузки в первый раз.
- СЕТЬ: Доступно только в онлайн-режиме.
- FALLBACK: файл под резервными страницами, если страница недоступна.
Шаг 2. Добавьте атрибут манифеста в HTML-файл. Перед добавлением файла манифеста кэша в HTML проверьте следующее:
- Проверьте, настроен ли веб-сервер для обслуживания файлов манифеста или нет.
- Загрузите файл манифеста кэша.
- Добавьте атрибут манифеста в файл HTML.
Теперь давайте возьмем пример и разберемся с его помощью.
Пример: выполните следующие шаги:
Шаг 1: Создайте файл, сохраните его как index.html и добавьте атрибут манифеста в тег HTML.
HTML
<!DOCTYPE html> < html manifest = "demo.appcache" > < body text = "red" > < center > Application Cache In HTML 5. < p > < a href = "page.html" >Click Here</ a >, This page contain data even offline mode . </ p > </ body > </ html > |
Выход:
Шаг 2: Теперь создайте еще один файл HTML и сохраните его как page.html.
HTML
<!DOCTYPE html> < html manifest = "demo.appcache" > < body text = "green" > < h3 > < center > Welcome to GeeksForGeeks. < p >A computer science portal for geeks. </ p > < p >Go Offline and refresh page. </ p > </ center > </ h3 > </ body > </ html > |
Объяснение: Основной файл HTML (index.html) содержит ссылку на следующую страницу. Когда пользователь нажмет на эту ссылку, будет выполнена следующая страница. Основной файл содержит атрибут манифеста, поэтому, даже если пользователь вышел из сети и обновил страницу, он покажет содержимое этой страницы. Это все работает из-за кеша приложений.
Выход:
Преимущество:
- Автономный режим: пользователи могут использовать приложения без Интернета или в автономном режиме.
- Меньше места: веб-страницы уже кэшированы, поэтому они занимают меньше места.
- Увеличьте скорость: веб-страницы содержат кэшированные данные. кешированные данные являются локальными, поэтому они загружаются быстро
- Снижение нагрузки на сервер: веб-браузер будет загружать данные только в том случае, если они обновлены на сервере. Это также уменьшает HTTP-запросы.
- Современный браузер: Функция кэширования HTML 5 доступна во всех современных веб-браузерах.
Недостаток:
- Старый браузер : недоступно в старой версии HTML.