Запускайте приложения Chrome на мобильных устройствах с помощью Apache Cordova

Важно! Chrome прекратит поддержку приложений Chrome на всех платформах. Браузер Chrome и Интернет-магазин Chrome продолжат поддерживать расширения. Прочтите объявление и узнайте больше о переносе вашего приложения .

Набор инструментов для запуска приложений Chrome на мобильных устройствах находится на ранней предварительной версии для разработчиков. Не стесняйтесь оставлять нам свои отзывы с помощью системы отслеживания проблем GitHub , нашего форума разработчиков приложений Chrome , Stack Overflow или нашей страницы разработчиков G+ .

Обзор

Вы можете запускать свои приложения Chrome на Android и iOS с помощью набора инструментов на основе Apache Cordova , среды разработки мобильных приложений с открытым исходным кодом для создания мобильных приложений с собственными возможностями с использованием HTML, CSS и JavaScript.

Apache Cordova оборачивает веб-код вашего приложения собственной оболочкой приложения и позволяет распространять гибридное веб-приложение через Google Play и/или Apple App Store. Чтобы использовать Apache Cordova с существующим приложением Chrome, вы используете инструмент командной строки cca ( cordova chrome app ) .

Дополнительные ресурсы

• Есть несколько особенностей, которые следует учитывать при разработке с помощью Cordova; мы перечислили их в разделе «Рекомендации» .
• Чтобы просмотреть, какие API Chrome поддерживаются на мобильных устройствах, посетите страницу статуса API .
• Чтобы просмотреть приложение Chrome на устройстве Android без набора инструментов, воспользуйтесь Инструментом разработчика приложений Chrome (ADT) .

Давайте начнем.

Шаг 1. Установите инструменты разработки

Набор инструментов Chrome Apps для мобильных устройств предназначен для iOS 6+ и Android 4.x+.

Зависимости разработки для всех платформ

• Требуется Node.js версии 0.10.0 (или выше) с npm :

  • Windows : установите Node.js, используя исполняемые файлы установки, которые можно загрузить с сайта nodejs.org .
  • OS X или Linux : исполняемые файлы установки также доступны на nodejs.org . Если вы хотите избежать необходимости root-доступа, возможно, будет удобнее установить через nvm . Пример:

  curl https://raw.github.com/creationix/nvm/master/install.sh | sh
  source ~/.bash_profile || source ~/.profile || source ~/.bashrc
  nvm install 0.10
  nvm alias default 0.10
  

Таргетинг на Android

При разработке приложения для Android вам также потребуется установить:

• Java JDK 7 (или выше)
• Android SDK версии 4.4.2 (или выше)
  • Установите Android SDK и инструменты разработчика Android, которые входят в комплект Android ADT Bundle.
  • Добавьте sdk/tools и sdk/platform-tools в переменную среды PATH .
  • OS X : версия Eclipse, поставляемая с Android SDK, требует JRE 6. Если при открытии Eclipse.app не предлагается установить JRE 6, скачайте ее через Mac App Store.
  • Linux : для Android SDK требуются 32-разрядные библиотеки поддержки. В Ubuntu получите их через: apt-get install ia32-libs .
• Апач Муравей
  • Добавьте apache-ant-xxx/bin в переменную среды PATH .

Таргетинг на iOS

Обратите внимание, что iOS-разработку можно вести только на OS X. Кроме того, вам потребуется установить:

• Xcode 5 (или выше), который включает инструменты командной строки Xcode.
• ios-deploy (необходим для развертывания на устройстве iOS)
  • npm install -g ios-deploy
• ios-sim (необходим для развертывания в симуляторе iOS)
  • npm install -g ios-sim
• Необязательно: зарегистрируйтесь в качестве разработчика iOS.
  • Это необходимо для тестирования на реальных устройствах и отправки в магазин приложений.
  • Вы можете пропустить регистрацию, если планируете использовать только симуляторы iPhone/iPad.

Установите инструмент командной строки cca

Установите cca через npm:

npm install -g cca

Чтобы позже обновить набор инструментов новыми выпусками: npm update -g cca .

Убедитесь, что все установлено правильно, выполнив эту команду из командной строки:

cca checkenv

Вы увидите номер версии cca и подтверждение установки SDK для Android или iOS.

Шаг 2. Создайте проект

Чтобы создать проект мобильного приложения Chrome по умолчанию в каталоге с именем YourApp , выполните:

cca create YourApp

Если вы уже создали приложение Chrome и хотите перенести его на мобильную платформу, вы можете использовать флаг --link-to , чтобы создать на него символическую ссылку :

cca create YourApp --link-to=path/to/manifest.json

Если вместо этого вы хотите скопировать существующие файлы приложения Chrome, вы можете использовать флаг --copy-from :

cca create YourApp --copy-from=path/to/manifest.json

У вас еще нет собственного приложения Chrome? Попробуйте одно из множества примеров приложений Chrome с поддержкой мобильных устройств .

Шаг 3: Разработка

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

• Вариант А: из командной строки с помощью инструмента cca или
• Вариант Б: с помощью IDE, например Eclipse или Xcode. Использование IDE совершенно необязательно (но часто полезно) для облегчения запуска, настройки и отладки гибридного мобильного приложения.

Вариант А. Разработка и сборка с использованием командной строки.

Из корня папки проекта, созданной cca :

Андроид

• Чтобы запустить приложение на эмуляторе Android: cca emulate android
  • Примечание. Для этого необходимо настроить эмулятор. Вы можете запустить android avd , чтобы настроить это. Загрузите дополнительные изображения эмулятора, запустив android . Чтобы ускорить работу изображений Intel, установите Intel HAXM .
• Чтобы запустить приложение на подключенном устройстве Android: cca run android

iOS

• Чтобы запустить приложение на симуляторе iOS: cca emulate ios
• Чтобы запустить приложение на подключенном устройстве iOS: cca run ios
  • Примечание. Для этого необходимо настроить профиль обеспечения для вашего устройства.

Вариант Б. Разработка и сборка с использованием IDE.

Андроид

1. В Eclipse выберите File -> Import .
2. Выберите Android > Existing Android Code Into Workspace ».
3. Импортируйте из пути, который вы только что создали с помощью cca .
   • Вам следует ожидать импорта двух проектов, один из которых — *-CordovaLib .
4. Нажмите кнопку «Воспроизвести», чтобы запустить приложение.
   • Вам потребуется создать конфигурацию запуска (как и для всех приложений Java). Обычно вам будет предложено сделать это в первый раз автоматически.
   • Вам также потребуется управлять своими устройствами/эмуляторами в первый раз.

iOS

1. Откройте проект в Xcode, набрав в окне терминала следующее:

   cd YourApp
   open platforms/ios/*.xcodeproj
   

2. Убедитесь, что вы строите правильную цель.

   В левом верхнем углу (рядом с кнопками «Выполнить» и «Стоп») имеется раскрывающийся список для выбора целевого проекта и устройства. Убедитесь, что выбрано YourApp , а не CordovaLib .

3. Нажмите кнопку «Воспроизвести».

Внесение изменений в исходный код вашего приложения

Ваши файлы HTML, CSS и JavaScript находятся в каталоге www папки вашего проекта cca.

Важно ! После внесения изменений в www/ перед развертыванием приложения необходимо запустить cca prepare . Если вы запускаете cca build , cca run или cca emulate из командной строки, этап подготовки выполняется автоматически. Если вы разрабатываете с использованием Eclipse/XCode, вам необходимо запустить cca prepare вручную.

Отладка

Вы можете отлаживать приложение Chrome на мобильном устройстве так же, как и приложения Cordova .

Шаг 4: Следующие шаги

Теперь, когда у вас есть работающее мобильное приложение Chrome, есть множество способов улучшить его работу на мобильных устройствах.

Мобильный Манифест

Некоторые настройки приложения Chrome применимы только к мобильным платформам. Мы создали файл www/manifest.mobile.json содержащий их, и конкретные значения указаны в документации плагина и в этом руководстве.

Вам следует соответствующим образом настроить значения здесь.

Иконки

Мобильным приложениям требуется несколько большее разрешение значков, чем настольным приложениям Chrome.

Для Android нужны такие размеры:

• 36 пикселей, 48 пикселей, 78 пикселей, 96 пикселей

Для приложений iOS требуемые размеры различаются в зависимости от того, поддерживаете ли вы iOS 6 или iOS 7 . Минимальное необходимое количество значков:

• iOS 6 : 57 пикселей, 72 пикселей, 114 пикселей, 144 пикселей.
• iOS 7 : 72 пикселя, 120 пикселей, 152 пикселя.

Полный список значков в файле manifest.json будет выглядеть следующим образом:

"icons": {
  "16": "assets/icons/icon16.png",
  "36": "assets/icons/icon36.png",
  "48": "assets/icons/icon48.png",
  "57": "assets/icons/icon57.png",
  "72": "assets/icons/icon72.png",
  "78": "assets/icons/icon78.png",
  "96": "assets/icons/icon96.png",
  "114": "assets/icons/icon114.png",
  "120": "assets/icons/icon120.png",
  "128": "assets/icons/icon128.png",
  "144": "assets/icons/icon144.png",
  "152": "assets/icons/icon152.png"
}

Значки будут копироваться в соответствующие места для каждой платформы каждый раз, когда вы запускаете cca prepare .

Заставки

Приложения на iOS отображают краткую заставку во время загрузки приложения. Набор заставок Cordova по умолчанию включен в platforms/ios/[AppName]/Resources/splash .

Необходимые размеры:

• 320 х 480 пикселей + 2 x
• 768 x 1024 пикселей + 2x (вертикальная ориентация на iPad)
• 1024 x 768 пикселей + 2x (iPad в альбомной ориентации)
• 640х1146 пикселей

Изображения заставки в настоящее время не изменяются cca .

Шаг 5. Публикация

В каталоге platforms вашего проекта есть два полных собственных проекта: один для Android и один для iOS. Вы можете создавать релизные версии этих проектов и публиковать их в Google Play или iOS App Store.

Опубликовать в Play Маркете

Чтобы опубликовать приложение Android в Play Store:

1. Обновите два идентификатора версии Android, затем запустите cca prepare :

   • android:versionName задается с использованием ключа version в www/manifest.json (это также устанавливает версию вашего настольного приложения).
   • android:versionCode устанавливается с помощью ключа versionCode в www/manifest.mobile.js .

2. Отредактируйте (или создайте) platforms/android/ant.properties и установите свойства key.store и key.alias (как описано в документации для разработчиков Android ).

3. Создайте свой проект:

   ./platforms/android/cordova/build --release
   

4. Найдите подписанный .apk, расположенный внутри platforms/android/ant-build/ .

5. Загрузите подписанное приложение в консоль разработчика Google Play .

Публикация в iOS App Store

1. Обновите версию приложения, установив ключ CFBundleVersion в www/manifest.mobile.js , а затем запустите cca prepare .

2. Откройте файл проекта Xcode, расположенный в каталоге вашей platforms/ios :

   открытые платформы/ios/*.xcodeproj

3. Следуйте Руководству по распространению приложений Apple.

Особые соображения

Если вы новичок в приложениях Chrome, самая большая проблема заключается в том, что некоторые веб-функции отключены . Однако некоторые из них в настоящее время работают в Кордове.

Приложение Chrome может не работать сразу после установки на мобильном устройстве. Некоторые распространенные проблемы при портировании на мобильные устройства:

• Проблемы с макетом на маленьких экранах, особенно в портретной ориентации.
  • Предлагаемое решение: используйте медиа-запросы CSS , чтобы оптимизировать контент для небольших экранов.
• Размеры окна приложения Chrome, установленные через chrome.app.window , будут игнорироваться, вместо этого будут использоваться собственные размеры устройства.
  • Предлагаемое исправление: удалить жестко запрограммированные размеры окна; создавайте свое приложение, учитывая разные размеры.
• Маленькие кнопки и ссылки будет трудно нажать пальцем.
  • Предлагаемое решение: установите размер сенсорных объектов не менее 44 x 44 точек.
• Неожиданное поведение при наведении курсора мыши, которого нет на сенсорных экранах.
  • Предлагаемое исправление: помимо наведения курсора активируйте элементы пользовательского интерфейса, такие как раскрывающиеся списки и всплывающие подсказки, при нажатии.
• Задержка касания 300 мс.
  • Предлагаемое исправление: используйте полифил JavaScript FastClick от FT Labs .
  • Прочтите эту статью HTML5Rocks , чтобы получить дополнительную информацию.

Поддерживаемые API Chrome

Мы сделали многие основные API Chrome доступными для приложений Chrome для мобильных устройств, в том числе:

• личность — пользователи входят в систему с помощью OAuth2.
• платежи - продавайте виртуальные товары в мобильном приложении
• pushMessaging — отправляйте сообщения в ваше приложение с вашего сервера.
• сокеты — отправка и получение данных по сети с использованием TCP и UDP.
• уведомления (только для Android) — отправляйте расширенные уведомления из мобильного приложения.
• хранилище — храните и извлекайте данные «ключ-значение» локально.
• syncFileSystem — храните и извлекайте файлы, хранящиеся на Google Диске.
• сигналы тревоги - периодически запускайте задачи
• холостой ход — определять, когда меняется состояние простоя машины
• power – переопределить функции управления питанием системы.

Однако не все API JavaScript Chrome реализованы. И не все функции Chrome Desktop доступны на мобильных устройствах:

• нет тега <webview>
• нет индексированной базы данных
• нет getUserMedia()
• нет NaCl

Вы можете отслеживать прогресс на нашей странице статуса API .

Инструмент разработчика приложений Chrome

Инструмент разработчика приложений Chrome (ADT) для Android — это отдельное приложение для Android, которое позволяет загружать и запускать приложение Chrome без настройки цепочки инструментов разработки, как описано выше. Используйте Chrome ADT, если хотите быстро просмотреть существующее приложение Chrome (уже упакованное в файл .crx) на своем устройстве Android.

Chrome ADT для Android в настоящее время находится на стадии предварительной альфа-версии. Чтобы попробовать эту функцию, просмотрите примечания к выпуску ChromeADT.apk , где приведены инструкции по установке и использованию.