В моем предыдущем посте я говорил о IndexedDB, базе данных в браузере. Это означает, что, как только мы сможем сохранить данные на клиенте, можно сделать наше веб-приложение доступным в автономном режиме. Для этого у нас есть API для кэширования приложений в автономном режиме .
Когда мы хотим перевести наше приложение в автономный режим, первое, что нам нужно сделать, — это создать файл манифеста. Основная функция этого файла описывает, какие файлы должны быть доступны в автономном режиме. Эти файлы будут загружены при первом посещении веб-приложения пользователями. Кроме того, если файл манифеста был изменен с момента последнего посещения, эти файлы будут загружены снова.
Файл манифеста
Начало файла манифеста всегда одинаково:
Манифест кэша
Ниже рекомендуется разместить комментарий с каким-либо номером версии / датой. Это необходимо, если вы хотите, чтобы браузер снова загружал файлы, поскольку вы изменили один или несколько файлов. Это связано с тем, что браузеры будут обновлять кэш своего приложения только при изменении файла манифеста, а не при изменении одного из ресурсов, описанных в файле. Это означает, что всякий раз, когда вы изменяете файл, описанный в файле манифеста, вы должны обновлять номер версии в комментарии.
# v3 2012-01-11
Теперь у нас есть три части в файле манифеста. Первый — явный раздел. Это означает, что все файлы, описанные в этом разделе, будут загружены. Это также раздел по умолчанию, поэтому нет необходимости явно указывать заголовок «CACHE:». Обратите внимание, что двоеточие после заголовка раздела обязательно. В явном разделе разрешены все виды файлов, например: html-файлы, изображения, js-файлы… Каждый ресурс, который вы хотите описать, занимает одну строку.
CACHE:
/Detault.htm
/Scripts/jquery-1.7.1.min.js
/Css/ui-lightness/jquery-ui-1.8.16.custom.css
/ Css / ui-lightness / images / ui-bg_diagonals-Thick_18_b81900_40x40 .png
Следующая часть файла манифеста опишет, какие файлы никогда не должны кэшироваться. Это относится к страницам, которые передают код, который выполняется на сервере. Например, страница входа. В этом разделе вы можете использовать символ «*» в качестве подстановочного знака. Это причудливый способ сказать, что все, что не находится в кэше приложения, все еще может быть загружено с исходного веб-адреса, если у вас есть подключение к Интернету. Это также означает, что все ресурсы на веб-странице будут кэшироваться, даже если они размещены в другом домене.
Подстановочный знак важен, если мы хотим предоставить «открытое» автономное веб-приложение. Это характерно для больших веб-приложений, которые мы хотим сделать доступными в автономном режиме, таких как Википедия.
СЕТЬ:
/Logon.apsx
/ Secure
*
В последней части файла будут описаны механизмы восстановления. Если вы работаете в автономном режиме и запрашиваете ресурсы, которые недоступны в автономном режиме, будут показаны настроенные ресурсы.
FALLBACK:
/ /HTML/Offline.htm
Оффлайн доступные веб-страницы
Все веб-страницы, которые мы хотим использовать в автономном режиме, нуждаются в атрибуте manifest со ссылкой на файл manifest. Таким образом, браузер знает, где он может найти файл, описывающий автономные ресурсы.
<html manifest="/cache.manifest">
Неважно, где файл манифеста находится на сервере. Единственное, что вам нужно, это правильный путь к нему. Существует два расширения, которые обычно используются для файла манифеста. Это «.manifest» и «.appcache». Неважно, какой из них вы используете, если расширения распознаются вашим веб-сервером. В IIS 7.0 или выше существует MIME-тип для .manifest.
Если вы используете веб-сервер Apache, вы можете использовать директиву AddType в вашем широком httpd.conf, добавив следующие строки:
AddType text / cache-manifest .appcache «доступ плюс 0 секунд»
AddType text / cache-manifest .manifest «доступ плюс 0 секунд»
Чтобы избежать риска кэширования файлов манифеста, рекомендуется установить заголовки expires на вашем веб-сервере для файлов манифеста, чтобы они немедленно истекали. В Apache вы можете настроить это следующим образом:
ExpiresByType text / cache-manifest «доступ плюс 0 секунд»
Для IIS 6.0 вы можете найти объяснение здесь .
События кеша приложений
API для автономного кэширования приложений также предоставляется с некоторыми событиями:
| Мероприятие | Описание |
| проверка | Срабатывает, когда браузеры замечают атрибут manifest в теге html, даже если вы уже посетили страницу |
| загрузка | Запускается, если браузер начинает загрузку файлов, описанных в файле манифеста |
| Прогресс |
Периодически срабатывает при загрузке. Содержит информацию о количестве загруженных файлов и количестве файлов, которые все еще находятся в очереди |
| Сохраненная копия |
Срабатывает, когда все файлы в файле манифеста загружены. Веб-приложение полностью кэшировано и готово к работе в автономном режиме. Это только в том случае, если данные загружаются из файла манифеста впервые. |
| Noupdate |
Срабатывает, если вы посещаете страницу с автономным режимом и файл манифеста не изменился. |
| Updateready |
Возникает при успешной загрузке файлов, описанных в файле манифеста. Новая версия веб-приложения теперь полностью кешируется. Это тот случай, если данные из файла манифеста когда-либо загружались в прошлом. |
| ошибка | Срабатывает, когда что-то идет не так. Возможные причины: — ошибка HTTP 404 (страница не найдена) — ошибка HTTP 410 (окончательно исчезла) — страница не удалось загрузить должным образом — файл манифеста изменился во время обновления — браузеру не удалось загрузить один из ресурсов, перечисленных в файле манифеста |
| устарелый | Манифест не был найден. Возможные причины: — Ошибка HTTP 404 (страница не найдена) — Ошибка HTTP 410 (окончательно исчезла) Это означает, что кэш приложения был удален. |
Рекомендуется вызывать метод window.applicationCache.SwapCache () при возникновении события Updateready. Это заставляет браузер переключаться на самый последний кэш приложения. Если вы забыли это сделать, пользователю необходимо перезагрузить веб-страницу, чтобы воспользоваться новой версией.
Состояние браузера
В объекте окна у нас есть интерфейс «NavigatorOnline», который предоставляет нам информацию о состоянии браузера. Если атрибут «onLine» имеет значение false, мы можем быть уверены, что браузер определенно отключен. Если атрибут имеет значение true, браузер может быть подключен к сети, но это не точно.
window.navigator.onLine
Есть также 2 события. Событие в сети и в автономном режиме, которое запускается, когда браузер подключается к сети или отключается. Вы можете прикрепить события следующими способами:
- используя addEventListener в окне, документе или document.body
- Установка свойств .ononline или .onoffline для документа или document.body для функции JS. (По некоторым причинам window.ononline и window.onoffline не будут работать)
- Указав атрибуты ononline или onoffline в элементе <body> в HTML.
Обратите внимание, что при использовании первых двух решений вы можете прикреплять события только после события загрузки страницы.