Большинство поставщиков браузеров внедряют функциональность автономных веб-приложений в HTML5. Это позволяет онлайн-приложению работать, даже если пользователь теряет или отключает интернет-соединение. Например, вы сможете составить сообщение в своем клиенте веб-почты, даже если вы не можете найти точку доступа Wi-Fi.
Пример, приведенный в этом посте, работает в Firefox 3.x. Это работает до некоторой степени в других браузерах — включая IE8. Однако реализации и наборы функций различаются. Оффлайн-технологии постоянно меняются, поэтому я не могу рекомендовать использовать этот код в производственной среде.
Существует три аспекта создания приложения с поддержкой автономного режима: указание необходимых файлов, определение времени отключения браузера и локальное сохранение данных.
Манифест с кешем
Ваш браузер не может получить доступ к файлам в автономном режиме, поэтому вам нужно указать, какие ресурсы требуются, чтобы их можно было кэшировать. Это достигается в манифесте кэша — это простой список необходимых файлов, например
CACHE MANIFEST
styles.css
jquery-1.4.min.js
offline.js
index.html
Сохраните этот файл как «offline.manifest» и укажите ссылку на него в html
<html manifest="offline.manifest">
Обратите внимание, что offline.manifest должен обслуживаться с MIME-типом text / cache-manifest.
Когда вы загружаете файл, браузер спросит, разрешаете ли вы хранить данные на вашем ПК.
Как определить, когда браузер переходит в автономный режим
Код JavaScript может определять, когда браузер подключен к сети или отключен с помощью navigator.onLine
Это свойство поддерживается большинством браузеров и возвращает значение true в режиме онлайн или значение false в автономном режиме.
Firefox также позволяет вам прикреплять обработчики к online
offline
// standard event listeners
window.addEventListener("online", function() { ... });
window.addEventListener("offline", function() { ... });
// or jQuery alternative
$(window).bind("online offline", function() { ... });
Сохранение данных локально
Хранение DOM — один из самых простых способов сохранения данных в автономном режиме. Вы можете использовать либо:
-
window.sessionStorage
-
window.localStorage
Оба объекта предлагают одинаковые методы:
-
setItem(string name, string value)
-
getItem(string name)
-
removeItem(string name)
-
length
-
key(long index)
-
clear()
Пример:
// set a session value
window.sessionStorage.setItem("key", "my data");
// get a session value - returns "my data"
window.sessionStorage.getItem("key");
Собираем все вместе
Посмотреть страницу примера …
Это не очень интересно, пока вы не выберите File> Work Offline в Firefox. Статус немедленно изменится на «OFFLINE». Затем вы можете ввести некоторые данные и нажать кнопку «Сохранить данные». Данные будут храниться локально, а не размещаться на сервере. Обновите страницу, и введенные вами значения появятся снова.
Пожалуйста, загрузите файлы, если вы хотите поближе взглянуть на код.