Використання можливостей HTML5 для збереження даних та офлайнової роботи Частина 1

Серія контенту:

Цей контент є частиною # із серії # статей: Використання можливостей HTML5 для збереження даних та офлайнової роботи

Цей контент є частиною серії: Використання можливостей HTML5 для збереження даних та офлайнової роботи

Слідкуйте за виходом нових статей цієї серії.

Згідно з існуючими планами, технологія HTML5 (HTML version 5) набуде статусу Рекомендації організації World Wide Web Consortium (W3C) не раніше 2014 року. Хоча технологія HTML5 ще не є офіційним стандартом, постачальники веб-браузерів вже додають та просувають HTML5-функції. Технологія HTML5 розширює веб-можливості для сайтів в Інтернеті та бізнес-додатків. Багато веб-сайтів, таких як Amazon Kindle Cloud Reader, вже використовують технологію HTML5. Наступні дві ключові функції HTML5 суттєво змінять бізнес-програми: підтримка офлайнових додатків та локальне персистентне сховище. Оскільки технологія HTML5 не є офіційним стандартом, її підтримка різними браузерами у кращому разі не однакова.

У цій статті описується підтримка офлайнових додатків та різні можливості персистентного зберігання, які пропонує майбутній стандарт HTML5. Як ілюстрацію до розглянутих функцій наводиться навчальний додаток.

Навчальний додаток

Архітектура

Малюнок 1. Архітектурний план програми

можливостей

html5

Модель даних

Модель даних і двох об'єктів даних, contact і state (див. рис. 2). Таблиця contact містить фактичні контактні відомості; таблиця state містить значення словника списку вибору стану.

Малюнок 2. Модель даних

збереження

збереження

Інтерфейс сервера

Інтерфейс сервера і двох сервлетів: ContactServlet і DictionaryServlet . Ці сервлети описані в таблиці 1 (реалізація цих сервлетів, а також відповідних бізнес-сервісів та провайдерів даних виходить за рамки цієї статті).

Таблиця 1. Опис сервлетів

Виклик інтерфейсу сервера

Код у лістингу 1 показує, як здійснити асинхронне звернення до сервлета contact з метою отримання контактних відомостей, що зберігаються в онлайновій базі даних. Цей код використовує jQuery-функцію getJSON для виклику сервлета contact.

Лістинг 1. Вилучення контактних даних із сервера

Код у лістингу 2 показує, як зберегти новий чи оновлений контакт на сервері. Код використовує jQuery-функцію ajax. Код надсилає дані в сервлет contact за допомогою HTTP-запиту POST .

Лістинг 2. Збереження контактних даних на сервері

Остання функція полягає у видаленні запису з онлайнової бази даних. У лістингу 3 показано, як видалити запис із сервера. Щоб викликати сервлет contact, код використовує jQuery-функцію getJSON .

Лістинг 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 більше не розвивається.
  • Indexed database (Indexed DB) - Технологія IndexedDB надає індексоване ієрархічне сховище типу ключ-значення, подібне до багатьох комерційних пропозицій для хмарного зберігання даних. Технологія WebSQL була відкинута на користь технології IndexedDB і в даний час технологія IndexedDB вже підтримується браузерами Firefox та Chrome, а в майбутньому підтримуватиметься браузером Internet Explorer 10. API-інтерфейс для IndexedDB є асинхронним та підтримує індексацію, запити та транзакції.

Включено до цієї статтінавчальний додаток використовує технології JSON та localStorage для персистентного зберігання переважно через їх широку підтримку браузерами.

Локальний провайдер даних

Підхід localStorage зберігає контактні та словникові дані за допомогою їх серіалізації у вигляді рядка у форматі JSON та збереження цього рядка у сховищі localStorage. Після отримання даних вони десеріалізуються у вигляді масиву JSON-об'єктів і обробляються відповідним чином.

Локальне збереження даних

Лістинг 4. Збереження даних у localStorage

Локальне вилучення даних

Лістинг 5. Читання даних із localStorage

Локальне видалення запису

У лістингу 6 показано, як видалити запис з локальногопомешкання.

Лістинг 6. Видалення запису з localStorage

Цей код виконує такі дії.

  • Читає базу даних із локального сховища та здійснює її десеріалізацію.
  • Виконує ітеративне проходження за записами, доки знаходить contactId .
  • Встановлює прапор isDeleted у стан true .
  • Враховує прапорець isDeleted у функції синхронізації даних (зверніться до розділу під назвою Синхронізація даних).
  • Зберігає дані в localStorage і оновлює структуру даних.

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

У лістингу 7 показано, як оновити існуючий запис або створити новий запис localStorage.

Лістинг 7. Оновлення запису в localStorage

Показаний у лістингу 7 програмний код виконує такі дії.

  • Читає базу даних з localStorage та здійснює її десеріалізацію.
  • Якщо ідентифікатор contactId запису, що підлягає збереженню, не дорівнює нулю (тобто відбулося оновлення), код виконуєітеративне проходження за записами, доки знайде запис contactId . Після цього код здійснює її належне оновлення.
  • Як альтернативний варіант, якщо запис є новим (ідентифікатор contactId не дорівнює нулю), код знаходить наступний невикористаний негативний ідентифікатор contactId .
  • Надає його новому запису.
  • Додає новий запис до бази даних.

Потім дані серіалізуються як JSON-рядки і зберігаються в localStorage . У процесі синхронізації з сервером ідентифікатору contactId надається допустиме значення (більше за нуль). Негативні значення мають часові ідентифікатори, які використовуються для ідентифікації нових записів.

Необхідно враховувати такі особливості технології localStorage.

  • Розміри сховища обмежені величиною 5 МБ (якщо потрібне сховище даних більшого обсягу, слід використовувати технологію IndexedDB).
  • Ця технологія підтримується всіма провідними веб-браузерами.
  • Технологія працює лише з рядковими значеннями.

Наступний крок полягає в побудові інтерфейсу користувача за допомогою технології HTML5.

Побудова інтерфейсу користувача за допомогою технології HTML5

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

З метою надання користувачеві однакових можливостей та сама сторінкавикористовується і в онлайновому, і в режимах офлайн; єдина різниця полягає в тому, виклик якого провайдера даних здійснюється під час виконання операції. Навчальний додаток показано на рис. 3.

Малюнок 3. Contact Manager

збереження

даних

Крім того, всі модулі використовують останню версію бібліотеки jQuery для простеження даних, асинхронних веб-запитів і підтримки dynamic HTML. Клієнт взаємодіє із сервером за допомогою JSON.

Маніфест офлайнової програми

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

  • Ресурси та сторінки доступні в офлайновому режимі.
  • Ресурси доступні лише в режимі онлайн.
  • Для ресурсів, які не доступні в офлайновому режимі, відображається fallback-сторінка.

Файл маніфесту складається з трьох розділів: CACHE, NETWORK, FALLBACK. Сторінки та ресурси, перелічені у розділі CACHE, кешуються на локальній системі. Сторінки та ресурси, перелічені в розділі NETWORK, ніколи не кешуються та доступні лише в онлайновому режимі. Сторінка, зазначена в розділі FALLBACK , відображається, якщо потрібна сторінка недоступна в режимі офлайн. Символ ( * ) у розділі NETWORK вказує, що всі інші сторінки та сервлети доступні лише в режимі онлайн. Якщо символ ( * ) відсутній, дзвінки сервлета будуть невдалими (навіть у режимі онлайн). У лістингу 8 показано файл маніфесту для Contact Manager.

Лістинг 8. Маніфест офлайнової програми

Важлива інформація для роботи зофлайновими додатками.

Онлайнова або офлайнова програма

Події форм (обробка в онлайновому та офлайновому режимі)

У програмі Contact Manager одна й та сама форма використовується і в онлайновому, і в офлайновому режимі. Щоб це рішення працювало, необхідні обробники подій форм та кнопок. Перевірте значення змінної navigator.onLine для визначення того, яку операцію слід викликати (локальну або онлайнову). У лістингу 9 показаний приклад завантаження контактних даних.

Лістинг 9. Завантаження даних (у події onLoad)

Синхронізація даних

В онлайновому режимі всі CRUD-операції використовують сервлети для операцій створення, зміни та видалення. Якщо змінюється онлайнова база даних, локальний кеш також оновлюється.

У режимі офлайн всі CRUD-операції для збереження змін використовують локального провайдера даних. Після відновлення з'єднання з сервером виконуються такі дії.

  • Усі записи, створені на локальній системі, зберігаються на сервері.
  • Усі записи, змінені на локальній системі, оновлюються на сервері.
  • Усі записи, видалені на локальній системі, видаляються на сервері.

Повний текст методу синхронізації показаний у лістингу 10. У процесі синхронізації одні й самі онлайнові функції використовуються для операцій створення, оновлення й видалення. Перший крок полягає в ітеративному проходженні локальних записів за допомогою jQuery-функції $.each.

Записи, які були оновлені або створені на локальній системі, позначаються за допомогою властивості isDirty. Операція Save (зберегти) ідентифікується як нова, якщо її унікальний ідентифікатор запису має негативне значення (тобто база даних MySQLне надала йому будь-якого значення). Записи, які були видалені на локальній системі, позначаються за допомогою властивості isDeleted.

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

Найсвіжіші дані вилучаються з бази даних за допомогою операції getcontacts та відображаються. При цьому буде відображено будь-які зміни, зроблені іншими користувачами. Після цього ці дані зберігаються на локальній системі, щоб гарантувати їх доступність в офлайновому режимі.

Висновок

На прикладі навчального додатка у статті були продемонстровані рекомендації щодо підтримки онлайнового та офлайнового режимів роботи. Єдині користувацькі можливості забезпечуються за допомогою використання однієї й тієї ж HTML-сторінки для онлайнового та офлайнового режимів, а також за допомогою виклику належних онлайнових/офлайнових провайдерів даних в обробниках подій форм відповідно до поточного стану (онлайнового або офлайнового).

Алгоритм синхронізації даних забезпечує надійний фундамент; він здійснює синхронізацію результатів офлайнового створення, видалення та зміни записів. Слід, проте, відзначити, що це програмний код ще готовий до використання у виробничому середовищі. Наприклад, він не обробляє конфліктів, коли той самий запис змінено вами в локальній системі та іншим користувачем на сервері.