Пользователь
10,4
рейтинг
27 июля 2015 в 16:53

Разработка → Crosswalk Project — замена Android WebView. Интеграция в проект tutorial

CrosswalkProject

Эта статья откроет небольшой цикл из двух частей, посвященных интересному проекту под названием Crosswalk Project. В них я затрону вопросы интеграции Crosswalk в Android приложение и использовании его как замену системного WebView в обычном приложении.

Под «обычным» я подразумеваю классический проект на Java с использованием Android SDK, в противовес HTML5 приложениям и нативному C++ коду. А т.к. Crosswalk в основном используется как runtime запуска HTML5 приложений, то, чтобы не путаться в терминах, буду называть этот проект обычным.

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

Что же такое Crosswalk?


Crosswalk Project — это runtime построенный на технологиях open source для HTML приложений. Основой для Crosswalk Project служит Google Chromium. Crosswalk Project также и сам является open source проектом и распространяется под BSD License.

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

Применяя Crosswalk вы сможете:
  • Использовать все возможности, доступные в современных web браузерах: HTML5, CSS3, JavaScript.
  • Иметь доступ к последним рекомендованным и развивающимся web стандартам.
  • Использовать экспериментальные API, недоступные в большинстве основных web браузеров.
  • Контролировать цикл обновления приложения путем распространения с собственной средой выполнения.
  • Добавлять специальные расширения к приложению для увеличения количества специфических особенностей не предоставляемых Crosswalk или стандартной web платформой.

Итак Crosswalk в первую очередь нацелен на использование в качестве runtime для HTML5 приложений и интегрирован с Cordova начиная с версии 4.0. Поэтому он достаточно хорошо известен среди разработчиков гибридных приложений, но, возможно, не так хорошо в среде Java разработки.

Crosswalk может использоваться как замена системного WebView в обычном Android проекте. Официально Crosswalk поддерживает все версии Android начиная с 4.0 и выше. В этом случае мы получаем самостоятельный браузер, который позволит нам не зависеть от версии Android и ограничений реализации WebView в этой версии системы.

Компоненты Crosswalk.


Создатели Crosswalk не предполагали своей целью полную совместимость с системным WebView. Однако, в общем мы имеем достаточно близкую копию интерфейсов системного браузера до версии Android 4.4, с которой системный WebView также начал базироваться на Chromium. Поэтому, и к большому сожалению, в Crosswalk вы не найдете очень удобного и доступного с Android API 21 вызова:
public WebResourceResponse shouldInterceptRequest (WebView view, WebResourceRequest request)

С версии Crosswalk 10 авторы решили еще дальше отойти от стандартных интерфейсов и добавили некоторые дополнительные вызовы в свой публичный API. Javadoc для различных версий Crosswalk вы можете найти на официальном сайте, ниже я рассмотрю несколько важных моментов для 14ой версии, последней релизной версии на данный момент.

Сейчас Crosswalk содержит собственно сам Crosswalk WebView (или XWalkView), а также:
  • XWalkResourceClient — калбэки и события при загрузке ресурсов.
  • XwalkUIClient — калбэки и события для UI.
  • XWalkNavigationHistory — история переходов в XWalkView.
  • XWalkPreferences — настройки среды Crosswalk.
  • JavascriptInterface — аннотация для методов, которые будут доступны из JavaScript. Идентична системной аннотации.

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

Интеграция Crosswalk в проект.


Исходный код с интегрированным XWalkView и описанными решениями доступен в GitHub.

В целом интеграция Crosswalk достаточно проста, если вам необходимо интегрировать Crosswalk в проект разрабатываемый с помощью Eclipse/ADT, то есть отличный официальный гайд по этому поводу. Здесь мы рассмотрим интеграцию в проект с использованием Android Studio. По сути она заключается в подключении библиотеки Crosswalk, все остальные операции не сильно отличаются от использования стандартного WebView.

1. Необходимо создать новый проект в Android Studio. Я, для примера, создал проект с пустой Activity и поддержкой начиная с API 14.

2. Подключить репозиторий со сборками Crosswalk и выбрать саму сборку проекта. Я использую последнюю доступную с версией 14.43.343.17:
repositories {
    maven {
        url 'https://download.01.org/crosswalk/releases/crosswalk/android/maven2'
    }
}
dependencies {
    compile 'org.xwalk:xwalk_core_library:14.43.343.17'
}


3. Добавить в AndroidManifest.xml разрешения для использования сети и т.д.:
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

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

4. Добавить XWalkView в layout там, где вы хотите его использовать. Простой пример:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <org.xwalk.core.XWalkView
        android:id="@+id/xwalkview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</FrameLayout>


5. Для загрузки url в коде вашей Activity необходимо добавить следующие вызовы:
mXWalkView = (XWalkView) findViewById(R.id.xwalkview);
mXWalkView.load("http://stars.chromeexperiments.com/", null);


6. Аналогично системному WebView, можно подключить классы для получения оповещений от XWalkView:
mXWalkView.setResourceClient(new MyResourceClient(mXWalkView));
mXWalkView.setUIClient(new MyUIClient(mXWalkView));


Дополнительно, если вы хотите использовать XWalkView как базу для своего HTML5 приложения, можно переопределить методы onActivityResult, onNewIntent и другие для трансляции сообщений в Crosswalk. Например, onActivityResult используется в том числе для обработки событий от JavaScript диалоговых окон. К этому можно добавить, что для HTML5 приложений имеет смысл наследоваться от XWalkActivity, в котором уже реализованы все нужные моменты.

Некоторые нюансы реализации.


Приведу несколько моментов реализации Crosswalk, на которые сразу стоит обратить внимание:
  • XWalkView использует SurfaceView либо TextureView для отрисовки. Поэтому оно достаточно быстро отрисовывается как на устройствах, так и в эмуляторе. Однако, это создает проблемы при анимации и работе с изображением XWalkView.
  • Базовым view является SurfaceView, если вы хотите анимировать XWalkView, то необходимо использовать TextureView. Для выбора необходимо установить параметр через класс XWalkPreferences, до создания самого XWalkView:
    XWalkPreferences.setValue(XWalkPreferences.ANIMATABLE_XWALK_VIEW, true);
    

  • XWalkPreferences не являются аналогом WebSettings и содержит настройки для среды Crosswalk. WebSettings в явном виде недоступен, все стандартные параметры уже включены по дефолту (поддержка JavaScript и пр.).
  • История переходов не доступна из самого XWalkView и контролируется классом XWalkNavigationHistory. Если вы хотите перейти назад или вперед, узнать возможен ли переход и т.д., нужно использовать следующие методы:
    mWebView.canGoForward() == mXWalkView.getNavigationHistory().canGoForward()
    mWebView.clearHistory() == mXWalkView.getNavigationHistory().clear()
    

  • Методы setResourceClient() и setUIClient() не принимают null как параметр, в отличии от стандартных. Поэтому таким образом не получится отключить оповещения, только установкой «пустых» классов или уничтожением самого XWalkView.


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

Выводы.


Коротко о Crosswalk можно сказать, что это хорошее и достаточно удобное решение с адекватной поддержкой. Как runtime для HTML5 приложений выглядит очень перспективно, особенно учитывая активный процесс разработки. Определенно можно рекомендовать для использования при создании гибридных приложений.
Ярослав @comhot
карма
12,0
рейтинг 10,4
Пользователь
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (4)

  • +1
    Я думаю стоит упомянуть, что накладные расходы при использовании этой штуки это примерно +20Мб к APK и +58Мб в установленном виде.

    Пруф — Crosswalk FAQ
    • +1
      Да, верно. Раз возник интерес к размеру, распишу чуть более подробно.

      Crosswalk собирается для двух архитектур: x86 и armv7. Соответственно библиотеки для каждой из них весят ~20M, т.е. если собирать универсальный билд, то overhead составит порядка 40M.

      Есть 2 возможности улучшить ситуацию: собирать отдельные apk для каждой архитектуры и использовать облегченную версию Crosswalk.

      Для первого варианта я добавил flavors в тестовый проект, чтобы можно было поэкспериментировать. Второй вариант можно посмотреть на официальном сайте.

      Вот более точные данные по облеченной и обычной версии Crosswalk:
      • x86: 11.1M (vs. 20.8M on Crosswalk 10.39.232.0)
      • ARM: 9.63M (vs. 18M on Crosswalk 10.39.232.0)
  • 0
    Можно еще использовать в качестве среды разработки Intel XDK (который в общем-то удобен для разработки и компиляции чистых html5 приложений с cordova-плагинами), то скомпилировать версию под андроид с crosswalk можно ничего специально не устанавливая, а просто выбрав в меню build соответствующий пункт
  • 0
    А что у него с многопоточностью? Где то читал, что обычный WebView качает все ресурсы из сети в только один поток…
    И можно ли вмешаться в процесс кэширования данных (кэшировать картинки и скрпты на флешке, самому иметь возможность чистить кэш и т.п.)?

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.