Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android v 5.0+ webview HTML5, CSS3 and ES6 compatibility

I have a hybrid Android app which uses Crosswalk. I made the switch to Crosswalk a few months ago and it was a huge productivity boost. I spent a great deal more time testing out on different Android OS versions and ran into far fewer issues with incomplete HTML5/CSS3/ES6 implementation - if I understand correctly because Crosswalk is based on Chromium which is not the case with earlier versions of Android.

However, the Crosswalk project has now been abandoned. My understanding is that the post v 5.0 impleentation of the native Webview in Android is so good as to make Crosswalk obsolete.

I am now toying with dropping Crosswalk too - based on the observation that in my target market (Western Europe) Android v 5.0- market share is in single digits and falling fast.

Before I make the plunge I thought I should ask here. Does Android v 5.0+ WebView offer a truly flat, Chrome grade, API for HTML5, ES6 and CSS3 or am I still likely to run into issues with unimplented capabilities rendered worse by "tweaks" to the OS done by the various device vendors?

To mention a few specific issues

  • Can I expect a full set of CSS3 pseudo selectors to be supported
  • Can I assume that I can safely work without using -webkit style vendor prefixes
  • Will I be able to write JS code that uses Object.keys and other more recent comers to the JS stable

I have been unable to find a comprehensive discussion of the full set of Webview capabilities by version. I would much appreciate any feedback on this.


Since I posted this question I have experimented with dropping Crosswalk and tested the results on my Moto E3Power phone which runs Android 6. To all intents and purposes the app still works just as expected. However, that is far from being a rigorous test. I am putting a bounty on this question in the hope that it will yield some definitive answers.


Having now tested my non Crosswalk build on two devices I have run into one immediate issue. One of the things I do is modify cssText. e.g.

document.getElementById('id').style.cssText = 
";transform:rotate(45deg) translate(calc(1024px - 1.35em)) rotate(-45deg);"

which on my Android 6.0 Moto works perfectly and delivers the expected result:

  • Element #idrotates 45 degrees
  • slides out along its, rotated, X axis
  • and finally rotates back -45 degrees

Surprisingly enough on an HTC Hero running Android 7.0 this does not work. Although it makes no sense I even tried it out after adding the -webkit-prefix. On both devices I upgraded Webview to the latest available version on Play Store.

like image 456
DroidOS Avatar asked Sep 13 '17 16:09

DroidOS


1 Answers

Webview now it's not integrated with the OS but it's an independent app that can be updated from the play store, and yes it support css3 and all, it is not chrome, but shares the same code for rendering with chrome

No, Chrome for Android is separate from WebView. They're both based on the same code, including a common JavaScript engine and rendering engine.

https://developer.chrome.com/multidevice/webview/overview

If you say most of your user devices are +5 you should be fine.

  1. WebGL
  2. WebRTC
  3. WebAudio
  4. Form validation

Here are the features available for webview https://developer.chrome.com/multidevice/webview/overview#does_the_new_webview_have_feature_parity_with_chrome_for_android_

Also for android > 7.0 Chrome itself it's the webview.

like image 199
Cristian Gomez Avatar answered Nov 18 '22 07:11

Cristian Gomez