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

Рейтинг:   / 0
ПлохоОтлично 

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

Т.е. если вы очень хороший специалист в C++, то это совсем не значит, что вам надо писать свои ISAPI фильтры или CGI не виданных сложностей, может быть можно обойтись и малой кровью: парой HTML страничек и каким-то количеством JavaScript + CSS? Тем более, что задача-то может быть в заполнении веб-формочек и отсылке их серверу на растерзание.

Вот так и я, раздумывая над своими целесообразностями, возможностями, отведённым временем и бюджетом стал я склоняться всё больше и больше к вопросу построения архитектуры на базе offline Web-application / HTML5 (со всеми вытекающими из этого localStorage и так далее). Поскольку рынок планшетных компьютеров сейчас довольно интересен, а Apple очень удачно ведёт борьбу против конкурентов путём их травли и «вышибания с ранка», то можно спрогнозировать, что конкуренты, и производители устройств, и производители ОС будут бороться упорно и на рынке сегодня-завтра надо ожидать максимально конкурентоспособных продуктов, которые можно сопоставить с устройствами Apple – iPad2 на базе iOS 4.x или iOS 5.

Оговорюсь, что пишу я это всё в рамках iOS и в связи с моими публикациями. Выбранная архитектура  на 99% - автономное веб-приложение. Без маленького добавления — его будет нельзя тупа из Сафари «сохранить на десктоп», а по этому ему не понадобится манифест. Хотя этот момент я тоже отмечу в статье (так как использовал для первичных прогонов). Почему не полностью 100%-но? Потому, что таковы технические ограничения стоящего на повестке дня задания :). Просто принципиальная позиция руководства — должно устанавливаться из AppStrore на планшеты работников фирмы. Нет проблем. Мне же легче.

Ну да вернёмся к нашим баранам. Тенденция использовать веб-разработку стало чем-то, чем раньше была тенденция засовывания Basic-а в продукты, которыми можно программно управлять. Учитывая то, что и основная масса наших разработок (я сейчас о фирме где тружусь) построена на принципах, либо Client/Server, либо WEB-Application, но использование HTML5 как-бы и шаг логический. В итоге получим тот-же Client/Server, при чём в роде клиента будет знакомый всем разработчикам (а не только той части, кто вник в особенности Objective-C с Cocoa на iOS) тандем HTML/JavaScript.

До сих пор непостоянство наличие интернет-соединения нас здорово вязало по рукам и ногам и, вне зависимости от выбранной технологии, техника программирования была более привязана к конкретному устройству, поскольку итерационный процесс общения клиента с сервером являлся сильно асинхронным и во времени не детерминированным. А как нам всем известно — веб приложение без интернета существовать не может! Вот и писали программы на том, что нам давал разработчик устройства и в рамках его SDK или каких-то надстроек над ним. Но при этом заостряя внимание и отталкиваясь именно от устройства и его возможностей (языковых, сетевых и прочих). Но на сцене — HTML5. Прошу любить и жаловать!

Чем нам поможет HTML5:
возможность создавать offline web-application;
возможность иметь хранилище данных на стороне клиента!

Имея эти две замечательные особенности HTML5 мы можем написать наш софт таким образом, что те функции, которые нужны для работе на клиенте и данные которые всенепременно нужны при работе на клиенте мы можем на нём и оставить, а всё то, что необходимо получить серверу или получить с сервера мы можем отложить на потом, когда появится связь с интернетом. Классика Client/Server архитектуры, но при этом оторванная от привязке к конкретному физическому устройству или конкретной ОС.

Оформлением интерфейса при этом может заняться HTML5. При этом, позвольте напомнить, что в купе с CSS3 он позволяет создавать теперь вполне себе приличные и реалистичные графические интерфейсы пользователя (и не надо глубоко заныривать в XAML-ы и прочая...), а JavaScript вместе с каким-нибудь Framework, да хотя бы моим любимым jQuery, позволяет заменить фундамент Codebehind и построить на нём всю функциональность.

Структура offline Web application на базе HTML5 состоит из частей:

  • HTML страница(цы);
  • JavaScript;
  • Cascading Style Sheet (CSS);
  • локальное хранилище (БД);
  • манифест.

Все эти 5ть составляющих и есть — автономное веб-приложение. При этом, например, мы можем пожертвовать чем-то, что нам просто не нужно. Могу точно сказать, что без HTML страницы и манифеста автономного веб-приложения не состоится :). Зато остальное — зависит от целей и техники.

HTML даёт вам DOM, по которому вы можете «гулять» с помощью JavaScript, CSS3 + HTML дают вам всё: от анимации и визуальных эффектов присущих статическому дизайну до (вместе с jQuery, к примеру) построения полнофункционального мультимедийного приложения. База данных — такая SQLite файловая база, которой уже сто лет пользуется огненный лис, к примеру, да и я в своих решениях с нечёткими границами размещения веб-приложений (когда не ясно что там будет за провайдер у заказчика на коротких проектах). База с разными возможностями современных БД. Нравится мне много больше чем тот-же MS Access, к примеру. Всё таки SQLite больше заточен как backend хранилище, а не Desktop DB с кучей (в нашем случае) не нужных наворотов по работе с интерфейсом пользователя. SQLite имеет очень понятный и вполне быстро усваиваемый (за полчаса) SQL синтаксис.

Манифест. Эта такая хрень, которая позволяет распознать ваше приложение как автономное веб-приложение. На самом деле это тупо — список файлов которые надо принимающему устройству скачать на себя, чтобы потом локальная версия Web-Application могла работать.

Располагать манифест надо в атрибутах тега HTML:
html manifest="название вашего манифеста.manifest"

Манифест это — текстовый файл с расширением  .manifest.
HTML файл с сылкой на манифест автоматом включается в кеш приложения.
Все перечисленные в манифесте файлы попадают так же в кеш приложения.

Пример листинга манифеста:

CACHE MANIFEST
jquery-min.js
my-core.js

Сие значит, что в кеш приложения мы поклали:
HTML файл где был указан атрибут manifest, и два .js – файла скриптов. Дальше, для элементарной программы нам ни чего и не надо :). HTML и, соотвественно, DOM мы уже получили путём простейших манипуляций с HTML, всего-то указав в нём загрузку двух скриптов и не забыв про body у которого желательно на onload чего-то там «подвесить», что проинициирует наши скрипты (хотя можно на это и забить, когда у нас есть более другие методы той же инициализации).

Так же мы всегда можем воспользоваться одной из уже появившихся на рынке Frameworks библиотек:

На самом деле их больше (просто это те, которые я опробовал и к которым у меня возникло доверие).

Отлавливание «поворота» устройства, события «тырка» в экран, жесты и многое другое оказывается в вашем распоряжении. И, заметьте, без особых с вашей стороны на то усилий!