Which underlying Browser does PhoneGap use on Android? - javascript

Since PhoneGap runs an html page in a native app container, I suppose I require some kind of browser to do that.
Which underlying Browser does PhoneGap use on Android? Is it the default installed browser or does phonegap has its own? Or is it Chrome?

Phone Gap (Cordova) currently uses the standard Android WebView which is a stripped down version of a browser (based on a particular version of WebKit).
It can't really be the Chromium-based WebView yet, that was just made available as a component to third party developers only recently in Android 4.4.
And as of April 1st 2014, Android 4.4 (KitKat) constitutes only about 5.3% of all the Android versions (not to mention, this new Chromium-based WebView still seems to be a work in progress, so it will take a while for most third party developers to feel completely comfortable with it).

Related

What features are available in a cordova web view?

What features (HTML, JS, CSS, Web APIs), outside of plugins, are available in a cordova web view ? I am making a web app, and then I use cordova to create an apk file. The web app works fine with chrome and firefox for android. But when I try the generated apk on the same android device and the emulator the JavaScript is obviously not executed because buttons have no effect.
The initial HTML and CSS display fine, and I think I use some JavaScript or HTML5 features that are not available yet on cordova web view, but I don't know what I can use and what I cannot. I had a look at the emulator's error log but I get nothing meaning-full.
For example is it possible to use es2015 without transpiling, esModules etc, but I don't know where to look it up. What is the difference between a webview browser and chrome/firefox for android.
Targeting Android 4 and later.
https://cordova.apache.org/
It's probably easiest to look at the architecture diagram: https://cordova.apache.org/docs/en/latest/guide/overview/index.html.
Cordova apps consist of a small wrapper around a WebView (this is a "window" of the default browser installed by your mobile OS, although you can swap it out for another: https://cordova.apache.org/docs/en/latest/guide/hybrid/webviews/), with access to the mobile device's features via plugins. So... to answer your questions:
You can use any technology that's supported by the mobile browser you're working in. https://caniuse.com is super helpful in this regard.
You will also find that Android 4.x's stock web browser is not that great -- some of the shiny new popover UI stuff (walkthrough help and light boxes) will render, but the z-order is all messed up when you try to click to the next item. I've run into other issues as well, but I can't remember them off the top of my head.
The Crosswalk project allows you to embed a Chrome browser web view in older Android versions (back to 4.x I think). Support for this project has been discontinued in the latest Cordova releases, as it's no longer necessary.

Android internet app doesn't render mobile website version properly

So the case is - when I run my website under Android Chrome, it's all ok, but when I open it up in the default "internet" app, it doesn't render some html markup and js is run only to some extent. I used the Aurelia.js framework for coding it. How can I debug this behavior? Is there a way to somehow see the errors in js console on Androids default internet app?
it depends on a version of android you're testing on
as google says
Since Android 4.4 (KitKat), the WebView component is based on the Chromium open source project. WebViews now include an updated version of the V8 JavaScript engine and support for modern web standards previously missing in old WebViews. New Web views also share the same rendering engine as Chrome for Android, so rendering should be much more consistent between the WebView and Chrome.
https://developer.chrome.com/multidevice/webview/overview
So if you testing on android version before 4.4 you may not test it on chromium based browser

why does an html5 app work differently in the browser than it does in Cordova (Android)?

Is there a reason why an HTML5 app that works fine in browser would work differently when compiled with Cordova for Android?
Does cordova not support all the same things as the browser?
Im mainly thinking of / referring to the way JavaScript works.
Cordova itself does not handle the presentation layer of an application. Cordova creates a basic, single view, native application wherein the single view is a webview. A webview is native to the platofrm/SDK that the application is implemented in.
Because webviews are packaged with the SDK, they are not updatable like the browser that is on the device. This means that code you create may run just fine in a browser on the device but may not run in the native webview. Additionally, your code may work on a newer version of the platform/SDK and not on older versions.
If you are experiencing an issue with a particular item being used in a webview, it is best to look up the capabilities of that particular webview from the platform/SDK version you are seeing issues with.
An example would be using the latest version of Cordova to build an Android application making use of canvas elements. If you deploy the application to a device running Android 5.0 you will have no issue, but if you deploy the same application on a device running Android 2.3.4 your application will appear to not function. This is not because of Cordova, it is because of the capabilities of the webviews in the various platform/SDK versions.
One way to try and safeguard against these types of issues is to make use of a framework. The reason being that most frontend frameworks have builtin fallbacks for compatibilities with various versions of webviews/browsers/etc.
Because Cordova uses the native browser view. Some JS implementation can differ from Chrome, Firefox, and so on.
That's mainly for security reason, or for webview itself (depending of the platform) you may have some limitations or differences.

Reasons for porting a Cordova App to a Mobile Chrome App?

We got a Cordova App running and wrote ourselves a build script using Grunt which makes building the App a breeze. We don't require any of the APIs Chrome offers and are, apart from some performance issues with elderly Android devices which forced us to block some minor features on those devices, pretty much satisfied with the current status of our app.
So far we couldn't find any reason why it would make sense to transform our Cordova App into a Mobile Chrome App. Or is there something we're missing? Are there any differences in terms of JS speed, CSS support, etc.?
The primary motivation for Chrome Apps on Mobile leveraging Apache Cordova was to bring Desktop Chrome Apps to Android and iOS.
However, there are some reasons why you should/shouldn't consider using the cca toolkit, particularly if you already enjoy using cordova:
Chrome Apps APIs
If you wish to leverage some of the useful Chrome Apps APIs which we have ported to mobile, you may already be able to use them inside your vanilla cordova app, even without using our cca toolkit! (We went out of our way to try and make this work whenever possible, giving back to the community that helps us in turn).
However, for some of the APIs, you really do need to use our cca toolkit, since we may rely on the chrome app lifecycle or other specifics. (It seems our docs don't yet make this distinction clear, so I've filed an issue to address that).
Verdict: consider cca if one of the Chrome Apps API's which do not work on vanilla cordova appeal to you.
Desktop Platform
Chrome Packaged Apps run on any desktop platform chrome runs on -- which is every single mainstream Operating System in popular use today. The capabilities and native integration of these apps are rapidly improving, and are truly removing barriers to using web technologies for whole ranges of application types.
So, while the motivation for Chrome Apps on Mobile was to enable porting some of those desktop apps to mobile, you should consider if the reverse isn't actually useful for you!
This would mean adjusting your existing app to use the chrome app lifecycle and manifest, adhere to restrictions like CSP and disabled web features, and cannot rely on cordova extensions -- but in practice this is often not prohibitive for a cordova app which is already a package offline-enabled web application (thats the hard part)!
Verdict: consider cca if you would also like to also target the desktop platform, or would like to submit your app to the chrome web store.
Cordova Plugins
If your existing mobile app already leverages some cordova plugins, you can still use the cca tool, since we create a fully compatible cordova project. This comes with the caveat that those plugins will only be available on mobile -- but you can use feature detection for desktop-mobile app compatibility.
Verdict: the cca tool does not prohibit the use of cordova plugins.
Mobile Platforms that are not Android or iOS
We do not currently support some of the platforms which vanilla cordova does, such as BlackBerry, Windows Phone, or upcoming platforms like FirefoxOS, Tizen, and Ubuntu (though many of those do not yet have feature parity with Android / iOS anyway).
Verdict: don't use cca if one of these mobile platforms is important to you.
Final Words
If you are already happy with what you have, well, they say that if it aint broke, perhaps don't fix it!

javascript not working on native android browser

I am part way through developing a mobile web app which contains almost no HTML elements. JSON2HTML is used to create HTML elements.
My problem is that it works ok except for on
iPad
Android 4.0.3 Native browser.
The problem with these browsers is that the content isn't being rendered.
It works fine on
Android 4.0.3 Chrome,
Android 4.0.3 Firefox
Android 4.0.3 Opera
Android 4.0.3 Dolphin
Android 4.1.1 Native
Android 4.1.1 Other browsers
Just to clarify, this is a mobile web app, not a native mobile app. I am not using any native code, I am using standard web technologies (HTML5, CSS3, jQuery, Javascript, JSON)
After days of research and testing, I have found the solution.
First I activated the built-in debugger on my Android phone - instructions at http://tinyurl.com/768qltl
The debugger then told me that the error was at line 71 of jquery.json2html.js
I opened jquery.json2html.js
I replaced line 71 with the following code
else $.fn.append.call($(this),$(dom).children());
This works because the previous line 71 was calling the jquery append.apply function, which only works with specific data type on older browsers.
Your best bet would be finding a way to remotely debug what's happening in the native browser. There are a couple ways to do this.
Install an app like JsHybugger, which acts as a reverse proxy
Add some new JavaScript to the source page and use Weinre, JSConsole, or to attach remotely

Categories

Resources