HTML5 AppCache и IndexedDB

Пользователи хотят, что бы их веб-сайты или приложения хорошо работали, даже если нет недоступна к интернету. Соответственно разработчики хотят включить доступ к данным, когда нет подключения к интернету, или когда устройство отключено от сети.

В этой статье Я покажу, как создать автономные веб-сайты и приложения, используя новые возможности HTML5:

  • AppCache — локально хранит файлы ресурсов и открывает к ним доступ в автономном режиме.
  • IndexedDB — локально хранения структурированные данные, к ним также можно получить доступ.
  • DOM Storage — локально хранит небольшое количество текстовой информации.
  • Offline поиск событий, если произошло подключение к сети, синхронизация.

Пример HTML5 AppCache:

Допустим, вы ходите по магазинам с распечаткой рецептов от вашего любимого сайта продуктов, но когда вы находитесь на рынке, вы не можете найти некоторые ключевые компоненты.

Представьте себе, что когда вы были подключены к интернету и с помощью мобильного устройства и смотрели любимый сайт продуктов, с помощью HTML5 AppCache часть сайта была автоматически загружена для автономного использования. Это позволит вам найти нужный рецепт на будучи на рынке не   подключенным к сети интернет. Как потребитель, вы оцените эту возможность, потому что сайт будет работать, когда он вам нужен.

Offline результаты поиска по 'пирог' слово, используя рецепт сайта.
Строка состояния показывает автономном режиме

Offline слово ‘cake’, результаты поиска по сайту продуктов.

Как разработчик, вы можете включить эти типы сценариев с сочетанием технологий: AppCache, IndexedDB, DOMStorage и WebSockets (или XHR ). До изучения отдельных технологий, давайте рассмотрим преимущества.

Стиль Metro в Windows для приложений или веб-сайтов в автономном режиме, технологии позволяют обрабатывать неудачные подключения. Представьте, что ваш пользователь заполняет веб-форму , и он теряет подключение к сети. Разработка позволяет вашему приложение корректно работать независимо от того, подключен он к сети или нет. Ваше приложение всё равно будет работать.

Для более сложных сценариев, веб-сайты и приложения позволяют пользователям создавать новый контент и для хранения новых данных, даже если приложение полностью в автономном режиме. Представьте себе, Outlook Web Access (OWA), Hotmail, GMail работающие в автономном режиме.

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

Локальный кэш файлов, используя AppCache

AppCache позволяет создавать локальный кэш загруженные в файл, к которому вы можете получить доступ в автономном режиме или использовать его подключенному к сети. Представьте себе, что трехлетний ребенок использует ноутбук для загрузки интерактивной игры из домашней сети. Если ресурсы приложения хранятся локально, то ребенок может продолжать играть в эту игру во дворе, где нет подключения к сети.

AppCache создания потока.
Создания потока AppCache

AppCache использует файл манифеста для указания ресурса URI, для того, чтобы кэшировать контент с веб-сайта. Кэширование происходит в фоне, после браузер отображает веб-страницы, что позволяет определить файлы манифеста для загрузки. Это гарантирует, что ресурсы загружаются на машине локально, как единое целое в рамках одной транзакции, для создания локального кэша. Если один ресурс не удается скачать, без он кэша не создастся. Для обновления информации, хранящейся в кэше, надо обновить файл манифеста на вашем сервере. Когда в очередной раз пользователь получает доступ к сайту, браузер сравнивает файл манифеста на сервере с последней сохраненной копией. Если сохраненная копия манифеста отличается от серверной, новая версия кэш создается с использованием содержимого, происходит обновление файла манифеста.

AppCache также позволяет Internet Explorer и приложений стиля Metro доступ к ресурсам кэшированных с использованием традиционных URL. Это позволяет вводить URL в окне браузера и доступа к этой информации без какого-либо сетевого подключения.

В целом, у AppCache есть некоторые преимущества по сравнению с кэшированием HTTP. Кэширование HTTP не гарантирует, что кэшированные ресурсы будут доступны в TIF (Temporary Internet Files) когда они очищаются. Тем не менее, HTTP кэширования могут быть использованы для оптимизации AppCache, указав кэшированные ресурсы. Это позволит определить, это загруженный ресурс из интернета или скопирован из кэша, когда новая версия локального кэша не создается.

Кэш с использованием IndexedDB

IndexedDB — это локальная база данных предназначена для хранения объектов JavaScript на локальной машине, что позволяет быстро показать объекты которые используют JavaScript. Представьте использование канала RSS, WebSocket, или соединение XHR что периодически обновляет эту базу данных.

IndexedDB позволяет манипулировать объектами JavaScript напрямую. Преимущество использования indexedDB для поиска информации на местном уровне. Это значит что вы всегда поддерживаете актуальность данных, которые кэшируются на локальной системе.

Показывает список рецептов, хранящиеся на локальном компьютере доступны через IndexedDB
Строка состояния показывает автономном режиме

IndexedDB это технология, созданная с концепций баз данных ISAM. Как и многие веб-технологии, он предназначен для низкоуровневого API, которые могут  использовать различные библиотеки. В следующей таблице сравниваются концепции IndexedDB развития с аналогичными понятиями реляционной модели.

Концепция Реляционная БД IndexedDB
База данных База данных База данных
Таблицы Таблицы содержат столбцы и строки ObjectStore содержит объекты Javascript и ключи
Механизм запросов, регистрации и фильтры SQL Курсор API, ключевые интерфейсы Range, и применение кода
Типы транзакций и замки Блокировка может происходить в базе данных, таблицы или строки в READ_WRITE Блокировка может происходить на базе данных на VERSION_CHANGE, по objectStores на READ_ONLY и READ_WRITE. Существует или нет блокировки уровня объектов.
Транзакции Транзакция является создание явной. По умолчанию для отката, если я называю фиксацию. Транзакция является создание явной. По умолчанию совершить, если я называю прервать или есть исключение, которое не найдены.
Поиски свойст SQL Индексы которые необходимы для опроса свойств объекта непосредственно
Records / данных Форма и однозначные свойства Многозначные свойства и формы

При использовании IndexedDB, вы будете создавать базы данных, которые сохраняют объекты (контакты, сообщения электронной почты, встречи и т.д.). Эти объекты хранят содержащие и объекты JavaScript, необходимые для работы приложения. Каждый объект JavaScript ждёт уникальный идентификатор доступный через ключевые пути. Кроме того, объект будет хранить содержание индексов и свойств, которые могут быть использованы для запроса набора данных (Письма — темы, даты и т.д.). Фильтры будут использованы для организации или уменьшения результирующего набора с помощью KeyRanges.

Следующий фрагмент кода показывает, как читать книги из базы данных:



var oRequestDB = window.indexedDB.open("Library");
oRequestDB.onsuccess = function (event) {
db1 = oRequestDB.result;
if (db1.version == 1) {
txn = db1.transaction(["Books"], IDBTransaction.READ_ONLY);
var objStoreReq = txn.objectStore("Books");
var request = objStoreReq.get("Book0");
request.onsuccess = processGet;
}
};


Информация содержащаяся в объектах всегда хранит доступен для чтения или записи в контексте. Есть три вида операций:

  • VERSION_CHANGE — используется для создания или обновления объектов в хранилище. Потому что VERSION_CHANGE операция блокировки наполнения база данных и предотвращение параллельных операций, они не рекомендуют читать и писать записи в базе данных.
  • READ_WRITE — запись, содержащаяся в объекте магазинов, которые будут добавлены, читать, изменять и удалять.
  • READ_ONLY —  запись, содержащаяся в объекте магазинах только для чтения.

Асинхронные модели API предоставляемые IndexedDB использует запрос / ответ поддерживается многими API-интерфейсы, таких как XHR. Запросы направляются в локальный процесс IndexedDB и результаты обрабатываются с помощью обработчики событий OnSuccess или OnError. Кроме того, не существует четкого механизма для совершения процесса. Процессы происходят, когда Есть ожидающие запросы на сервере, а не в ожидании результатов на стороне клиента. Кроме того, до приложения для обработки исключений и ошибок событий. Во многих случаях, если исключение или ошибка события не обработана, то процесс отменяется.

Таким образом, IndexedDB является оптимизированным механизмом для запроса данных объектов с помощью индексов. Он обеспечивает сайты с интерфейсами API для доступа большого количества данных и фильтровать данные с помощью объектов KeyRange.

Локальные тесты с DOM Storage & Offline

Сайты могут использовать хранения DOM и подключение событий для обработки небольших объемов текстовых данных и обнаружения неудачных соединений. Представьте себе игру, которая использует эти технологии для отслеживания счета игроков в автономном режиме. Что произойдет, если вы получили высокий балл, когда не было подключения к сети. Будет ли веб-страница зависать?

Так как эти данные текстовые по своей природе и не требует много места, вы можете использовать DOM Storage для хранения информации локально, он не требует подключения к сети и загрузки его на более длительное время, когда сеть доступна. DOM Storage поддерживает больше данных и не требует кодирования данных. Кроме того, DOM Storage не отправляет данные на сервер при каждом запросе, и может быть ограничен для доступа к домену или сессий.

Снимок экрана игра, использующая DOM Storage для записи высокие баллы.

Использовать эту технологию, так же просто, как и доступ к объекту windows.localStorage. В этом объекте, вы можете проверить или добавить пары name/value в виде свойства. Следующий фрагмент кода показывает, как хранить локально счет игры с помощью localStorage:



<script>
var lStorage;
function init() {
if (window.localStorage) {
lStorage = window.localStorage;
if (typeof lStorage.score == 'undefined')
lStorage.score = 0;
document.getElementById('score').innerHTML = lStorage.score;
}
}
function save() {
if (lStorage) {
lStorage.score = getGameScore();
}
}
</script>
...
<body onload="init();">
<p>
Ваша последняя оценка: <span id="score">последняя попытка вставить в init()</span>
</p>
</body>


Кроме того, события offline/online поможет вам определить, когда у вас есть доступ к сети, чтобы вы могли обновить данные на сервере. Например, вы можете определить, когда вы в Интернете и обновлять базу данных информацией с сервера, используя WebSockets или XHR.

Это так же просто, как проверка состояния navigator.onLine. Следующий код показывает, как зарегистрировать события offline/online:



function reportConnectionEvent(e) {
if (!e) e = window.event;
if ('online' == e.type) {
alert('The browser is ONLINE.');
}
else if ('offline' == e.type) {
alert('The browser is OFFLINE.');
}
}
window.onload = function () {
status = navigator.onLine; //retrieve connectivity status
document.body.ononline = reportConnectionEvent;
document.body.onoffline = reportConnectionEvent;
}


В приложениях стиля Metro, есть дополнительные API, Windows.ApplicationData, что позволяет хранить больше типов данных на местном уровне и позволяет им перемещаться между несколькими машинами.

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

WebSockets и XHR

Обновление локальных данных с помощью WebSockets и XHR. Для некоторых сценариев, данные пользователя будут продолжать работать в сети, чтобы быть легко доступным с любого устройства. Таким образом, вы должны убедиться, что кэшированные данные остается актуальным. Для этого вам нужно создать каналы для синхронизации данных между сетью и приложением. Вы можете использовать WebSockets и XHR для облегчения синхронизации. Это требует от вас пакет данных передаваемых форматов (например, XML или JSON), используйте XHR или WebSockets чтобы передать эти ресурсы для клиента, а затем с помощью XML или JSON парсеров для создания объектов JavaScript, которые будут храниться в базе данных IndexedDB. Это также может быть использовано для загрузки информации, хранящейся на сервере DOM Storage.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>