Проблемы при разработке веб-приложений для мобильных устройств

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

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

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

User Agent

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

Например, мой FireFox посылает

Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.9.0.8) Gecko/2009032609 Firefox/3.0.8 (.NET CLR 3.5.30729)

в качестве User Agent, а IE:

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729).

С настольными версиями браузеров проще, их не так много, а есть брать только основные, то, в целом, не более десятка. Написав небольшую проверку на тип браузера – на JavaScript или ASP.NET:

if(Request.Browser.Browser.Equals("Netscape") &&
   Request.Browser.MajorVersion >= 6)
      Response.Write("Thank God! you are using a better version of Netscape.");

if(Request.Browser.Browser.Equals("IE") && Request.Browser.MajorVersion >=8)
	Response.Write("Yours is the best!");

то можно легко оперировать полученными данными.

С мобильными версиями все не так просто. Поэтому переходим к следующему пункту – определение типа браузера для мобильных устройств.

Определение типа браузера для мобильных устройств

Компания Microsoft создала Mobile Device Browser File, который хостится на сайте codeplex, с помощью которого можно получить последнюю информацию об устройствах и их возможностях.

Описание с сайта:

What is the Mobile Device Browser Definition File?
The Mobile Device Browser Definition File contains capability definitions for individual mobile devices and browsers. At run time, ASP.NET uses this .browser file, along with the information in the HTTP request header, to determine what type of device/browser has made the request and what the capabilities of that device are. This information is exposed to the developer through the Request.Browser property and allows them to tailor the presentation of their web page to suit the capabilities of the target device.

More Information
The format of the .browser file is XML and the schema is defined here: Browser Definition File Schema. The Browser Definition File was introduced in the .NET Framework version 2.0. In earlier versions of the .NET Framework, the browserCaps element was used to define browser definitions in configuration files. Please note that you must have Microsoft .NET Framework 3.5 Service Pack 1 installed to use this .browser file.

Несколько фактов:

  • информация, представленная в файле, используется командой Mobile Browse Hotmail in production;
  • обновляется приблизительно раз в месяц;
  • информация представлена для 500 наиболее распространенных мобильных устройств (из около 2000, покрытие – 99%);
  • содержит описание 60+ свойств для каждого устройства, например AcceptsAudioMp3, AcceptsImageSVG, IsSslSupported, MaxUrlLength, SupportedImageGifVersion и т.д. Полный список можно посмотреть здесь.
  • размер файла – 4.32 МБ.

Для получения нужной информации достаточно переписать файл mobile.browser в папку AppBrowsers/Devices и потом использовать следующий код для доступа к некоему свойству:

Request.Browser[CapabilityName"]

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

Сколько версий сайтов делать?

Не секрет, что даже наличие полной информации о свойствах устройства не ответит на вопрос сколько версий сайта необходимо поддерживать для максимального покрытия пользователей. Ведь, например, iPhone и новые Nokia обладают более продвинутыми возможностями чем более старые телефоны, где же грань? Практика разработки Mobile Hotmail показала, что лучше использовать две версии мобильного сайта: 1) для старых устройств (wap) 2) для новых устройств типа iPhone (3G).

Тестирование мобильных веб-приложений

Один из самых главным вопросов при разработке мобильных веб-приложения – это тестирование.

Возможные способы тестирования:

Изменение User Agent

Изменяя значение User Agent вашего браузера или программно:

WebClient client = new WebClient();
client.Headers.Add("user-agent", "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; .NET CLR 1.0.3705;)");

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

Преимущество: простота реализации, недостаток: низкое качество тестирования.

Использование эмуляторов устройств

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

Преимущество: можно получить среду, максимально приближенную к оригиналу, недостаток: много времени необходимо потратить на установку и настройку эмуляторов.

Тестирование с помощью DeviceAnywhere

О компании:

Компания DeviceAnywhere, основанная в 2003 г., находится в Сан-Матео, Калифорния и имеет дополнительные офисы в Великобритании, Германии, Франции, Японии, Канаде и Пакистане. С момента запуска сервиса DeviceAnywhere в январе 2006 г. разработчики могут пользоваться услугами удаленного доступа к мобильным устройствам и комплексным решениям в области поддержки разработки для мобильных устройств, обеспечивающим создание и распространение высококачественного мобильного контента. В настоящее время DeviceAnywhere поддерживает более 1,000 реальных устройств, соединенных с серверами и работающих в более чем 25 телекоммуникационных сетях по всему свету. При этом число поддерживаемых устройств и сетей постоянно растет. Кроме того, экономичная модель SaaS, предлагаемая DeviceAnywhere позволяет снижать затраты на ручное тестирование и, за счет этого, выводить контент на рынок быстрее, чем было возможно ранее.

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

Тестирование на реальных устройствах

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

Источник на msug.vn.ua

Previous ArticleNext Article
Технический директор IT-Dimension, компании-разработчика кросс-платформенного программного обеспечения

Leave a Reply

Your email address will not be published. Required fields are marked *

W.

Web разработка под iPhone

Сегодня у нас статья Андрея Реброва о различных инструментариях Web-разработки для мобильных устройств вцелом и iPhone в частности.

Введение

Пока все Интернет сообщество со всех сторон продолжает обсуждать, как же можно приспособить iPad для работы, я бы хотел все же вернуться к iPhone. По профессии я программист и люблю новые технологии. И очень мне уж хотелось сделать приложение для своего телефона, но вот как-то душа к Objective C не лежит пока что, да и макбука с лицензией разработчика тоже пока нет. И мне стало интересно, могу ли используя знания html и js написать что-нибудь. Оказалось что да, и способов очень даже много. О них – под катом.

Способ первый – просто и со вкусом

Само собой, можно просто написать веб сайт и его адаптировать. Об этом на Хабре уже писали. К написанному в той статье мне бы хотелось добавить две вещи.

Во-первых, с появлением html 5 появилась возможность работы с локальными базами данных. И все браузере на движке WebKit (само собой последние апдейты) уже поддерживают эту возможность. Работать с ней более чем просто.

db = openDatabase("TestDB", "1.0", "HTML5 Database", 200000);

В функцию создания базы данных передаются следующие параметры:

  • Название базы данных
  • Ее версия
  • Отображаемое имя
  • Размер в байтах

Далее открываем транзакцию и выполняем нужные нам действия

db.transaction(function(tx)
    {
      tx.executeSql("DELETE FROM tbl_test WHERE id = ?", [item.id]);
    });

Во-вторых, стоит сказать об оффлайновом режиме работы с помощью создания manifest-файла. Подробно об этом можно прочитать на сайте Apple.
Вкратце что это такое. Манифест это обыкновенный файл, такой же, как например, css или js, содержащий в себе информацию о кэше приложения. Когда вы первый раз заходите на страницу, ресурсы, указанные в этом файле кэшируются.

Теперь как все выглядит на деле:

  1. Указываем ссылку на файл на нужной нам странице
    <html manifest="demo.manifest">
    
  2. Создаем сам файл.
    CACHE MANIFEST
    
    demoimages/clownfish.jpg
    demoimages/clownfishsmall.jpg
    demoimages/flowingrock.jpg
    demoimages/flowingrocksmall.jpg
    demoimages/stones.jpg
    demoimages/stonessmall.jpg
    

    И после этого все работает. С кэшем можно работать — апдейтить его, обрабатывать события и так далее. Все это мне очень понравилось, но мне стало интересно, а есть ли какие-то специальные фреймворки. Оказалось есть.

Способ второй — jQTouch

О jQTouch уже немного писали. Хочу рассказать немного подробнее о том, что он умеет.

jQTouch — Это такой плагин к известному Javascript-фреймворку jQuery, позволяющий очень просто создавать веб-приложения для тачфонов — телефонов с сенсорным экраном, причём с пальцеориентированным интерфейсом. Каким и является iPhone. А так же HTC Hero, Dream, Magic — на Android — и куча разных WM-коммуникаторов с оболочками. © (оригинал)

Перечислю основные фишки:

  • Очень легко управлять поведением компонент
  • Есть возможность создавать темы
  • Есть небольшое взаимодействие с телефоном — например можно узнать его ориентацию
  • Поддерживается анимация и различные фишки интерфейса айфона
  • Это jQuery и этим все сказано

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

Способ третий — PhoneGap

Суть данного фреймворка состоит в том, что написав один раз приложение с помощью html и js, мы сможем транслировать его в приложение под нужную платформу. А платформы он поддерживает вот такие: iPhone, Android, Blackberry (OS 4.5), Symbian, Windows Mobile, Palm, Maemo. В случае айфона мы опять возвращаемся к тому, с чего начали — нужен макбук, лицензия и все дела. Но фреймворк все равно отличный.

Ниже представлен roadmap данного проекта.

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

Необходимость трансляции немного напрягала и дальнейшие поиски вывели меня на конкурента PhoneGap — MotherApp

Способ четвертый — MotherApp

Суть этого проекта такова:

  • Пишем приложение с использованием предложенной js-библиотеки
  • Устанавливаем все что нужно на сервер
  • И самое главное — отдаем ссылку на свое приложение парням из MotherApp, которые все за нас транслируют

Как видите, сервис хорошо монетизирован =)
А если серьезно вполне серьезная и мощная по своим возможностям вещь. По ссылке список возможностей с картинками.

Как говорил один персонаж, становится все любопыственнее и любопытсвеннее. Уже из спортивного интереса, я нашел почти то что искал:

  • Возможность написания на html и js
  • Полное отсутствие трансляции
  • Возможность использовать функции телефона

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

Способ пятый — Big5

Здесь все еще проще.
Пишем свое приложение с использованием js-библиотеки, скачиваем приложение из аппсторе и вводим адрес своего сайта.
В своей сути, big5 — это альтернативный бразуер, но с доступом к нативным функциям телефона. Большой вопрос, как к этом отнесется Apple и не повторится ли здесь судьба PhoneGap. Но факт остается фактом, написав веб приложение, мы в итоге получаем полноценное приложение под айфон. Насколько полноценное зависит от пользователя, так как в аппстор есть две версии приложения big5: бесплатная lite и платная за 10$.
На сайте big5 заявлено, что разработка под их приложение, это просто веб разработка, так что все что было описано в первом пункте так же справедливо и тут.

Ну и в завершении, хочется представить еще одного кандидата. Но он, пожалуй, больше придется по душе тем, кто выбрал Ruby on rails. Итак, встречайте — Rhodes.

Способ отдельный — Rhodes

Этот продукт отчасти напоминает процессом своей разработки, который представлен ниже, MotherApp.

Rhodes опять же работает со всеми нативными вещами, вплоть до файловой системы. Поддерживает он следующие платформы: iPhone, Windows Mobile, BlackBerry, Symbian и Android. Язык у данного фреймворка очень похож на ruby, так что рубисты дерзайте. Пока что сложно найти какие либо отзывы.

И в завершении, тем, кого данная тема увлечет, хочу порекомендовать книгу от O`Reilly — Building iPhone Apps with HTML, CSS, and Javascript
Making App Store Apps Without Objective-C or Cocoa
. По ссылке ее официальный электронный вариант.

Спасибо за внимание!

Статья “Разработка под Mac OS X и iPhone” в блоге автора.

M.

Mozilla выпустила бета-версию мобильного браузера Fennec (анонс + небольшой тест-драйв)

Вышла beta-версия мобильного браузера Fennec от Mozilla. Сам браузер предназначается прежде всего для устройств на платформе Maemo, но и для пользователей настольных систем есть возможность попробовать его в работе прямо сейчас.

Я тоже решил приобщиться и попробовал запустить его на Windows 7.  Результат, скажем так, довольно неплох, хотя есть и кое-какие проблемы. Собственно, выглядит все на Windows 7 вот таким образом:

Fennec отлично работает на Windows 7

А минусы вот какие (те, которые бросаются в глаза, возможно есть какие-то еще недоработки):

  • Куда-то уезжает строка адреса при скроллинге
  • Текст не везде отображается корректно

Fennec beta 1 - Глюки
Еще немного непонятно почему область браузера не растягивается на весь экран. Возможно такая возможность есть, но chrome заточен под определенное разрешение.

Fennec beta 1 Глюки
Не очень понятно отсутствие вертикального скроллера. В принципе навигация с помощью скроллинга пальцами – штука удобная, но скроллить несколько десятков страниц текста руками (например башорг) мне бы не хотелось.

Приложение с одной загруженной веб-страницей занимает в памяти 43 МБ. Для загрузки пяти страниц потребовалось еще 16 МБ  (всего 59 МБ).

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

А вобще, учитывая что это beta-версия, результаты довольно неплохие. Fennec прошел тест Acid3 c 94 баллами из 100, в то время как последний FireFox всего с 71 из 100.