SlideShare ist ein Scribd-Unternehmen logo
1 von 19
@sergiandreplace
• I do Android stuff
• I’ve tried to create something
with webviews
• It was a monster
• Pain and tears
• This is my history
@sergiandreplace
• “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 issues
@sergiandreplace
• 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
@sergiandreplace
• WebSettings settings=webView.getSettings()
• settings.
• setJavaScriptEnabled
• setGeolocationEnabled
• setJavaScriptCanOpenWindowsAutomatically
• setBuiltInZoomControls
@sergiandreplace
• 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
@sergiandreplace
• 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
• 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
• 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)
@sergiandreplace
@sergiandreplace
• 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
• 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
@sergiandreplace
• Only one possible solution
• loadUrl(“javascript:….”);
• End of it
@sergiandreplace
@sergiandreplace
• 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
• Questions and all the stuff

Weitere ähnliche Inhalte

Mehr von Sergi Martínez

Mehr von Sergi Martínez (9)

Kotlin, a modern language for modern times
Kotlin, a modern language for modern timesKotlin, a modern language for modern times
Kotlin, a modern language for modern times
 
What is flutter and why should i care?
What is flutter and why should i care?What is flutter and why should i care?
What is flutter and why should i care?
 
What is flutter and why should i care? Lightning talk
What is flutter and why should i care? Lightning talkWhat is flutter and why should i care? Lightning talk
What is flutter and why should i care? Lightning talk
 
Let’s talk about star wars with Dialog Flow
Let’s talk about star wars with Dialog FlowLet’s talk about star wars with Dialog Flow
Let’s talk about star wars with Dialog Flow
 
Database handling with room
Database handling with roomDatabase handling with room
Database handling with room
 
Smartphones
SmartphonesSmartphones
Smartphones
 
Introduction to Android Fragments
Introduction to Android FragmentsIntroduction to Android Fragments
Introduction to Android Fragments
 
Creating multillingual apps for android
Creating multillingual apps for androidCreating multillingual apps for android
Creating multillingual apps for android
 
Píldoras android i. Intro - 2ª parte
Píldoras android i. Intro - 2ª partePíldoras android i. Intro - 2ª parte
Píldoras android i. Intro - 2ª parte
 

Kürzlich hochgeladen

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Kürzlich hochgeladen (20)

Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelNavi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source Milvus
 

Android webviews and Hybrid Development. A Horror Story

  • 1.
  • 2. @sergiandreplace • I do Android stuff • I’ve tried to create something with webviews • It was a monster • Pain and tears • This is my history
  • 3. @sergiandreplace • “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 issues
  • 4. @sergiandreplace • 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
  • 6. @sergiandreplace • WebSettings settings=webView.getSettings() • settings. • setJavaScriptEnabled • setGeolocationEnabled • setJavaScriptCanOpenWindowsAutomatically • setBuiltInZoomControls
  • 7. @sergiandreplace • 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
  • 9. @sergiandreplace • 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…?)
  • 10. @sergiandreplace • 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();
  • 11. @sergiandreplace • 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)
  • 13. @sergiandreplace • 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…
  • 14. @sergiandreplace • 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
  • 16. @sergiandreplace • Only one possible solution • loadUrl(“javascript:….”); • End of it
  • 18. @sergiandreplace • 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