android webviews and hybrid development. a horror story
DESCRIPTION
Introduction to the Android WebView and fundamentals of Hybrid Development. Find the sample code at https://github.com/sergiandreplace/webview_samplesTRANSCRIPT
![Page 1: Android webviews and Hybrid Development. A Horror Story](https://reader037.vdocuments.net/reader037/viewer/2022102805/554d20a4b4c905c5208b4a8f/html5/thumbnails/1.jpg)
Android webviews& Hybrid
APPSA horror story
![Page 2: Android webviews and Hybrid Development. A Horror Story](https://reader037.vdocuments.net/reader037/viewer/2022102805/554d20a4b4c905c5208b4a8f/html5/thumbnails/2.jpg)
@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
![Page 3: Android webviews and Hybrid Development. A Horror Story](https://reader037.vdocuments.net/reader037/viewer/2022102805/554d20a4b4c905c5208b4a8f/html5/thumbnails/3.jpg)
@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!
![Page 4: Android webviews and Hybrid Development. A Horror Story](https://reader037.vdocuments.net/reader037/viewer/2022102805/554d20a4b4c905c5208b4a8f/html5/thumbnails/4.jpg)
@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
![Page 5: Android webviews and Hybrid Development. A Horror Story](https://reader037.vdocuments.net/reader037/viewer/2022102805/554d20a4b4c905c5208b4a8f/html5/thumbnails/5.jpg)
@sergiandreplace
Show me the
CODE!
![Page 6: Android webviews and Hybrid Development. A Horror Story](https://reader037.vdocuments.net/reader037/viewer/2022102805/554d20a4b4c905c5208b4a8f/html5/thumbnails/6.jpg)
@sergiandreplace
Configure the Webview
• WebSettings settings=webView.getSettings()
• settings.
• setJavaScriptEnabled
• setGeolocationEnabled
• setJavaScriptCanOpenWindowsAutomatically
• setBuiltInZoomControls
![Page 7: Android webviews and Hybrid Development. A Horror Story](https://reader037.vdocuments.net/reader037/viewer/2022102805/554d20a4b4c905c5208b4a8f/html5/thumbnails/7.jpg)
@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
![Page 8: Android webviews and Hybrid Development. A Horror Story](https://reader037.vdocuments.net/reader037/viewer/2022102805/554d20a4b4c905c5208b4a8f/html5/thumbnails/8.jpg)
@sergiandreplace
Show me the
CODE!
![Page 9: Android webviews and Hybrid Development. A Horror Story](https://reader037.vdocuments.net/reader037/viewer/2022102805/554d20a4b4c905c5208b4a8f/html5/thumbnails/9.jpg)
@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…?)
![Page 10: Android webviews and Hybrid Development. A Horror Story](https://reader037.vdocuments.net/reader037/viewer/2022102805/554d20a4b4c905c5208b4a8f/html5/thumbnails/10.jpg)
@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();
![Page 11: Android webviews and Hybrid Development. A Horror Story](https://reader037.vdocuments.net/reader037/viewer/2022102805/554d20a4b4c905c5208b4a8f/html5/thumbnails/11.jpg)
@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!
![Page 12: Android webviews and Hybrid Development. A Horror Story](https://reader037.vdocuments.net/reader037/viewer/2022102805/554d20a4b4c905c5208b4a8f/html5/thumbnails/12.jpg)
@sergiandreplace
Show me the
CODE!
![Page 13: Android webviews and Hybrid Development. A Horror Story](https://reader037.vdocuments.net/reader037/viewer/2022102805/554d20a4b4c905c5208b4a8f/html5/thumbnails/13.jpg)
@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…
![Page 14: Android webviews and Hybrid Development. A Horror Story](https://reader037.vdocuments.net/reader037/viewer/2022102805/554d20a4b4c905c5208b4a8f/html5/thumbnails/14.jpg)
@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
![Page 15: Android webviews and Hybrid Development. A Horror Story](https://reader037.vdocuments.net/reader037/viewer/2022102805/554d20a4b4c905c5208b4a8f/html5/thumbnails/15.jpg)
@sergiandreplace
Show me the
CODE!
![Page 16: Android webviews and Hybrid Development. A Horror Story](https://reader037.vdocuments.net/reader037/viewer/2022102805/554d20a4b4c905c5208b4a8f/html5/thumbnails/16.jpg)
@sergiandreplace
From Java to Javascript
• Only one possible solution
• loadUrl(“javascript:….”);
• End of it
![Page 17: Android webviews and Hybrid Development. A Horror Story](https://reader037.vdocuments.net/reader037/viewer/2022102805/554d20a4b4c905c5208b4a8f/html5/thumbnails/17.jpg)
@sergiandreplace
Show me the
CODE!
![Page 18: Android webviews and Hybrid Development. A Horror Story](https://reader037.vdocuments.net/reader037/viewer/2022102805/554d20a4b4c905c5208b4a8f/html5/thumbnails/18.jpg)
@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
![Page 19: Android webviews and Hybrid Development. A Horror Story](https://reader037.vdocuments.net/reader037/viewer/2022102805/554d20a4b4c905c5208b4a8f/html5/thumbnails/19.jpg)
@sergiandreplace
That’s IT• Questions and all the stuff