Използване на HTML5 за запазване на данни и работа офлайн Част 1

Серия съдържание:

Това съдържание е част # от поредица # статии: Използване на HTML5 за запазване на данни и работа офлайн

Това съдържание е част от поредицата: Използване на HTML5 за запазване на данни и работа офлайн

Очаквайте нови статии от тази серия.

Според съществуващите планове технологията HTML5 (HTML версия 5) ще получи статут на препоръка на Консорциума на световната мрежа (W3C) не по-рано от 2014 г. Въпреки че технологията HTML5 все още не е официален стандарт, доставчиците на уеб браузъри вече добавят и популяризират функциите на HTML5. Технологията HTML5 подобрява мрежата за уеб сайтове и бизнес приложения. Много уебсайтове, като например Amazon Kindle Cloud Reader, вече използват HTML5 технология. Следните две ключови характеристики на HTML5 значително ще променят бизнес приложенията: поддръжка за офлайн приложения и локално постоянно съхранение. Тъй като HTML5 не е официален стандарт, поддръжката му в браузърите в най-добрия случай не е еднаква.

Тази статия описва поддръжката за офлайн приложения и различните функции за постоянство, предлагани от предстоящия стандарт HTML5. Предоставено е образователно приложение като илюстрация на разглежданите функции.

Образователно приложение

Архитектура

Фигура 1. Архитектурен план на приложението

html5

html5

Модел на данни

Моделът на данните се състои от два обекта с данни, контакт и състояние (вижте Фигура 2). Таблицата с контакти съдържа действителната информация за контакт; таблицата със състояния съдържа стойностите на речника за списъка за избор на състояние.

Фигура 2. Модел на данни

използване

запазване

Сървърен интерфейс

Интерфейсът на сървъра се състои от два сървлета: ContactServlet и DictionaryServlet. Тези сървлети са описани в таблица 1 (имплементирането на тези сървлети, както и съответните бизнес услуги и доставчици на данни, е извън обхвата на тази статия).

Таблица 1. Описание на сървлети

Извикване на сървърния интерфейс

Кодът в листинг 1 показва как да извикате сървлета за контакт асинхронно, за да извлечете информация за контакт, съхранена в онлайн база данни. Този код използва функцията jQuery getJSON за извикване на сървлета за контакт.

Листинг 1. Извличане на информация за контакт от сървъра

Кодът в листинг 2 показва как да съхраните нов или актуализиран контакт на сървъра. Кодът използва функцията jQuery ajax. Кодът изпраща данни към сървлета за контакт чрез HTTP POST заявка.

Листинг 2. Съхраняване на информация за контакт на сървъра

Последната функция е да изтриете запис от онлайн базата данни. Листинг 3 показва как да изтриете запис от сървъра. За да извика сървлета за контакт, кодът използва функцията getJSON jQuery.

Листинг 3. Изтриване на информация за контакт на сървъра

Създаване на локален доставчик на данни

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

Спецификацията на HTML5 включваследните три технологии за постоянно съхранение.

  • localStorage - Технологията LocalStorage осигурява лесно съхранение на данни, използвайки плоско съхранение на ключ-стойност. Всички водещи уеб браузъри, включително Apple® Safari®, Google Chrome™, Microsoft® Windows® Internet Explorer®, Mozilla® Firefox® и Opera™ поддържат технологията localStorage. В спецификацията на HTML5 технологията localStorage е синхронна; в момента това е единственият механизъм за съхраняване на база данни, който се поддържа в множество платформи и множество браузъри.
  • WebSQL - WebSQL първоначално е проектиран да използва уеб браузър за достъп до база данни, базирана на Transact-SQL. Тази технология не изисква много усилия за научаване, защото е много подобна на системите за релационни бази данни като IBM® DB2®, Microsoft SQL Server®, Oracle® MySQL® Server и Oracle Database. Технологията WebSQL се поддържа от няколко браузъра, включително Safari, Chrome и Opera. Не се поддържа от браузърите Firefox и Internet Explorer. Тази технология вероятно няма да се използва, тъй като предложената по-рано спецификация на WebSQL вече не се разработва.
  • Индексирана база данни (Индексирана DB) – Технологията IndexedDB осигурява индексирано йерархично съхранение на ключ-стойност, подобно на много търговски предложения за съхранение в облак. Технологията WebSQL е отхвърлена в полза на технологията IndexedDB и технологията IndexedDB в момента се поддържа от браузърите Firefox и Chrome и в бъдеще ще се поддържа от Internet Explorer 10. API за IndexedDB е асинхронен и поддържа индексиране, заявки и транзакции.

Включен в тази статияПримерното приложение използва технологиите JSON и localStorage за постоянно съхранение, главно поради тяхната широка поддръжка на браузъра.

Локален доставчик на данни

Подходът localStorage съхранява данни за контакт и речник, като ги сериализира като JSON низ и съхранява този низ в localStorage. След като данните бъдат извлечени, те се десериализират като масив от JSON обекти и се обработват по съответния начин.

Локално съхранение на данни

Листинг 4. Запазване на данни в localStorage

Локално извличане на данни

Листинг 5. Четене на данни от localStorage

Локално изтриване на запис

Листинг 6 показва как да премахнете запис от localStorage.

Листинг 6. Премахване на запис от localStorage

Представеният код прави следното.

  • Чете база данни от локално хранилище и я десериализира.
  • Преминава през записите, докато намери contactId.
  • Задава флага isDeleted на true.
  • Уважава флага isDeleted във функцията за синхронизиране на данни (вижте раздела, озаглавен Синхронизиране на данни).
  • Съхранява данните в localStorage и актуализира структурата на данните.

Локално актуализиране и създаване на записи

Листинг 7 показва как да актуализирате съществуващ запис или да създадете нов запис в localStorage.

Списък 7. Актуализиране на запис в localStorage

Кодът, показан в листинг 7, прави следното.

  • Чете базата данни от localStorage и я десериализира.
  • Ако contactId на записа, който трябва да бъде запазен, е различен от нула (т.е. настъпила е актуализация), кодът се изпълняваитерира през записите, докато намери записа contactId. След това кодът го актуализира правилно.
  • Като алтернатива, ако записът е нов (contactId не е null), кодът намира следващия неизползван отрицателен contactId.
  • Присвоява го на нов запис.
  • Добавя нов запис към базата данни.

След това данните се сериализират като JSON низ и се съхраняват в localStorage. По време на синхронизация със сървъра, contactId е зададен на валидна стойност (по-голяма от нула). Отрицателните стойности имат временни идентификатори, използвани за идентифициране на нови записи.

Обърнете внимание на следните характеристики на технологията localStorage.

  • Размерите за съхранение са ограничени до 5 MB (ако имате нужда от по-голямо хранилище за данни, трябва да използвате технологията IndexedDB).
  • Тази технология се поддържа от всички водещи уеб браузъри.
  • Технологията работи само с низови стойности.

Следващата стъпка е изграждането на потребителския интерфейс с помощта на технологията HTML5.

Изграждане на потребителски интерфейс с помощта на HTML5 технология

Примерното приложение на Contact Manager има прост потребителски интерфейс с една страница. Този интерфейс поддържа операции за редактиране и изтриване за всеки запис и също така предоставя възможност за създаване на нови записи. CSS (Cascading style sheets) и динамичен HTML (чрез jQuery) технологии се използват за скриване и показване на подформуляри за създаване/редактиране, ако е необходимо.

За да предоставим на потребителя еднообразно изживяване, същата страницаизползва се както в онлайн, така и в офлайн режим; единствената разлика е кой доставчик на данни се извиква, когато операцията се изпълнява. Приложението на урока е показано на фиг. 3.

Фигура 3 Приложение Contact Manager

html5

използване

В допълнение, всички модули използват най-новата библиотека jQuery за проследяване на данни, асинхронни уеб заявки и поддръжка на динамичен HTML. Клиентът комуникира със сървъра чрез JSON.

Манифест на офлайн приложение

Офлайн възможностите на HTML5 осигуряват кеширане на статични файлове и ресурси. Файлът с манифест на офлайн приложение (.appcache) е основният файл за поддръжка на офлайн приложение за уеб приложение. Файлът на манифеста съдържа следната информация.

  • Ресурси и страници, достъпни офлайн.
  • Ресурси, достъпни само онлайн.
  • За ресурси, които не са достъпни офлайн, се показва резервна страница.

Файлът на манифеста има три секции: CACHE, NETWORK, FALLBACK. Страниците и ресурсите, изброени в раздела КЕШ, се кешират в локалната система. Страниците и ресурсите, изброени в секцията МРЕЖА, никога не се кешират и са достъпни само онлайн. Страницата, посочена в раздела FALLBACK, се показва, ако заявената страница не е достъпна офлайн. Знакът ( * ) в секцията МРЕЖА показва, че всички други страници и сървлети са достъпни само онлайн. Ако знакът ( * ) липсва, извикванията на сървлета ще бъдат неуспешни (дори в онлайн режим). Листинг 8 показва файла на манифеста за приложението Contact Manager.

Листинг 8. Манифест на офлайн приложение

Важна информация за работа софлайн приложения.

Онлайн или офлайн приложение

Формулярни събития (онлайн и офлайн обработка)

Приложението Contact Manager използва една и съща форма както онлайн, така и офлайн. За да работи това решение, са необходими манипулатори на събития на формуляр и бутон. Проверете стойността на променливата navigator.onLine, за да определите коя операция да се извика (локална или онлайн). Листинг 9 показва пример за зареждане на информация за контакт.

Листинг 9. Зареждане на данни (в събитието onLoad)

Синхронизиране на данни

Онлайн всички CRUD операции използват сървлети за операции за създаване, актуализиране и изтриване. Ако онлайн базата данни се промени, локалният кеш също се актуализира.

Офлайн, всички CRUD операции използват локалния доставчик на данни, за да запазят промените. След възстановяване на връзката със сървъра се извършват следните действия.

  • Всички записи, създадени в локалната система, се съхраняват на сървъра.
  • Всички записи, които са били променени в локалната система, се актуализират на сървъра.
  • Всички записи, които са били изтрити в локалната система, се изтриват на сървъра.

Пълният текст на метода за синхронизиране е показан в листинг 10. По време на синхронизиране се използват същите онлайн функции за създаване, актуализиране и изтриване на операции. Първата стъпка е да преминете през локалните публикации с помощта на функцията jQuery $.each.

Записите, които са актуализирани или създадени в локалната система, се маркират със свойството isDirty. Операция за запазване се идентифицира като нова, ако нейният уникален идентификатор на запис има отрицателна стойност (т.е. MySQL база даннине му е приписал никаква стойност). Записите, които са били изтрити в локалната система, се маркират със свойството isDeleted.

Листинг 10. Синхронизиране на офлайн промени със сървъра

Най-новите данни се извличат от базата данни с помощта на операцията getcontacts и се показват. Това ще отразява всички промени, направени от други потребители. След това тези данни се съхраняват локално, за да се гарантира, че са достъпни офлайн.

Заключение

Използвайки примера на приложение за обучение, статията демонстрира препоръки за поддържане на онлайн и офлайн режими на работа. Осигурява се последователно потребителско изживяване чрез използване на една и съща HTML страница както за онлайн, така и за офлайн режими и чрез извикване на подходящите онлайн/офлайн доставчици на данни в манипулатори на събития на формуляри според текущото състояние (онлайн или офлайн).

Алгоритъмът за синхронизиране на данни осигурява солидна основа; той синхронизира резултатите от офлайн създаване, изтриване и модифициране на записи. Все пак трябва да се отбележи, че този код все още не е готов за използване в производствена среда. Например, той не обработва конфликти, когато един и същ запис е променен от вас в локалната система и от друг потребител на сървъра.