Статьи

PhoneGap: родные приложения, написанные на HTML

Что, если мы хотим запускать приложения HTML5 как родные на смартфонах (и других мобильных устройствах)? Сеть развивается быстро, но нелегко развернуть приложение размером в несколько мегабайт через браузер, чей кеш может работать или не работать правильно. Пользователь также должен открыть ссылку, вместо того чтобы встроить значок в платформу, и он может испытывать трудности в автономном режиме.

PhoneGap — это фреймворк для разработки мобильных приложений на HTML, CSS и JavaScript. Эти приложения развертываются в специфический для ОС контейнер (для Android, iOS, Windows Phone …) и запускаются так же, как это делает экземпляр Apache на localhost.

Куча скачиваний

Если вы хотите попробовать это, сам PhoneGap — это достаточно маленький пакет. Но вам также понадобится Android SDK. Я буду следить за Android для этого обзора из-за доступности, хотя PhoneGap поддерживает в общей сложности 7 платформ.

Процесс развертывания не требует загрузки Eclipse или других IDE с гигантскими расширениями! Я счастлив использовать командную строку.

На виртуальном устройстве Android

Эмулятор для Android немного медленный, но это нормально для такого рода сред. Развернуть пример приложения на виртуальном устройстве Android очень просто, следуя этому руководству .

В процессе используется муравей. Хорошо внимательно посмотреть, что мы развертываем:

  • папка assets / www /, которая будет корнем документа поддельного веб-сервера.
  • Некоторые файлы инфраструктуры для Android, такие как AndroidManifest.xml.
  • Некоторые библиотеки JavaScript, такие как phonegap.js, связывают наш код JavaScript с устройством.

Однако эмулятор не очень хорош, если мы хотим оценить пользовательский опыт: ему не хватает геолокации и множества других устройств; это просто не то же самое, что реальный телефон.
Фактическая полезность PhoneGap заключалась бы в функциях, сильно задействующих устройство; мы уже знаем, что функции, включающие возможности браузера (такие как CSS-стили или вызовы Ajax), не меняются в зависимости от платформы.

На реальном телефоне

Поэтому я установил демонстрацию GWT PhoneGap на реальном телефоне через Android Market.

Время запуска приложения и его отзывчивость хороши, как для нативного приложения. PhoneGap может получать изображения из JavaScript! Он нацелен на приложение фотокамеры и после сохранения (или удаления) фотографии фиксирует имя файла для дальнейшей обработки.

Приложение демонстрирует, как добывать данные с акселерометра, компаса, датчика GPS (который обеспечивает широту и долготу). Локальное хранилище также работает так, как вы ожидаете в браузере (как хранилище значений ключа).

Кнопка « назад» (а это нелегко получить кроссплатформенное право) перехватывается и используется для навигации по экранам приложения. Он сохраняет то же чувство, что и в нативных приложениях.

API

API основан на JavaScript: вы называете его так, как если бы вы были внутри браузера. Некоторые компоненты являются новыми: в настоящее время не существует стандарта для доступа к файлам в браузере.
К счастью, другие компоненты являются реализациями спецификаций W3C: геолокация, веб-SQL и веб-хранилище идентичны браузерным. Например:

navigator.geolocation.getCurrentPosition(...)

получит объект Position и передаст его вашим обратным вызовам.

Я мог попробовать PhoneGap только на устройстве Android, но и Android, и iOS поддерживают различные компоненты Api. Список поддерживаемых платформ и версий (где применимо) предоставляется для каждой из них. Например, File Api предоставляет доступ к файловой системе на:

  • Android
  • BlackBerry WebWorks (OS 5.0 и выше)
  • IOS
  • Windows Phone 7 (Манго)

Приложение подается из папки www /, которая будет эквивалентна вашему основному серверу. Вы можете загрузить файлы .js (включая phonegap-1.2.0.js, который предоставляет Api) из этой папки, указав относительные пути, как это делается в веб-приложении.

CSS также может быть загружен таким же образом (теги <link>). Все окна просмотра являются HTML и распознают такие события, как onclick (хотя на самом деле это касание телефонов и планшетов.)
Вызовы Ajax могут выполняться с объектами XMLHttpRequest: предпочитаемая среда JS должна работать для сохранения данных на сервере, но вы должны включить его источник в папке www / для экономии трафика. XMLHttpRequest может быть выдан любому серверу: не применяется та же политика происхождения, поскольку в этом случае вы будете ограничены localhost .

Выводы

Цели разработчика, использующего PhoneGap, понятны.

Прежде всего, он может сэкономить пропускную способность : поддержка автономных веб-приложений спецификации W3C на самом деле не готова к прайм-тайм; его иногда сложно использовать, он может сломаться, особенно из-за множества различных частичных реализаций от мобильных поставщиков (у которых есть стимул для блокировки с помощью собственных приложений вместо поддержки веб-стандартов).

Он может получить большую интеграцию с возможностями устройства , такими как камера и файловая система, без использования Flash или ожидания включения стандартов W3c. И он может получить значок для приложения вместо закладки . ?

Недостатком PhoneGap и аналогичных платформ является уровень абстракции, который они вводят поверх простых старых веб-приложений или нативных приложений. В идеальном мире мы могли бы просто работать со стандартными автономными веб-приложениями .

Мартин Фаулер указал на некоторые проблемы с кроссплатформенным битом, такие как различия между элементами управления пользовательского интерфейса на разных устройствах (кнопки Android и iOS), пользовательский интерфейс и модель безопасности. Он указывает на веб как на решение или на тонкие обертки вокруг веб-приложений, которые развертываются как нативные — именно то, что делает PhoneGap.