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 bro

Solution 1:

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.

Solution 2:

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.