Android webviews& Hybrid

APPSA horror story

@sergiandreplace

About me• I do Android stuff

• I’ve tried to create something with webviews

• It was a monster

• Pain and tears

• This is my history

@sergiandreplace

What is a webview?• “A view that displays web

pages”

• Since API 1

• New version in KitKat (not today)

• Is not based on Chrome

• Renderer is “special”

• Its full of bugs and issuesIT’s A MONSTER!

@sergiandreplace

How it works?• WebView is added to a layout like any other view

• It’s a wrapper to execute html and associated technologies

• The Java environment and the html environment are isolated*

• We can:

• loadUrl(String url)

• loadData(String data, String mime, String encoding)

• loadDataWithBaseUrl (String baseUrl. String data….)

• android.permission.INTERNET!!

Android app

Webview

HTML (JS, CSS,

etc)

Java

@sergiandreplace

Show me the

CODE!

@sergiandreplace

Configure the Webview

• WebSettings settings=webView.getSettings()

• settings.

• setJavaScriptEnabled

• setGeolocationEnabled

• setJavaScriptCanOpenWindowsAutomatically

• setBuiltInZoomControls

@sergiandreplace

Handling links• Default behaviour: open links externally (yes, it’s true)

• We should intercept the url requests and redirect back to the webview

• We need a WebViewClient

• WebViewClient handles page events

@sergiandreplace

Show me the

CODE!

@sergiandreplace

WebViewClient vs WebChromeClient

• WebViewClient handles page lifecycle and resources loading• .onPageFinished (it’s a trap!)

• .onPageStarted

• .shouldInterceptRequest (ooooh!)

• WebChromeClient Just handles “other” events. More specific to page itself* .• .onProgressChanged (what the…?)

@sergiandreplace

Video• Android fragmentation is nothing compared to this

• Video full screen is handled by WebChromeClient.onShowCustomView

• Android <=2.3.3 view instanceof VideoView

• Android >3.0 view instanceof HTML5VideoView . An internal private class (d’oh!)

Field proxiedVideoFullScreen = callback.getClass().getDeclaredFields()[0];proxiedVideoFullScreen.setAccessible(true);Object unproxiedVideoFullScreen=proxiedVideoFullScreen.get(callback);Field mUri= unproxiedVideoFullScreen.getClass().getSuperclass().getDeclaredField("mUri");mUri.setAccessible(true);

path =((Uri)mUri.get(unproxiedVideoFullScreen)).toString();

@sergiandreplace

The hybrid model• Just put your web on assets and

load it

• loadUrl("file:///android_asset/... (///!!!)

• Java vs. Javascript. Try to be as biased as possible

• Do not mix interactive events (touch, drag, etc) IT’S ALIVE!

@sergiandreplace

Show me the

CODE!

@sergiandreplace

From Javascript to Java

•We can inject Java objects to the WebView

• This object methods can be invoked from JavaScript

• Cool, isn’t? So cool that nobody else supports it

• Forget DODM!

• Sooo…

@sergiandreplace

From Javascript to Java II

• Just use a specific url format and capture it from WebViewClient and Use url to put parameters

• This works in all platforms

• Uri class is our best friend for parsing urls

• Returning values? Add callback function as parameter. All calls are asynchronous

• Basically, this is what Cordova does

@sergiandreplace

Show me the

CODE!

@sergiandreplace

From Java to Javascript

• Only one possible solution

• loadUrl(“javascript:….”);

• End of it

@sergiandreplace

Show me the

CODE!

@sergiandreplace

Pitfalls!• Bug http://code.google.com/p/android/issues/detail?id=17535: Url with

params not working

• Sony (des)Experia

• Create a mini-browser to the web team. Don’t relay on Chrome for Android

• Abandon Android 3.0. Seriously.

• Do a lot of tests

• Hardware acceleration: “If your application performs custom drawing, test your application on actual hardware devices with hardware acceleration turned on to find any problems” a.k.a.: Just try

@sergiandreplace

That’s IT• Questions and all the stuff