Crosswalk Project - replacement of Android WebView. Project Integration

This article will open a small cycle of two parts devoted to an interesting project called the Crosswalk Project . In them, I will address the issues of integrating Crosswalk into an Android application and using it as a replacement for the system WebView in a regular application.



By “normal” I mean a classic Java project using the Android SDK, as opposed to HTML5 applications and native C ++ code. And since Crosswalk is mainly used as runtime of launching HTML5 applications, and not to be confused in terms, I will call this project normal.

')

In the first part, I want to talk directly about the integration of Crosswalk into an Android application and using Crosswalk WebView instead of the system's Android WebView. In the second part, I will describe some of the nuances and difficulties in working with Crosswalk during integration, as well as draw general conclusions.

What is Crosswalk?

Crosswalk Project is an open-source runtime technology for HTML applications. The basis for the Crosswalk Project is Google Chromium. The Crosswalk Project itself is also an open source project and is distributed under the BSD License .



Crosswalk extends the existing capabilities of the web platform, below a small list of features noted by the creators.



By applying the crosswalk you can:

• Use all the features available in modern web browsers: HTML5, CSS3, JavaScript.
• Have access to the latest recommended and developing web standards.
• Use experimental APIs that are not available in most major web browsers.
• Monitor the application update cycle by distributing with your own runtime environment.
• Add special extensions to the application to increase the number of specific features not provided by Crosswalk or the standard web platform.

So Crosswalk is primarily aimed at using as a runtime for HTML5 applications and integrated with Cordova since version 4.0. Therefore, it is quite well known among developers of hybrid applications, but perhaps not so well in the Java development environment.



Crosswalk can be used as a replacement for the system WebView in a normal Android project. Officially, Crosswalk supports all Android versions from 4.0 and up. In this case, we get a standalone browser that will allow us not to depend on the Android version and the limitations of the WebView implementation in this version of the system.

Crosswalk components.

The creators of Crosswalk did not intend to complete compatibility with the system WebView. However, in general, we have a fairly close copy of the system browser interfaces up to Android 4.4, with which the system WebView also began to be based on Chromium . Therefore, and unfortunately, in Crosswalk you will not find a very convenient and accessible with the Android API 21 call :

public WebResourceResponse shouldInterceptRequest (WebView view, WebResourceRequest request) 

From the Crosswalk 10 version, the authors decided to move further away from the standard interfaces and added some additional calls to their public API. Javadoc for different versions of Crosswalk can be found on the official website , below I will consider a few important points for the 14th version , the latest release version at the moment.



Now Crosswalk contains Crosswalk WebView itself (or XWalkView) itself, as well as:

• XWalkResourceClient - callbacks and events when loading resources.
• XwalkUIClient - callbacks and events for UI.
• XWalkNavigationHistory - transition history in XWalkView.
• XWalkPreferences - Crosswalk environment settings.
• JavascriptInterface - annotation for methods that will be accessible from JavaScript. Identical to system annotation.

In addition to the classes listed above, there are several auxiliary classes and classes facilitating integration into the application browser, but not used by me. For example, XWalkApplication and XWalkActivity.

Crosswalk integration into the project.

Source code with integrated XWalkView and the solutions described is available on GitHub .



In general, the integration of Crosswalk is quite simple, if you need to integrate Crosswalk into a project developed using Eclipse / ADT, that is, an excellent official guide about this. Here we look at the integration into the project using Android Studio. In essence, it consists in connecting the Crosswalk library; all other operations are not much different from using standard WebView.



1. You need to create a new project in Android Studio. For example, I created a project with an empty Activity and support starting from API 14.



2. Connect the repository with Crosswalk assemblies and select the project assembly itself. I use the latest one available with version 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. Add permissions to AndroidManifest.xml to use the network, etc .:

 <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" /> 

The full list of permissions is described in the official guide above. It includes access to location, camera, audio recording. For a simple browser implementation, they are not needed. In the example, we specify only the permissions for accessing the Internet itself and entries in the storage for storing the Crosswalk cache.



4. Add XWalkView to layout where you want to use it. A simple example:

 <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. To load the url in the code of your Activity, you need to add the following calls:

 mXWalkView = (XWalkView) findViewById(R.id.xwalkview); mXWalkView.load("http://stars.chromeexperiments.com/", null); 

6. Similar to the system WebView, you can connect classes to receive alerts from XWalkView:

 mXWalkView.setResourceClient(new MyResourceClient(mXWalkView)); mXWalkView.setUIClient(new MyUIClient(mXWalkView)); 

Additionally, if you want to use XWalkView as a base for your HTML5 application, you can override onActivityResult, onNewIntent, and others for translating messages to Crosswalk. For example, onActivityResult is also used to handle events from JavaScript dialog boxes. To this we can add that for HTML5 applications it makes sense to inherit from XWalkActivity, in which all the necessary moments have already been implemented.

Some nuances of implementation.

I will give a few moments of implementation of Crosswalk, which you should immediately pay attention to:

• XWalkView uses SurfaceView or TextureView for drawing. Therefore, it is quickly drawn on both devices and in the emulator. However, this creates problems when animating and working with the XWalkView image.
• The base view is SurfaceView, if you want to animate an XWalkView, then you need to use TextureView. To select, you must set the parameter through the XWalkPreferences class, before creating the XWalkView itself:
  
  

   XWalkPreferences.setValue(XWalkPreferences.ANIMATABLE_XWALK_VIEW, true); 

  
  
  
• XWalkPreferences are not equivalent to WebSettings and contains settings for the Crosswalk environment. WebSettings is not explicitly available; all standard parameters are already enabled by default (JavaScript support, etc.).
• Navigation history is not accessible from the XWalkView itself and is controlled by the XWalkNavigationHistory class. If you want to go backwards or forwards, find out if a transition is possible, etc., you need to use the following methods:
  
  

   mWebView.canGoForward() == mXWalkView.getNavigationHistory().canGoForward() mWebView.clearHistory() == mXWalkView.getNavigationHistory().clear() 

  
  
  
• The setResourceClient () and setUIClient () methods do not accept null as a parameter, unlike standard ones. Therefore, in this way, it will not be possible to turn off notifications, only by setting “empty” classes or destroying XWalkView itself.

I described more complicated issues and their possible solutions in the second article in order not to go deep with quick familiarization.

Findings.

Briefly about Crosswalk, we can say that this is a good and quite convenient solution with adequate support. As a runtime for HTML5 applications it looks very promising, especially considering the active development process. Definitely can be recommended for use when creating hybrid applications.