AppCache — это аббревиатура от Application Cache. Как следует из названия, AppCache — это метод реализации автономных веб-приложений HTML5.
Ну, вы можете подумать, что это противоречит традиционной концепции веб-приложений, потому что веб-страницы всегда загружаются и обслуживаются пользователям. Итак, как вы можете загружать страницы, если вы не в сети? Ответ — нет, мы не можем. Но страницы могут быть загружены, когда пользователь находится в сети, а затем кэшированы для последующего использования в автономном режиме.
Вот как работает AppCache. Когда вы переходите на веб-страницу, которая включена в автономном режиме, браузер загружает и кэширует страницу в фоновом режиме. Позже, когда вы попытаетесь получить доступ к странице в автономном режиме, браузер извлекает страницу из своего кэша и загружает ее для вас. Довольно интересно, а?
Итак, в этом уроке я подробно объясню, как AppCache работает и как можно создавать классные приложения HTML5, работающие в автономном режиме. В конце концов, есть также демонстрационное приложение для создания блокнота. Вы можете попробовать это и загрузить исходные файлы.
Примечание. Перед дальнейшим изучением ознакомьтесь с таблицей совместимости, чтобы узнать, какие браузеры поддерживают функцию AppCache.
Основы:
Вы можете подумать, как работает весь процесс и как браузер решает, какие страницы кэшировать. Что ж, давайте узнаем. Все начинается с простого файла Cache Manifest . Файл манифеста кэша хранит все ресурсы, которые необходимо загрузить и кэшировать для автономного доступа. Файл должен заканчиваться расширением .manifest
Чтобы начать процесс кэширования, вам нужно просто указать браузеру этот файл манифеста. Как это сделать? Просто добавьте атрибут с именем manifest<html>
Например, если вы хотите, чтобы страница index.htmlmycache.manifestmanifest
<html manifest="mycache.manifest">
<head>
<title>Offline Page</title>
</head>
</html>
Внутри файла манифеста вы можете добавить список ресурсов, которые необходимо кэшировать. Поскольку страница index.html
Примечание. Файл манифеста должен обслуживаться сервером с типом mime text/cache-manifest Если вы используете Apache, это просто вопрос размещения .htaccess
AddType text/cache-manifest .manifest
Что происходит внутри манифеста?
Мы уже обсуждали файл манифеста, в котором перечислены все ресурсы, которые должны быть доступны в автономном режиме. Но как? Какой формат? Ну, файл манифеста имеет четыре необязательных раздела:
- КЭШ
- СЕТЬ
- ОТСТУПАТЬ
- НАСТРОЙКИ
Однако каждый файл манифеста начинается со следующего содержимого:
CACHE MANIFEST
В следующих строках вы можете добавить ресурсы, которые необходимо кэшировать. В следующем примере в файл манифеста добавляются 3 ресурса scripts.jsstyle.csspicture.jpg Поскольку имя раздела не указано, эти ресурсы неявно находятся в разделе CACHE
CACHE MANIFEST
scripts.js
style.css
picture.jpg
Теперь давайте предположим, что index.htmlmanifest Когда браузер впервые обращается к этой странице, он обнаруживает, что существует файл манифеста, связанный с этой страницей. Итак, браузер просматривает список ресурсов, присутствующих в манифесте, и начинает загружать их в фоновом режиме. Обратите внимание, что страница index.html
Вышеупомянутый фрагмент достаточно для любого приложения, которое имеет одну страницу. Но что вы делаете, если у вас есть несколько страниц? В этом случае вам просто нужно добавить имя каждой из страниц, которые должны быть кэшированы, в файл манифеста. Если вы этого не сделаете, браузер не сможет узнать, есть ли в веб-приложении другие страницы, которые должны быть доступны в автономном режиме. Есть еще один способ добиться этого. Вы можете сделать так, чтобы каждая из страниц в приложении указывала на файл манифеста. Когда браузер получит доступ к страницам, он автоматически начнет их загрузку.
Теперь, когда вы знаете основы манифеста, давайте перейдем к различным разделам, доступным в файле.
КЭШ:
В этом разделе перечислены все ресурсы, которые должны быть загружены и храниться локально. Как только страница будет загружена, браузер начнет загружать эти ресурсы в фоновом режиме. Однако, если некоторые ресурсы уже находятся в кэше, они не будут загружены повторно.
СЕТЬ:
В этом разделе перечислены URL-адреса, которые никогда не должны кэшироваться. Например, ваша страница может включать вызов скрипта, который динамически загружает котировки акций. Таким образом, этот тип ресурса не будет кэшироваться и отключаться. Вместо этого данные будут получены из исходного источника при условии, что у вас есть подключение к интернету.
СЕТЬ:
фондовый quote.php
КЭШ:
style.css
scripts.js
picture.jpg
Вы также можете добавить * в раздел NETWORK, что означает, что любой ресурс, который не находится в кэше, может быть загружен через Интернет.
ОТСТУПАТЬ:
FALLBACK — это умный способ указать страницу для отображения в случае, если какой-либо ресурс не найден в кэше приложения.
CACHE MANIFEST
ОТСТУПАТЬ:
/ /offline-message.html
‘/’ Имеет особое значение в разделе FALLBACK. Это означает, что если какая-либо страница не найдена в кэше приложения, вместо отображения ошибки будет отображаться offline-message.html
НАСТРОЙКИ:
Это включает в себя настройки поведения кэша приложения. В настоящее время Cache Mode Может быть установлено prefer-online
Общий поток событий:
Пока весь процесс работает, запускается цепочка событий. Подводя итог, позвольте мне дать четкую картину этих событий, запущенных в процессе кэширования.
- Когда браузер находит атрибут
manifest<html>checking event - Если файл манифеста является совершенно новым для браузера, он сделает следующее:
- Браузер начнет загружать ресурсы, указанные в манифесте, после запуска события
downloadingВо время загрузки браузер будет периодически запускать событияprogress - После того, как ресурсы загружены,
cached
- Если браузер уже натолкнулся на файл манифеста, он выполнит одно из следующих действий:
- Если манифест не был изменен, он ничего не делает.
- Если файл манифеста был изменен, браузер запустит событие
downloadingКак обычно, при загрузке файлов событияprogress - Как только загрузка завершена, событие
updateready
Во время описанного выше процесса, если возникнет какая-либо ошибка, браузер сгенерирует событие ошибки.
Обратите внимание, что во время загрузки, если какой-либо из ресурсов не может быть загружен по какой-либо причине, общий кэш будет игнорироваться и событие ошибки будет поставлено в очередь.
Давайте создадим автономное приложение:
В моем последнем уроке я объяснил, как создать приложение блокнота с использованием indexedDB. Теперь давайте сделаем это в автономном режиме!
Сначала попробуйте демо-версию приложения здесь . Это в основном приложение для создания заметок, которое работает с использованием JavaScript и API indexedDB. Просто зайдите на страницу. Отключите интернет и зайдите на страницу снова. Вы по-прежнему сможете получить доступ к веб-приложению из-за кэша приложений. Если вы загрузите приложение целиком, вы найдете следующие файлы в корневом каталоге приложения.
- add.png
- back.png
- bullet.png
- delete.png
- notebook.png
- index.html
- style.css
Итак, вот 3 простых шага, которые необходимо выполнить, чтобы добавить автономную поддержку любого приложения HTML5.
Первый шаг:
Создайте файл .htaccess
AddType text/cache-manifest .manifest
Второй шаг:
Создайте файл манифеста, в котором будут перечислены ресурсы, которые должны быть кэшированы. Назовите это mycache.manifest Затем добавьте все ресурсы в файл.
Манифест кэша
add.png
back.png
bullet.png
delete.png
notebook.jpg
style.css
Третий шаг:
Добавьте manifest<html>index.html Значение атрибута должно быть mycache.manifest
Теперь мы сделали! У нас есть совершенно новое приложение HTML5, которое прекрасно работает в автономном режиме.
Пример кода для автономного приложения «Блокнот» прилагается для загрузки.
Вывод:
Ну, перевод веб-приложений в автономный режим — это действительно революция AppCache открывает двери для многих возможностей. С его помощью вы можете создавать приложения, работающие в автономном режиме, начиная с настольных браузеров и заканчивая мобильными браузерами. Вы даже можете упаковать эти автономные веб-приложения в приложения для Android или iOS. То, что вы делаете с этим, зависит от вашего творчества. Итак, просто поиграйте с App Cache, поэкспериментируйте и начните разрабатывать потрясающие оффлайн-приложения