I need to create a simple app that acts like a launcher and keeps the chrome browser (must be chrome due to heavy HTML5) as main app with a certain url with a device that runs Android 4.2 and cannot be upgraded neither rooted. Best would be if I could embed the chrome browser frame and hide all controls.
I already managed to write launcher apps with XE6 which minimize the risk of accidently leaving the app by interception "back" and being the default home app.
I know of the CEF in Windows, is there something similar under android?
The FMX mobile browser component TWebBrowser is a wrapper around the native platform browser. On Android that means it wraps WebView which is a modern WebKit browser with HTML 5 support.
So, it seems to me that the obvious way forward is to use TWebBrowser. From what you've described of your app, however, it might be simpler to code it in Java. It would certainly be more lightweight and you'd be sure to have easy access to all WebView functionality.
WebView wraps Android WebKit before Android 4.4. With Android 4.4 and newer WebKit wraps Chromium. For your 4.2 device limited HTML5 support is already available in WebKit.
Some advices are collected on http://blog.guya.net/2013/10/24/the-pains-and-remedies-of-android-html5/
If I skip all advices which are for pre 4.2 devices, the remaining list of issues and remedies is quite short.
None of the parents HTML elements to the canvas should have overflow: hidden or overflow:scroll
Wait a few (~100 millisecond) after the DOM is ready to ask it what’s the window size is.
Styling text-inputs that has focus: https://stackoverflow.com/a/9464837
Related
I know this has been asked before but those questions are pretty old now.
I have a "game" that I developed some time ago with WebGL and I want to bring it to Android with a simple WebView.
The problem now is, that it won't really respond to the user input in the WebView (Chrome works just fine. Android 7.1.1) . I guess that's because of WebGL.
So now, as the crosswalk-project has ended a while ago I am searching for an alternative to run WebGL in my application. Or somehow just run my "game" in an Android App.
Do you have any idea of how I could bring it to work?
From 5.0 Android comes with Android System WebView which is being updated and we might call it the Native WebView. WebGL should work there although some of WebGL extensions and WebGL 2 (stats) might not.
The key to make your game work as an application is following.
First you must identify what WebGL version, WebGL extensions, WebGL or Shader capabilities and other HTML5 functionality your game (and the game engine you use) requires.
Then you must find a WebView that supports that functionality. You can simply do that by opening webpages https://html5test.com/ and http://webglreport.com/ with the WebView you want on your Android device. IMPORTANT! If you for example open the webpage with installed Chrome browser, it doesn't guarantee the Native WebView is used! So it is better to write a small custom application to make sure you are testing the WebView you want to use for the game.
In the end you will probably end up with compiling your game in application with custom WebView which will add an additional size to your game.
Other useful informations
Android versions < 5.0 has a Native WebView that doesn't come with updates so it doesn't support WebGL and this will not change. But the Chrome browser (or other installed browsers) is likely to support WebGL there, because it comes with custom WebView.
Samsung really messed up. I mean it, they are customizing Android OS a lot including some black magic with WebViews => Native WebView doesn't work there properly, so custom WebView in your application is must.
We (GAMEE) are using the Native WebView and XWalkView for Samsung and Android < 5.0 and WebGL games are working just fine right now.
I am working on a cross-platform application developed using html5, css3 and angularJS.
I am facing an issue in showing the ScrollBar on android device.
I have used -webkit-overflow-scrolling: touch;
It is working fine on iPAD but its has no effect on android device.
Need help.
Thanks in advance
As you have rightly said, Android native WebView does not "show" a scroll bar when using overflow:scroll|auto. But the scrolling is allowed when you touch and move the container around. So scroll should still work as expected, without the bouncy effect.
Another Android catch is till 4.4, the native WebView is not the one used in Chrome, i.e. ChromeView. So you are going to have to deal with it by using a javascript polyfill, like overthrow.js [http://filamentgroup.github.io/Overthrow/] or iscroll. Personally, iscroll ux sucks on Samsung Galaxy Tabs.
But if you are targetting Android 4.0>=, then this might help https://github.com/pwnall/chromeview. Haven't personally tried it though.
Check out for more details on webview changes https://developers.google.com/chrome/mobile/docs/webview/overview
Android 4.4 (KitKat) includes a new WebView component based on the Chromium open source project. ...[truncated]...., so rendering should be much more consistent between the WebView and Chrome.
As of this writing, -webkit-overflow-scrolling was exclusive to Mobile Safari on iOS 5 and later.
As of mid-2012, the latest Android version (4.1 Jelly Bean) does not support it, but it IS supported in Chrome for Android, which can be downloaded from Google Play (and only supports Android 4.0+). Android 3.0+ supports overflow: scroll, but it's not very snappy.
Referred from : How much support is there for -webkit-overflow-scrolling:touch
I developed an application for android using jquery mobile and phonegap.
I deployed the app to my device over usb. The performance of the app ist really bad, especially while scrolling a longer list.
The strange thing is: The whole app runs smooth if i just open up the browser on my phone and access the index.html directly. Same technology, same content. I do not use the phonegap native api or anything similar.
Tested with phonegap 1.5.0 and 1.7.0rc1, jquery mobile 1.1.0 on android 4.0.2.
Any ideas?
On honeycomb (3.0), Ice cream (4.0) and posterior devices, you can boost performance by adding the following in the < Application ... > tag:
android:hardwareAccelerated="true"
You could set the minSdk to 8 (Android 2.2) for compatibility and the targetSdk to 15 (Android 4.0) and that would make hardware acceleration work when its available on the device only.
I believe that with this flag the performance of my apps is equal to running them in the browser, so I guess its because the browser was coded with hardware acceleration :)
I had a similar problem: a page with a longer list of "medium complex" themed divs. The browser of HTC phone had no problems in displaying. But within the phonegap app rendering failed completely. I saw a kind of WSOD, which disappeared only after touching the display. After touching, the page was displayed correct.
The problem was not in place, when I shortened the div-list to one or two div-elements or when I reduced the sub elements within the divs and reduced the render effort caused by the css complexity.
The white screen looked like, if the whole body was invisible, since only the documents background-color was displayed (I added a light pink for this). So I guess, the rendering was the problem after reading this thread
I tried the various proposals I found in this thread to make the app work without the "WSOD". But nothing worked. Some of them made the app displaying really worse.
Finally, after a whole day of searching, I made it. I set within the tag (not the tag) of my AndroidManifest
<application android:hardwareAccelerated="false" ...
Now the app behaves in the same fast way as my webbrowser. Seems like, if hardware acceleration is not always the best feature...
My versions:
phonegap 3.5.0, Android 4.0.3, jQuery v2.1.0, HTC Sense 3.6
Found an answer here: http://groups.google.com/group/phonegap/browse_thread/thread/94da1cf881abe995/6d4f7aea7aeba523?lnk=gst&q=performance
There is probably a difference between the native browser and the webview in terms of javascript performance.
If you can confirm the browser performs better (that it's not something suboptimal in your code frustrating one but not the other), you could consider deploying as an html5 offline application so that you will actually run in the browser.
We bumped into performance issues while scrolling the same amount of list items with jquery mobile. The performance was so poor (we didn't even try in PhoneGap environment) that we rewrote the app using iScroll library... now the app scrolls really smoothly.
If you are at the beginning of the development, you could try to change the UI library.
After this situation we deploy our apps to test devices quite often to manage performance issues in time... this became a "policy" :)
I am developing an Android app using web technologies and the CSS transitions (quite essential to the functionality of the app, since they're responsible for scrolling and swiping pages) are quite sluggish.
According to information found on the internet, CSS transitions are not hardware accelerated unless transformed 3-dimensionally. I found many articles saying that I should put "-webkit-transform: translateZ(0);" to my animated elements.
However, the Webkit in older Android versions (below 3.0) doesn't support 3D transformations.
Can I embed a newer version of WebKit with my app?
Can I embed a newer version of WebKit with my app?
In theory, perhaps.
You would have to completely rewrite WebKit to use something that the NDK supports for output (e.g., OpenGL) and embed it in your app. I estimate that this will take >100 developer-months, so if you have a large team and matching budget, you are welcome to try this. By the time you complete the work, the "older Android versions" will be obsolete, and you will not need the code.
Hence, from a practical standpoint, either redesign the apps such that CSS transitions are no longer "essential to the functionality of the app", or limit your app to Android 3.0+ and wait for the Android user base to catch up.
After I have compiled and deployed the demo application to my Samsung Galaxy S II I noticed that the Sample PhoneGap App which comes with PhoneGap was not very responsive when pressing buttons and scrolling.
I also made a little app using PhoneGap and jQuery Mobile, with 4 buttons everything was ok, but when I added more than 7 and my viewport needed to be scrolled, scrolling become to be very slow, the more buttons/widgets I had the slower the srolling was.
Is this a bug specific to my mobile device or it is just how PhoneGap works:
The fact that PhoneGap apps feel slow on my phone including the demo?
EDIT:
The same PhoneGap app served by an HTTP server from my laptop and launched in the standard Android browser works very smoothly
Try setting your targetSdkVersion higher. Changing mine from "8" (i.e. Android 2.2) to "14" (Android 4.0) dramatically improved PhoneGap performance on phones running newer versions of Android. Most likely this enables certain performance-enhancing features such as hardware graphics acceleration.
For more info see my other answer about this here: https://stackoverflow.com/a/12397768/233370
Since PhoneGap and the frameworks that is used with it (JQM,Sencha Touch etc) are just working in a WebKit browser they can be slow if there's too much to render.
There's actually no bug with your device or etc.It's just that PhoneGap and the frameworks are not so good if you want fast response and so on.You can try your app in other devices and can observe that they behave the same.
I had the same Problems, after Update to Android 4.0.4 my Phonegap (Cordova 2.0.0) & Sencha Touch 2 - APP was very very slow.
But after I insert
super.appView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
the APP works fine, as before the update.
http://developer.android.com/guide/topics/graphics/hardware-accel.html
For improved performance you may not need Phonegap.
If what you need is quick cross platform styling but fast native components try a tool like nativecss.com It keeps the styling in CSS, but uses native components for everything else - so no HTML rendering delays or clunky animations.